All geek questions in one place

JQuery loads the same page in a div

Everything, I knew that we can use the load method to load dynamic content into a div. But in my case, I found a problem when using it. If you want to load the same page that contains some external js files on the same page. you will find that the same js will be downloaded twice. one the first time to open the page, the second when ajax loads the same page. therefore, I think that in this case there will be a potential problem. for example, if you set a value for a variable in JavaScript that is initialized in a js file, after loading the page, you will find that it will be returned to the initialized value. One solution I can find is to use an IFrame, Is there any good way to do this? thanks.

The code will look 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";
+4
source share
4 answers

I believe that you can only load specific page content by adding another specific div to the load function, for example:

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

Just change the name of the variables used so that the identifiers do not conflict. In any case, I don’t understand why you want to load the page on the same page. If you just want to reload the page asynchronously, this is not the way to do this.

Try location.reload()

0
source

The way to do this is to add a check to see if this file is uploaded. Like this:

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

This approach has a weakness. This puts more namespace and variables in the global. But when you create a namespace, the likelihood of naming conflicts decreases.

0
source

You need to use a more complex function, for example $ .ajax (), if you want to control caching on the basis of the request. Or, if you just want to disable it for everything, put it at the top of your script:

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

I am posting an answer from another question that solves your problem. See Stop jQuery.load response from cache

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

So, you have two options: you decide what you want.

0
source

Source: https://habr.com/ru/post/1489051/

More articles:


All Articles