I need to display another external site's content into my site. Normally <iFrame> tag can do it. But my requirement is not whole content, only part of that site. For example that site's layout has 3 parts, <div id="header">, <div id="sidebar">, <div id="content". I mean I want only display "id=content" part. How do I do it?
I tried $("$my-content").load("http://www.anothersite.com #load-content"), but not working.
This is due to ajax cross domain security restrictions, one trick is to setup a proxy script from the server that the downloads the contents from different site(domain) and use that proxy as your reference in javascript.
Example: (proxy.php)
<?php
$url = 'http://www.anothersite.com';
$htm = file_get_contents($url);
echo $htm;
?>
Then on your script, instead of:
$("$my-content").load("http://www.anothersite.com #load-content");
use the proxy:
$("$my-content").load("proxy.php #load-content");
the most straight forward (and cross browser) way is to write a server side program (in PHP or Perl) that sits on your server and that you call locally that then goes and gets what you want from the remote site.
If the foreign domain is under your control there are ways to do it in straight javascript, but it's much easier in the former way.
Set up your AJAX request to hit a PHP script that loads the content (ie, curl) and returns it as the AJAX's xhr response. An AJAX response (in your case, the partial page) can be loaded and inserted into the current page according to the target element's id, for example.
See this question, it pretty much your issue: https://stackoverflow.com/questions/3928228/php-and-curl-get-ajax-data
A javascript library like jQuery takes a lot of the trouble out of AJAX: http://api.jquery.com/load
And if you're still having trouble, debugging ajax with Firebug makes things much easier as you can see what's happening with the request.
(If you don't have server-side scripting, and can't edit your Apache config, you're kinda outta luck, tho.)
