0

jquery load() can be used to load components from another page.

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

But if the #container contain some elements which load dynamically, the load() function does not render those dynamic components inside #result element.

Ex: A customer review page load user comments dynamically. Therefore, the comments cannot be shown inside #result element.

Is it possible to use load() function to achieve this or is there any other approach to achieve this.

Improve this question
8
  • Just give a comment before down vote pls Commented Apr 16, 2018 at 11:07
  • 2
    1. Get the page content. 2. Get the target-div element by Id from that content. 3. insert that into the desired place. Commented Apr 16, 2018 at 11:16
  • 1
    @Choxmi I think it's impossible due to you can not know when the dynamic load finished,unless you have related event method to call Commented Apr 16, 2018 at 11:21
  • 1
    Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. Source taken from .load() documentation - api.jquery.com/load Commented Apr 16, 2018 at 11:45
  • 1
    Do you get any error messages? Commented Apr 16, 2018 at 11:53

3 Answers 3

Reset to default
2

One issue you're hitting is down to this part of your question:

the source page has some elements which loads dynamically

Once you've worked around CORS and its ilk, all you are doing is still asking the remote server for a static file and rendering that.

However, on the source site you will almost certainly find additional scripts that populate those elements; those scripts run on the source server, but will not be executed by your current code. You would need to replicate the execution of these scripts on your own site, including pulling additional data across.

An easier solution would be to ask the owner of the source site if they have an externally-available API, which will allow you to pull this data across and render it automatically.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

API is the best solution for cross origin, because if they change the element id or structure, it can make undesired result.
Thanks for the suggestion @Adrian.Since I'm using a plugin for the source page and I don't have any contact to the plugin owner. :(
@Choxmi if you can not create the API or ask for API, the only solution for you is the thing that I offered. You should get it on your server not on the client side.
@ICE thanks. Yes that seems to be the only option I have. :(
@Choxmi If you can work out the calls the source site makes, and if it doesn't breach their terms & conditions (check first), you could consider writing your own API (avoiding CORS problems completely) and calling that from your site.
|
1

On PHP, for cross origin you can get element like this:

//url
$url = 'https://url.com'; 

//get content from the URL
$cotnent = file_get_contents($url);

//disable errors
libxml_use_internal_errors(true);

//Load HTML
$dochtml = new DOMDocument();
$dochtml->loadHTML($cotnent);

//Get the ID that you want
$elm = $dochtml->getElementById('elementid');

if ($elm){
    //elm content
    echo $elm->nodeValue;
}
Improve this answer

Comments

0

Why not using iframe otherwise you need to have the administration to those websites because you will need to edit .htaccess and make allow-access

Improve this answer

1 Comment

iframe will give you the same cross origin problem, if you want to fetch the element from it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.