Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.0) : Fix for removing the response Modal content

custom.js

$(document).ready(function() {
	
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').bind('click',function(e) {
	e.preventDefault();
	var url = $(this).attr('href');
	if (url.indexOf('#') == 0) {
		$('#response_modal').modal('open');
	} else {
		$.get(url, function(data) {
                        $('#response_modal').html(data);
                        $('#response_modal').modal();
		}).success(function() { $('input:text:visible:first').focus(); });
	}
});
	
});

index.html

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

<div id="response_modal" class="modal hide fade"></div>

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">Save Changes</a>
	<a class="btn" data-dismiss="modal">Close</a>
</div>

This is a great! Much better than what I had before. Thanks to you and drewjoh for working on this.

I am however getting the following error in my console:
Uncaught Error: Syntax error, unrecognized expression: /path/of/url/

I think this is affecting load times. Any ideas?

Hey mgmilcher,

Thanks for pointing out. I have edited the gist to avoid that error .. this is a dirty fix but should do it. actually the error was because of the usage of attr href for obtaining the href value. so i just replaced it with an additional data-rel attribute which only contains the url same as href . It should fix the error.

take a look at the changed index.htm and custom.js

Yeah that is a bit dirty huh? My app is full of hrefs and I don't fancy going through it all and adding data-rel...

Why is jQuery spitting it's dummy out about the href attribute? Is there any way it could be kept? Seems the most sensible approach..

Even i am not sure about why exactly... as per their bugs shown .. "Most likely any . or / characters in href are breaking the attribute selectors" so may be that's why it is showing the error. adding data-rel was a way i could fix that on my app. but another solution could be to just add the data-rel attr dynamically on click with the url value to the anchor tag and then read the value from that. I am not sure about that though.

Keeping it with href is the sensible approach .. as far as the load times are concerned.. i don't think it should affect that.

btw.. removed the dirty fix :P .. that was way to dirty.. i agree

Not to worry. I think our connection at the office is being slow today. Sorry. I'm sure performance is identical with both approaches. Much prefer the href approach too. Thanks again!

Your Modal works but if you put code below in the doal body that will open new page instead modal window:

<script type="text/javascript"> var ids = 'text'; document.write(ids); </script>

code:

<script type="text/javascript">
 var ids = 'text';
document.write(ids);
</script>

I forked this with a small change, to allow it to target various other divs.
Thanks to both @nextroy and @drejoh for this - just what i was looking for!

Does line #9 make sense? Won't this just open an empty modal rather than the div with the ID specified in the href like standard Bootstrap?

Small problem with this. I've got an addthis code in the modal. It loads for the first opening but not any others after

Editar

var url = $(this).attr('rel');

loading page with many objects is slow using modal from my end

Does it even work? Adding a link for jsfiddle or jsbin would really help