Bootstrap 2.3.1 - Modal with remote doesn't load first time, but does after the first time

Question

I have a bootstrap modal that loads remote content. This does not work the first time the link is click. The modal comes up, but remote content is not loaded. I checked the logs, and the remote call is not even made.

If I click the link a second or more times, it works perfectly. I originally was using the standard bootsrap link method, but have since changed to pure javascript hoping to get more control. The link click function is now:

$(function() {
                 $(".modal-link").click(function(event) {
                     $('.modal-body').text('Loading content...');
                     var modal = new $.fn.modal.Constructor();
                     $('#myModal').modal({keyboard: true})
                                  .remote($(this).attr("href"))
                                  .show();

                 })
             })

It gets called every time, and the model comes up every time, but it only makes the remote call after the first time. The remote call is to the same domain/machine. (All of this is inside a grails app.)

Any ideas? I'm not sure what else to try.

Answer 1

I never did figure out why Bootstrap wasn't loading it properly, but did use the following work around:

$('.modal-body').text('Loading content...');
if (firstLoad) {
      $('#myModal .modal-body').load($(this).attr("href"))
      firstLoad = false;
 }

The boolean firstLoad falls back to jquery to load the div content on the first load only.