public
Last active

Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.1)

  • Download Gist
custom.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
index.htm
HTML
1
<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>
modal_window.htm
HTML
1 2 3 4 5 6 7 8 9 10 11
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
<p>One body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>

Just a quick hack to get something working.

Works fine! = ))
Thanks for the code ...

Thanks! Works well!

You have a typo in the link HTML (index.htm)...it should be "href" :-)

Oops, thanks! Fixed. :)

Hi, thanks! Can you add a function to destroy the modal on data-dismiss="modal"?

it works fine, but after i close the model, the model goes "display none" but not totally disappear from the page.
is this expected?
this is what i see in the page inspector after couple open/close modals:

... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">

Sure, good catch. Added code that should delete the modal window when the close button is clicked. Not sure about if they click outside the modal window... an exercise for the developer? :)

this didn't seem to fix the issue, at least for me. they still pile up with "display: none"

after every open modal i see, these 2 divs, first one(modal-backdrop fade in) is blank,
second div(modal hide fade in) has my modal.
after the close, the first one(modal-backdrop fade in) disappears but the second div remains.
it remains with "display: none" though.

div class="modal-backdrop fade in">
div class="modal hide fade in" style="display: block;">

Note: Removed the delete code as it doesn't appear to be a full solution.

Hey Drewjoh,

I created a tiny fork which solves multiple insertion of modal content in the page.

You mind sharing the code, nextroy? :)

@norus .. check my fork .. its there :)

Thanks, didn't see it the first time :)

I'm using Bootstrap and this doesn't focus on the input inside the modal contents dynamically loaded but the input box I have in my navbar..

Can anyone suggest a fix?

data-target="#" : Not to have : Syntax error, unrecognized expression

<a href="/url/to/load/modal_window.htm" data-target="#" data-toggle="modal">link</a>

Add "remove" from modal, for do not clone :

$("[data-toggle=modal]").click(function(event) {
            event.preventDefault();
            var url = $(this).attr("href");
            if (url.indexOf("#") == 0) {
                $(url).modal('open');
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function () { $(this).remove(); });
                }).success(function() { $('input:text:visible:first').focus(); });
            }
        });

Sorry for my poor English ;)

Very useful!

But in my projeto I had a problem....
All my pages are encoded on iso-8859-1 because of many special chars like "ç", 'á', "õ" ... and when I loaded the remote page into my modal, it was all irregular, chars missing/mistake.

Does someone here had this problem? How was it solved by you?

Thanks
Massa

People, I solved my problem setting the header parameters from my remote page, it was too simples.. sorry for the inconvenience.

Thanks @octen. I changed input fields to input:visible:enabled:first and added focus trigger on "shown".

$("[data-toggle=modal]").click(function(event){
event.preventDefault();
var url = $(this).attr("href");
if (url.indexOf("#") == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('

' + data + "
").modal().on("shown", function () {
$('input:visible:enabled:first').focus();
}).on("hidden", function () {
$(this).remove();
});
});
}
});

The following is a good hack on how to fix this.remove() (worked for me anyways)

  event.preventDefault();
  var url = $(this).attr("href");
  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function(){
           $('.modal-backdrop.in').each(function(i) {
              $(this).remove();
          });
        });
      }).success(function() { $('input:text:visible:first').focus(); });
  }

jquery returns an error.

I think that this function needs a return false at end (I'm using bootstrap 2.1.1):

$("[data-toggle=modal]").on('click', function(event){
  event.preventDefault();

  var url = $(this).attr("href");

  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('
' + data + '
').modal().on('hidden', function(){ $('.modal-backdrop.in').each(function(i) { $(this).remove(); }); }); }).success(function() { $('input:text:visible:first').focus(); }); } return false; });

If you will need close modal from script, it will be problem
I will be add parse "date-target" attribute and add Id to modal.
And I have error in Crome when I open several modal without refresh page I submit not last form. I chanded remove modal to remove by "Id" and for my tasks it work right

$(document).ready(function() {
    $('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var data_target=$(this).attr('data-target');
        if (data_target=="#") {
            data_target="#modal"+parseInt(Math.random()*1000);

        }
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function(data) {
                        $('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
                                .modal()
                                .on('hidden', function(){
                                        $(data_target).remove();
                                 });
                    }).success(function() {
                        $('input:text:visible:first').focus();
                    });
        }
    });
    return false;
});

Hi

Thank you very much for the trick, i didn't know how to do to change the modal with ajax.
I tried it and it works, but there are some mistakes (there is one div more each click), so i change a line and now it works without problem.

I replace this line (in custom.js) :

$('<div class="modal hide fade">' + data + '</div>').modal();

by :

$('.modal-body').html(data);

I hope it can be helpful and my English is not to bad^^

JB

Thank you. This was very helpfull.

I also replace:

<div class="modal hide fade">' + data + '</div>

with

$('.modal-body').html(data);

Another thing: at the first time you click, the ajax is called twice. But, if you click again, the ajax is called just once. I think that the "event.preventDefault();" is not getting executed at the first click...any thoughts?

Hi !

event.preventDefault() is used to stay in the same page. Without it you'll go to the link.

I had the same problem too (i saw it after posting). So what i did is :

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        if($('#editer-image').attr('aria-hidden'))
        {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0)
            {
                $(url).modal('open');
            } else {
                $.get(url, function(data){
                        $('.modal-body').html(data);
                }).success(function(){
                        $('input:text:visible:first').focus();
                    });
            }
        }
    });

#editer-image is my div, which is in my modal. After the first click, it gets the attribute aria-hidden (true when the modal is on and false when i close the modal).

With this trick, i call just one time the ajax request.

The ajax loads perfectly, however within the popup I have a couple of links/forum posts. How can I keep the modal open without reloading the main page and just post content within the modal?

Thanks for the snippet, I'm trying to work out how to set the button label to "loading" while modal (which takes time to generate) is loading. Any help much appreciated!

Hi! thanks for the gist, very useful and everything looks works fine. but when I open the console log this error appear everytime I click the trigger button :

Uncaught Error: Syntax error, unrecognized expression: http://project.local/bpmpt/data/administrasi/properti/form

i've try to change it into:

$('a[data-toggle="modal"]').click( function (e) {
    e.preventDefault();
    var btn = $(this),
        url = btn.attr('href')

    if (url.indexOf('#') == 0) {
        $(url).modal('open')
    } else {
        btn.button('loading')

        $.get(url, function (data) {
            $('.modal').modal().on('shown', function () {
                $(this).html(data)

                btn.button('reset')
            }).on('hidden', function () {
                $(this).html('')
            })
        })
    }
})

but nothing help, any other idea?

Feryardiant,

I was having the same issue. It's because of data-toggle="modal" change it to something else like data-foo="modal"
on the jQuery filter as well as the Anchor.

a href="asdf/asdf/asdf" data-foo="modal">
.... ....
$('a[data-foo="modal"]').click( function (e) {

thanks @axar you're right. as you said, i do try to change data-toggle="modal" but not in another data attribute, i put it in class="toggle-modal" and the JS like so.

$('a.toggle-modal').click( function (e) {
...

and now it's works well ^_^

Maybe some of you are looking to force the modal to load fresh content on each pop, I found this instead:

  $('.modal').on('hidden', function() {
    $(this).data('modal', null);
  });

It's great
tanks

Esto due genial, gracias por compartir

Any way to add Previous/Next navigation with href attr?

Just wanted to say thanks for this.

When trying to fix the two background divs problem mentioned by @vcivelek, I discovered this code is superfluous.

Check out the remote option in the docs.

How work modal with mysql ( href="#myModal<?php echo $row->id;?"> class="thumbnail" data-toggle="modal" )
I am a new bee in php and I know I'm a little messed up, please help?

I made some modifications to work with bootstrap 3 and ladda loading buttons support
see my fork at: https://gist.github.com/jonhkr/6269312

Hi drewjoh, nice code.
You saved me 20mins.

can we able to open the modal which contains external link or .aspx or .php file?

I am using following code for displaying remote page into modal.....
i am using hyperlink on image & one label value
these 2 are the columns of table & they are sortable columns,
if i sort then click hyperlink after that modal is not opening here is my javascript code,
however it works fine for ie 8 but
in fireforx & ie > 8
it requires to refresh the page

$(document).ready(
function(){
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {

                $(url).modal('open');
            } else {

// alert("else url["+url+"]");
$.get(url, function(data) {
$('

' + data + '
').modal().on('hidden', function () { $(this).remove(); });;
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});

Please help me out the above mentined issue? is it true that due to sorting Document i modified & that $(document).ready() function is unable to listen those changes..what is the solution for this, please get out me this issue..

Thanks!!!!!!!!!!!!!

Thanks @drewjoh! This saves me from having a totally absurd amount of static HTML for various modals.

I got rid of the success in event in favor of the autofocus attribiute. (http://www.w3.org/wiki/HTML5_form_additions#autofocus)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.