Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.1)

custom.js

$(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

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

modal_window.htm

<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>

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)

Thanks!

Thanks for a very straighforward script

Thanks, very useful.

Thanks @drewjoh great job; please can someone help me on how to pass variable to a remote php file using Ajax $.get, thanks

Good solution, but the problem here is that the function get's triggered twice, I changed it to
data-toggle="ajax-modal"

To remove dynamic modal loaded in DOM. the following works for me.
$('<div id="clue-modal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content">' + data + '</div></div></div>').modal().on("hidden.bs.modal", function () { $(this).remove(); });

Can check https://gist.github.com/navdeepsingh/de4718a074b812637330f668d2a73b7e

Thanks!!

Gracias,