Twitter Bootstrap Modal remote function not working properly

Question

I am using twitter boostrap and I want to get html from another page and load it into the modal of my current page. so I created a javascript function to handle this for me.

In my 'index.php' I have this:

<button onclick="popIt('create_event.php', 'Create Event');" data-toggle="tooltip" data-placement="top" data-original-title="Edit" class="btn ttp"><i class="icon-pencil"></i></button>
<button onclick="popIt('tester.php', 'Test Head');" data-toggle="tooltip" data-placement="top" data-original-title="Delete" class="btn btn-danger ttp"><i class="icon-remove icon-white"></i></button>

The javascript function is like so:

<script>

function popIt(url, header) {

        $('#myModal').modal({
            remote: url
        });
        $('#myModalLabel').html(header);
    }

This loads the appropriate page when I click the button, but when I close the modal and click the other button it still loads the previous page.

Please what am I doing wrong? Thanks

Answer 1

Destroy the object after it finishes hiding

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

Answer 2

I have had many issues with Bootstrap's modal widget. The 2 main issues being the caching in IE and the modal function not waiting until the ajax call is complete before triggering the events when the remote property is used. I fixed these issues by creating a wrapper to create the modal dialog. To fix the caching issue, perform a $.get and add a timestamp parameter to the URL and set the response as the content property before initializing the modal widget. See the code below. Hope this helps!

var $queue = $({});
if (settings.remote) {
  $queue.queue('modal_open', function(next) {
    $.when($.get(settings.remote + '&timestamp=' + new Date().getTime())).done(function(content) {
      settings.content = content;
      settings.remote = undefined;
      next();
    });
  });
}

$queue.queue('modal_open', function(next) {
  ...
  $modal.modal(settings);
  next();
}

$queue.dequeue('modal_open');
return $modal;

Answer 3

try $('#myModal').empty() in the first line of your popIt function. it might be cause of delay in getting response from the server

if not you could try fusing a get request and the modal eg,

$.get(url,function(data){
   $('#myModal').html(data)
}