Bootstrap Ajax model popup not working

November 22, 2012 | , , | Blog |

For some reasons the bootstrap model box was not loading ajax content. I was trying this is wordpress and having a hard time fixing the issue. With some research i found the solution.

<!DOCTYPE html>
<html lang=”en”>
<link href=”bootstrap/css/bootstrap.css” rel=”stylesheet”>
<link href=”bootstrap/css/bootstrap-responsive.css” rel=”stylesheet”>
<script src=”bootstrap/js/jquery.js”></script>
<script src=”bootstrap/js/bootstrap.js”></script>

<a href=”<?php echo get_bloginfo(‘url’) ?>/wp-admin/admin-ajax.php?action=test_action” data-target=”#myModal” role=”button” data-toggle=”modal”>
Launch demo modal</a>

<div id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
<div>
<button type=”button” data-dismiss=”modal” aria-hidden=”true”>×</button>
<h3 id=”myModalLabel”>Modal header</h3>
</div>
<div>
<!– content will be loaded here –>
</div>
<div>
<button data-dismiss=”modal” aria-hidden=”true”>Close</button>
<button id=”save_btn”>Save changes</button>
</div>
</div>
</html>

 

The code was working perfectly fine but the data didn’t refresh for some reasons. So added a bootstrap jquery snippet.

$(‘#modalqq’).on(‘hidden’, function() {
$(this).data(‘modal’).$element.removeData();
});