locked
Modal doesn work RRS feed

  • Question

  • User-1159036174 posted

    Hi!

    I have been traying to pass values (IdProduct and Name) to a bootstrap modal. But I don't know why it doesn't working?

    Could some one help me, please?

    ps.: I am using asp.net core 2.2 mvc. Every code here is in the same view.

    My button that triggered the modal:

    <button type="button" data-toggle="modal" data-target="#itemModal" data-id="@item.IdProduct" data-name="@item.Name" class="btn btn-link">
              <i class="fa fa-ellipsis-v text-danger small float-left"></i>
    </button>

    My javascript:

    <script type="text/javascript">
            $('#itemModal').on('show.bs.modal', function (event) {
    		var button = $(event.relatedTarget) 
    		var idItem = button.data('data-id') 
    		var nameItem = button.data('data-name') 
    		var modal = $(this)
    		modal.find('.modal-title').text(nameItem)
    		modal.find('.modal-body input').val(idItem)
    	});
    </script>

    My modal:

    <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel"></h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body d-inline text-center">
                    <form>
                        <input type="text" class="form-control" id="idItem">
                        <button type="submit" class="btn btn-outline-info" asp-controller="Produto" asp-action="Edit">
                            Edit
                        </button>

    <button type="submit" class="btn btn-outline-danger" asp-controller="Carrinho" asp-action="RemoveFromCart">
    Remover
    </button> </form> </div> </div> </div> </div>

    Thursday, September 19, 2019 2:34 PM

Answers

  • User475983607 posted

    The data syntax is incorrect.  Remove "data-".

    var idItem = button.data('id')
    var nameItem = button.data('name')

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 19, 2019 2:53 PM
  • User-719153870 posted

    Hi Gutox,

    I built a MVC demo based on your code and could not reproduce your problem, it worked well.

    I found that after when i removed the reference to bootstrap.min.js the modal will not show and no error messages in consol. Maybe that's also your situation.

    Or if you met any related error message in your dev tool(F12 ), please share with us.

    Please check if you have added all needed references like below:

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    Notice: please also pay attention to the order of these three references, that might cause peoblems sometimes.

    Also, you can see the demo in my case:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script type="text/javascript">
            $('#itemModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var idItem = button.data('data-id')
                var nameItem = button.data('data-name')
                var modal = $(this)
                modal.find('.modal-title').text(nameItem)
                modal.find('.modal-body input').val(idItem)
            });
        </script>
    </head>
    <body>
        <button type="button" data-toggle="modal" data-target="#itemModal" data-id="1" data-name="1" class="btn btn-link">
            <i class="fa fa-ellipsis-v text-danger small float-left">O</i>
        </button>
        <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalLabel">ModalLabel</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                    </div>
                    <div class="modal-body d-inline text-center">
                        <form>
                            <input type="text" class="form-control" id="idItem">
                            <button type="submit" class="btn btn-outline-info" asp-controller="Produto" asp-action="Edit">
                                Edit
                            </button>
    
                            <button type="submit" class="btn btn-outline-danger" asp-controller="Carrinho" asp-action="RemoveFromCart">
                                Remover
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    And the result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 20, 2019 2:48 AM

All replies

  • User475983607 posted

    The data syntax is incorrect.  Remove "data-".

    var idItem = button.data('id')
    var nameItem = button.data('name')

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 19, 2019 2:53 PM
  • User-719153870 posted

    Hi Gutox,

    I built a MVC demo based on your code and could not reproduce your problem, it worked well.

    I found that after when i removed the reference to bootstrap.min.js the modal will not show and no error messages in consol. Maybe that's also your situation.

    Or if you met any related error message in your dev tool(F12 ), please share with us.

    Please check if you have added all needed references like below:

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    Notice: please also pay attention to the order of these three references, that might cause peoblems sometimes.

    Also, you can see the demo in my case:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script type="text/javascript">
            $('#itemModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var idItem = button.data('data-id')
                var nameItem = button.data('data-name')
                var modal = $(this)
                modal.find('.modal-title').text(nameItem)
                modal.find('.modal-body input').val(idItem)
            });
        </script>
    </head>
    <body>
        <button type="button" data-toggle="modal" data-target="#itemModal" data-id="1" data-name="1" class="btn btn-link">
            <i class="fa fa-ellipsis-v text-danger small float-left">O</i>
        </button>
        <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalLabel">ModalLabel</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                    </div>
                    <div class="modal-body d-inline text-center">
                        <form>
                            <input type="text" class="form-control" id="idItem">
                            <button type="submit" class="btn btn-outline-info" asp-controller="Produto" asp-action="Edit">
                                Edit
                            </button>
    
                            <button type="submit" class="btn btn-outline-danger" asp-controller="Carrinho" asp-action="RemoveFromCart">
                                Remover
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    And the result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 20, 2019 2:48 AM
  • User-1159036174 posted
    Works fine, Yang Shen. Tks a lot.
    Wednesday, September 25, 2019 12:51 AM