CODEWITHSUNDEEP
jquery
Joe.wang
Joe.wang

Reputation: 11791

JQuery load the same page into a div

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";

Upvotes: 4

Views: 6638

Answers (4)

deej
deej

Reputation: 2564

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.

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48982

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.

Upvotes: 0

user1091366
user1091366

Reputation:

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()

Upvotes: 1

umbriel
umbriel

Reputation: 751

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");

Upvotes: 1

Related Questions