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

Question

How can I get the html of a certain html element which is located on a different site?

Solution:

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

Answer 1

You can use $.load with an appended container

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.

$('#result').load('ajax/test.html #container');

Answer 2

Here you go:

$('#div_id_in_your_page').load('ajax_page.html #required_div');

For class:

$('.div_class_in_your_page').load('ajax_page.html #required_div');

Answer 3

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

Answer 4

One way is:

• send an ajax call to a server side script

• this script fetches the remote page and returns HTML as a response. (generally JSON is preferred)

• your page finally gets access to the html.

Answer 5

you can also use like this.

$.ajax({
   url:"page2.html",
   success:function(response){
      $("#currentDIV").html(response);
   },error:function(){
      alert("error");
   }
});