0

Couple of hours I am trying to load a div content from one page and show it to another. for example:

We have this wikipedia page. I want to get the content of the div with id="mw-content-text" and show it to my page that has element with id="result".

Is there a way to do it only with javascript/jquery?

LaurentG
  • 11,128
  • 9
  • 51
  • 66
NoSense
  • 949
  • 2
  • 11
  • 21

5 Answers5

3

Yes, see "Loading Page Fragments" on http://api.jquery.com/load/.

In short, you add the selector after the URL. For example:

$('#result').load('ajax/test.html #container');
Bhupendra Shukla
  • 3,814
  • 6
  • 39
  • 62
2

First download the JS file https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js and include the js file in your page. Below is the function that I used to load the external page.

   function test () {
     $.ajax({
       url: 'http://external_site.com',
       type: 'GET',
       success: function(res) {
         var content = $(res.responseText).text();
         alert(content);
       }
     });
   }

This worked for me getting content from external site.

Reference

Community
  • 1
  • 1
Prabhakaran Parthipan
  • 4,193
  • 2
  • 18
  • 27
2

dude, this may not possible according to the post

Origin is not allowed by Access-Control-Allow-Origin

Community
  • 1
  • 1
RONE
  • 5,415
  • 9
  • 42
  • 71
1

You can always use CURL in PHP, to grab content from other sites and then you can access the PHP and display it to the user on that page by using the load() JQuery function. Suppose this file is named: "gatherinfo.php" (JQuery can't gather information from remote sites since it's unsafe I believe (http://forum.jquery.com/topic/using-ajax-to-load-remote-url-not-working)) so one of the ways is to do it via PHP.

<?php
$myData = curl("http://en.wikipedia.org/wiki/Robert_Bales");
echo "$myData";

function curl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}
?>

However, make sure you always cite the sources when you gather information like that. Then by using JQuery you can call the file on your server and display it on the div you want by doing the following:

Javascript: (This will get initialized once the page is ready and has loaded)

$(document).ready(function(){
    $("#yourDIVID").load("gatherinfo.php");
});

HTML:

<html>
<head>
<script src="yourjqueryfile.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $("#yourDIVID").load("gatherinfo.php");
        });
</script>
</head>
<body>
<div id="yourDIVID"> The content you're grabbing would load here </div>
</body>
</html>

That's how you would do it, if that's what you're planning to do.

Ignacio Belhot Colistro
  • 339
  • 1
  • 13
  • thanks, but how to get only the content of a certain element? – NoSense Aug 26 '13 at 09:25
  • Ok, I add: $("#getPrice").load("gatherinfo.php #content"); but id doesn't seem to work. Any ideas where I am wrong? – NoSense Aug 26 '13 at 09:31
  • 1
    Show us your HTML for that. Hashtags (#) are used to point to id's and dots (.) are used to point to an element's class. I'll edit my answer for you and will do the javascript function for you as well. – Ignacio Belhot Colistro Aug 26 '13 at 11:12
0

You can try iframe :

<iframe src="http://en.wikipedia.org/wiki/Robert_Bales" frameborder="0"></iframe>
Devang Rathod
  • 6,650
  • 2
  • 23
  • 32