Question

<div class="modal hide fade" id="modal_window">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <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>

This is my html code,

i want to load a remote content into it, let say yahoo.com

I tried

$('#modal_window').attr('data-remote', 'http://www.yahoo.com').modal({show:true, remote:true});

It shows the normal modal content instead of yahoo loaded into modal. How do i make it to load yahoo.com into the modal window?

http://jsfiddle.net/UXU2K/1/

Thanks

Answer 1

The two ways to load remote data via Javascript is either from AJAX or by setting the url of an iFrame. An iFrame is for when you want to load an entire website. I’m going to assume you don’t want that. You’re using jQuery, so here’s the documentation for their ajax method http://api.jquery.com/jQuery.ajax/.

Here’s the code to load remote data using jQuery’s ajax method:

    $.ajax({

       url: 'http://www.yahoo.com',
       type: 'GET',
       success: function(data) {

          $('#modal_body').append(html);

       }

    });

By the way, if you are loading HTML (opposed to plain text) and want to inject that into the modal_win element, use the following code in the success method instead of what I have above:

$(html).appendTo('#modal_body');