How do I load a div on another web page and not the whole page on my web page?
I have two web pages internal.html and external.html
I have the following piece of code in inner.html that loads external.html into a div with id "result"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#result").load("https://abc/external.html");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>
I have a div with id "test" in external.html.
How to load only div with id "test" of outer .html into inner.html div with id "result" and not the whole page?
source to share
Loading page fragments
The .load () method, unlike $ .get (), allows us to specify the portion of the remote document to be inserted. This is achieved with the special syntax for the url parameter. If one or more space characters are included in a string, the portion of the string following the first space is considered a jQuery selector that determines the content to load.
We could modify the above example to use only part of the resulting document:
$( "#result" ).load( "ajax/test.html #container" );
When this method is executed, it fetches the ajax / test.html content, but then jQuery parses the returned document to find the element with the container ID. This element, along with its content, is inserted into the element with the result ID, and the rest of the retrieved document is discarded.
jQuery uses the browser.innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document, such as, or elements. As a result, the elements retrieved by the .load () method may not be the same as if the document was retrieved directly by the browser.
In your case, you will want to change your code to:
$("#result").load("https://abc/external.html #test")
source to share