How clear the previous data while open the bootstrap modal?

Question

Main page contains the google map(div), after selecting state from map, i will try to open bootstrap modal and load the selected county map inside the bootstrap.

Firsttime click Texas state(javascript ShowModalDialog() called) then bootstrap modal alert shows Texas then close. Second time Ohio is selected, now first alert showing Texas then Ohio.

Why the previous state is showing here?

<script type="text/javascript">
            function ShowModalDialog(stateid) {

                $('#myModal').modal('show').on('shown.bs.modal', function () {
                   
                  alert(stateid);
                  
                    $("#myModal #myModalLabel").html(document.getElementById("statename").value);
                    var datajson = GetCountyData(stateid);

                });


            }
        </script>

<!-- Modal -->
        <div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="color: #808080">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                    </div>
                    <div class="modal-body">
                      ....
                      ....
                      ..
                      .
                      </div>
</div>
            </div>
        </div>

The on call needs to come before the show call. IOW, you must setup the event handler before you trigger the relevant event. — cvrebert

Miomir Dancevic Miomir Dancevic · Accepted Answer · 2014-12-29T06:41:23

I think this is bug in bootstrap, because i have several ways to clear modal

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

But stil got no 'perfect' solutin, becasue with every new call, modal on screen goes a little down, than in firebug i saw there is a lots of modal there just hidden, than i found

http://bootboxjs.com/

And all my problem were solved

  $("#myModal").on("hide", function() {    // remove the event listeners when the dialog is dismissed
        $("#myModal a.btn").off("click");
    });

    $("#myModal").on("hidden", function() {  // remove the actual elements from the DOM when fully hidden
        $("#myModal").remove();
    });

    $("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
      "backdrop"  : "static",
      "keyboard"  : true,
      "show"      : true                     // ensure the modal is shown immediately
    });

How clear the previous data while open the bootstrap modal?

1 Answers