How to Get the HTML of a Div on Another Page with Jquery Ajax

How to get the html of a div from a different page with AJAX?

Make a ajax call to a php or any other file , use CURL or other tools to grab the page you want and extract the div and echo it and then when you get back the html just put it inside a div in your page

    $.ajax({
    url: 'somefile.html',
    success: function(data) {
                    data=$(data).find('div#id');
        $('#mydiv').html(data);
        alert('Done.');
     }
    });

Get the content of another page's div with jQuery Ajax

You need to change this line:

html = jQuery(result);

To this:

html = jQuery('<div>').html(result);

And actually, even better you should declare this as a local variable:

var html = jQuery('<div>').html(result);

Explanation

When you do jQuery(result), jQuery pulls the children of the <body> element and returns a wrapper around those elements, as opposed to returning a jQuery wrapper for the <html> element, which I tend to agree would be pretty dumb.

In your case, the <body> of sidebar.html contains several elements and some text nodes. Therefore the jQuery object that is returned is a wrapper for those several elements and text nodes.

When you use .find(), it searches the descendants of the elements wrapped by the jQuery object that you call it on. In your case, the <div id="a"> is not one of these because it is actually one of the selected elements of the wrapper, and cannot be a descendant of itself.

By wrapping it in a <div> of your own, then you push those elements "down" a level. When you call .find() in my fixed code above, it looks for descendants of that <div> and therefore finds your <div id="a">.

Comment

If your <div id="a"> was not at the top level, i.e. an immediate child of the <body>, then your code would have worked. To me this is inconsistent and therefore incorrect behaviour. To solve this, jQuery should generate the container <div> for you, when it is working its <body> content extraction magic.

AJAX get div from HTML

Remove space between div and #content find selector

alert($(data).find("div#content").html());

Load content from a div on another page

Hook the click event of the given button to a function, then load the content from the other site if not done yet. Once you've got the content, you can simply query that html for .data-outer and copy the contents from the next one those divs you want to target to the real page.

$(function() {
    var page = null;
    var counter = 0;

    function getNext() {
        // Grab the next element from the array of date-outer divs and copy it to the .content div
        if (counter >= page.length)
            return;
        var elm = $(page[counter]).clone();
        elm.find('script').remove(); // Remove script tags in the div
        elm.appendTo('#load-here');
        counter++;
    }

    $('.btn').click(function(e) {
        if (page === null) {
            page = false; // Prevents the request from being made twice
            $.get('http://....com/../', function(data) {
                page = $(data).find('.date-outer');
                getNext();
            });
        } else if (page !== false) {
            getNext();
        }
    });
});

Example fiddle: http://jsfiddle.net/hpu5f4ur/ (note: requires http and Access-Control-Allow-Origin: * due to the example site not allowing https and Jsfiddle not setting this header by default).

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

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
});