Bootstrap Modal shown only once

Question

i was trying to use Bootstrap Modals in my ASP.Net MVC 5 project. I have two container div 's on my page:

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">

    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">

    </div>

I fill and show them with these:

function addBandOnClick() {

            var options = {
                "backdrop" : "static",
                "keyboard": "false",
                "show" : "true"
            }

            $('#addModal').load('@Url.Action("Add")');
            $('#addModal').modal(options);
        }

        function editOnClick(Id) {

            var options = {
                "backdrop": "static",
                "keyboard": "false",
                "show": "true"
            }

            var url = 'Home/Edit/' + Id;
            $('#editModal').load(url);
            $('#editModal').modal(options);
        }

So, on button click i load the layout of the needed one and show it to user. All works fine, except that modals are only shown once , after i close modal in any way i cannot access it again, it's just not visible.

Here's code:

Index.cshtml :

@model IEnumerable<TestShit.Models.MetalBand>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <a onclick="addBandOnClick()" href="#">Add Band</a>
        <table id="table_id" class="display">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.BandName)</th>
                    <th>@Html.DisplayNameFor(model => model.MetalGenre)</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">

    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">

    </div>

    <script>
        var table;

        function addBandOnClick() {

            var options = {
                "backdrop" : "static",
                "keyboard": "false",
                "show" : "true"
            }

            $('#addModal').load('@Url.Action("Add")');
            $('#addModal').modal(options);
        }

        function editOnClick(Id) {

            var options = {
                "backdrop": "static",
                "keyboard": "false",
                "show": "true"
            }

            var url = 'Home/Edit/' + Id;
            $('#editModal').load(url);
            $('#editModal').modal(options);
        }

        $(document).ready(function () {
            table = $('#table_id').DataTable({
                "ajax": '@Url.Action("GetBands", "Home")',
                "columns": [
                    { "data": "BandName" },
                    { "data": "MetalGenre.GenreName" },
                    {
                        mData: null,
                        mRender: function (d, t, r) {
                            var Id = r.ID;
                            var link = '<a style="text-decoration: none" onclick="editOnClick(' + Id + ')" href="#">' +
                                       "<img width=\"24\" height=\"24\" src=\"Content/Images/edit.png\"/></a> |" +
                                       "<a onclick=\"deleteBand(" + Id + ")\"><img src=\"Content/Images/delete.png\"/></a>";

                            return link;
                        }
                    }
                ]
            });

        });

        $('body').on('hidden.bs.modal', '.modal', function () {
            var parent = $('#modalContainer').parent();

            parent.empty();
            parent.removeAttr('style');
            $(this).removeData('bs.modal');
        });

        function applyModal(btnClicked) {

            var $form = $(btnClicked).parents('form');
            var url = $form.attr('action');
            var data = $form.serialize();

            $.post(url, data, function () {
                table.ajax.reload(null, false);
            });
        }

        function deleteBand(id) {
            $.post("Home/Delete/" + id, function () {
                table.ajax.reload(null, false);
            });
        }

    </script>

</body>
</html>

And AddEdit.cshtml (the one, returned by both Add and Edit/ID actions):

@model TestShit.Models.MetalBand

<div class="modal-dialog modal-sm" id="modalContainer">
    <div class="modal-content">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">@ViewBag.Title</h4>
        </div>

        @using (Html.BeginForm())
        {
            <fieldset>

                <div class="modal-body">
                    <div>
                        <p>@Html.DisplayNameFor(model => model.BandName)</p>

                        <p>@Html.EditorFor(model => model.BandName)</p>
                            <p>@Html.DropDownListFor(model => model.MetalGenreID, new SelectList(ViewBag.Genres, "ID", "GenreName"))</p>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button onclick="applyModal(this)" data-dismiss="modal" class="btn btn-primary">@ViewBag.ButtonText</button>
                    </div>

                </fieldset>
            }
        </div>
    </div>

Please, i really can't see what i'm doing wrong =(

Answer 1

Your trouble is here:

    $('#addModal').load('@Url.Action("Add")');
    $('#addModal').modal(options);

And it should be done like this:

$('#addModal').load('@Url.Action("Add")', function () {
                $('#addModal').modal(options);
            });

Because, when you do it the first way, the

$('#addModal').modal(options);

fired immediatly after

   $('#addModal').load('@Url.Action("Add")');

Which causes trouble due to async execution of these functions. The right way is to use callbacks) In this case the system will wait for load to finish and then it will show your modal, good luck!

Answer 2

 if (document.cookie.indexOf('modal_shown=') >= 0) {
        //do nothing if modal_shown cookie is present
    }
    else {
        //set cookie modal_shown
        //cookie will expire when browser is closed

        if (imageTitle != "") {
            $('#myModalGallery').modal('show');  //show modal pop up
            document.cookie = 'modal_shown=seen';

        }
        else {
            $('#myModalGallery').modal('hide');
        }
    }
this will help u dear it is working fine for me

Bootstrap Modal shown only once

Question

2 answers

solution1
0 ACCPTED 2015-02-13 14:57:49

solution2
0 2020-07-07 12:51:52

Bootstrap Modal shown only once

Question

2 answers

solution1 0 ACCPTED 2015-02-13 14:57:49

solution2 0 2020-07-07 12:51:52

solution1
0 ACCPTED 2015-02-13 14:57:49

solution2
0 2020-07-07 12:51:52