Fixing Remote Modals in Bootstrap 3.1

January 31st, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

Yesterday saw the release of Bootstrap version 3.1. After upgrading one of my sites that previously used version 3.0 I noticed that my remote modal dialog boxes had stopped working.

The translucent backdrop would show but the content wouldn’t. There were no JavaScript errors, and no AJAX request being made when I looked in the ‘Network’ tab of the Chrome developer tools.

After a bit of debugging I looked at the release notes and saw this:

One of the more important improved features is for our modals. If you currently use the modal's remote option, be aware this release may break your modals. Yes, this is a breaking change, but it's first and foremost a bug fix that corrects a rather longstanding and overlooked error. Our apologies for any headaches it may cause, but it's been missed in the last few patch releases.
See the #11933 pull request for details on the code changes.

That would definitely explain why they had stopped working. Now all I needed was a clear explanation of what changes to make. And could I find one? Absolutely not. There was no clear indication of what needed to change to get them working again.

As a result, I decided to post my solution for others in a similar situation.

The Solution

To begin with, let’s look at how remote modal boxes would’ve been done pre Bootstrap 3.1.

Pre Bootstrap 3.1

Trigger page:

<a href="/my-ajax-page.html" data-toggle="modal" data-target="#remoteModal" class="btn btn-default">Open Modal</a>

<!-- Modal -->
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true"></div>
<!-- /.modal -->

AJAX File (/my-ajax-page.html)

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">HEADER</div>
        <div class="modal-body">
            
            ... BODY CONTENT ...
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

And now let’s use the same example but modify it for version 3.1.

Bootstrap 3.1

Trigger page:

<a href="/my-ajax-page.html" data-toggle="modal" data-target="#remoteModal" class="btn btn-default">Open Modal</a>

<!-- Modal -->
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>
<!-- /.modal -->

AJAX File (/my-ajax-page.html)

<div class="modal-header">HEADER</div>
<div class="modal-body">
            
    ... BODY CONTENT ...
            
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

As you can see, the divs with class ‘modal-dialog‘ and ‘modal-content‘ have been moved into the page that triggers the modal box.

I am personally pleased about this update as these divs will never change so it makes sense to save passing them in the AJAX requests.

This entry was posted on Friday, January 31st, 2014 at 1:36 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (10)
  1. Lionel Elliott says:

    Thank you so much for posting this – I was looking for a basic example of how to use remote files and this short example beats all of the other examples hands down!

  2. Carmen says:

    I had already separated my modal bits from the calling page but I was having a devil of a time getting my remote modal to work with smoothzoom.js. Your post however reminded me to double-check my classes and sure enough, I had the modal-content class duplicated on the calling page AND the loaded page. Thanks for taking the time to post this!

  3. nice…i’ll try it

  4. Manders says:

    Thanks for posting! Saved me time and it worked great.

    Much appreciated.

  5. Kozcelik says:

    Thanx… You saved my night…

  6. kcviper says:

    Many many thanks for this fix.
    spent hours without success.

  7. Thanks, it works perfect.

  8. JJ says:

    Thank you! I have tried all morning fixing the problem

  9. Thanks a lot. Nice explanation with examples. It’s a great upgrade but it’s not well documented on the release notes. Thanks again!! :)

  10. Awesome, you saved my day ! It’s weird that boostrap guys explicitly say that 3.1 release will break your modals but do not say anything about what to do to make them work again !

    Thanks for writing this article so quickly !