jQuery ajax load content of a div on another page does not work

Question

Isn't the jQuery's ajax support the loading of a content from another page? I am fine by using the .load , but just curious why?

For example:

var ajaxModal = $('<div />', {
        'class': 'ajax-modal'
    }),
    $data = $(link).data(),
    options = {
      url: $(link).prop('href') + ' ' + $data.target
    };

ajaxModal.load(options.url, function() {
    ajaxModal.appendTo('body').show(); // works
});

$.ajax(options).done(function (data) {
    ajaxModal.html(data).appendTo('body').show(); // doesn't work
});

Answer 1

From the Docs :

The .load() method, unlike $.get() , allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

If you really want to use ajax in your case you can use something like:

$.ajax(options).done(function (data) {
    var DivYouWant = $("#DivYouWant", data);
    ajaxModal.html(DivYouWant).appendTo('body').show(); // does work
});