JQuery load the same page into a div

Question

All, I knew we can use the load method to load dynamic content into a div. But In my case , I found an issue when used it . If you want to load the same page which contains some external js files in the exactly same page. you will find the same js will be loaded for twice times. one for the first time to open the page , second for when ajax load the same page. so I think there will exist some potential problem for this case . for example if you set a value for a variable in JavaScript which is initialized in js file, after load the page, you will find it would be reverted to the initialized value.. One of the solution I can find is using IFrame ,Is there any good way to make it ? thanks.

the code would looks like below.

in test.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="test.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#loadBtn").on("click", function(event)
            {
                $('#container').load('test.html');
            });

            $("#getTest").on("click", function(event)
            {
                alert(test);
            });

            $("#changeTest").on("click", function(event)
            {
                test="changed";
            });
        });
    </script>
</head>
<body>
        <div id="container" style="width:200px;height:200px; padding:10px; border:1px solid black;"></div>
        <input type="button" id="loadBtn" value ="Load"/>
        <input type="button" id="getTest" value="gettest"/>
        <input type="button" id="changeTest" value="changetest"/>
</body>
</html>

in test.js

var test="1";

score 1 · Answer 1 · answered Jul 01 '13 at 09:16

1

I believe you can load only certain contents of a page by adding another specific div in the load function like so:

$("#area").load("something.html #content");

answered Jul 01 '13 at 09:16

umbriel

723
1
7
22

1

This [.load()](http://api.jquery.com/load/) method works good but only for different pages. @Joe.wang why do you want to load the same page into a div recurrently? I see no reason for it. – Stano Jul 01 '13 at 11:15
One alternative: `$('#container').html($(document.body).clone(true).html());` – Stano Jul 01 '13 at 11:27
2

@Stano It also doesn't work for me here . I meaned the `$("#area").load("something.html #content");` – Joe.wang Jul 01 '13 at 13:54
@Stano Right, It looks strange load the same page into a div recursively. – Joe.wang Jul 01 '13 at 14:10
[Info about script execution in .load()](http://api.jquery.com/load/#script-execution). Example script: http://pastebin.com/UBAZmDPh . The [.load()](http://api.jquery.com/load/#loading-page-fragments) method inserts also the filtered wrapper div to the target div. It doesn't allow you to handle the received data(string). Use available [$.ajax](http://api.jquery.com/jQuery.ajax/)'s success/error/always methods to update the page by your needs manually. Good bye. – Stano Jul 01 '13 at 15:10

score 1 · Answer 2 · answered Jul 01 '13 at 09:21

Just change the name of the variables used, so the identifiers won't conflict. Anyway, I don't really understand why would you want to load the page within that same page. If you just want to reload the page asyncronously, that's not the way to do it.

Try location.reload()

score 0 · Answer 3 · answered Jul 01 '13 at 09:22

A way to do it is to add a check to see whether this file has been loaded. Like this:

if (!window.testjs){
   window.testjs = {};
}

if (!window.testjs.loaded) { 
    var test="1"; 
    window.testjs.loaded = true; 
}

This approach has a weakness though. It puts more namespace and variable into the global. But as you create a namespace, the possibility of naming collisions is reduced.

score 0 · Answer 4 · edited May 23 '17 at 12:05

ou have to use a more complex function like $.ajax() if you want to control caching on a per-request basis. Or, if you just want to turn it off for everything, put this at the top of your script:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

I am posting reply from another question which solves your problem. Refer: Stop jQuery .load response from being cached

In short either you should use $.ajax({...}) or if you want to continue using $("...").load(), you need to pass a timestamp with your URL like: http://example.com?ts=12233232323 If you achieve something like above URL your response will not be cached as Javascript will treat your URL as new URL when any part of your URL is changed.

So have two choices, you decide what you want to go with.

JQuery load the same page into a div

4 Answers4