Twitter bootstrap modals & Ajax?

Question

I am using Twitter bootstrap modals To load data from a table.

Here is my HTML code.

<tr>
....
<td> <a href="http://google.com">Text</a> </td>
....
</tr>

and this is the Modal div at the end of the page like so

<div id="modal"></div>

What I'm trying to achieve is by clicking the link inside the cell I want to contents of the modal to be updated & then after it finishes updating to open the modal automatically. Here is what I tried.

$('td').on('click','a',function(){
    var href = $(this).attr('href');

        $('#modal').load(href,function(){
            $(this).modal({
                keyboard:true,
                backdrop:true
              });
        });

It doesn't give me any errors & actually the HTML gets loaded successfully in the Modal div but it doesn't load the modal after updating the HTML it needs another "Click"?! & I don't know why?

Answer 1

This is working for me :

$('div#modal').load(url,function(){
    $(this).modal({
        keyboard:true,
        backdrop:true
    });
}).modal('show'); 

But the URL provided should output a proper modal like this:

<div class="modal" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>