JQUERY LOAD unable to load same html again

Question

I have created an html page which renders differently depending on the parameter 'resourceType'. ResourceType can be IO/CPU/STORAGE etc . I have adopted this design for reusability as we have same layout for all the charts except that the inputs to chart differs based on resourceType.

 <script>
    require(['../js/viewmodel/db-resource-analyze']);
</script>  

        <div class="oj-row" id="pageContent">


            <div class="topchartRegionDiv">

.....

            </div>
       </div>

Now I am loading this page from my HOME page which have vertical tabs (like a left side menu) On click of a tab ,I load my page dynamically using jquery load

window.paramObj =
                 {
                    resType: "cpu"
                 };


$('#cpuContent').load("db-analytics-resources-home.html", function(responseTxt, statusTxt, xhr) {
                                    if (statusTxt == "success")
                                        alert("External content loaded successfully!");
                                    if (statusTxt == "error")
                                        alert("Error: " + xhr.status + ": " + xhr.statusText);
                                });

The next time user click on IO tab ...i do same operation but with different parameter

window.paramObj =
                 {
                    resType: "io"
                 };
$('#ioContent').load("db-analytics-resources-home.html", function(responseTxt, statusTxt, xhr) {
                                    if (statusTxt == "success")
                                        alert("External content loaded successfully!");
                                    if (statusTxt == "error")
                                        alert("Error: " + xhr.status + ": " + xhr.statusText);
                                });

The first load happens without any issues , but subsequent load do not happen and page comes as blank. I am suspecting the page is cached and not loaded. How to enforce reload skipping cache using JQUERY load. Any pointers ?

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

Try this Stop jQuery .load response from being cached

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

As the guy mentions if the convenience functions like .load, .loadJSON, etc don't do what you need, use the .ajax function and you can find a lot of configuration options in there that will likely do what you need

edited May 23 '17 at 10:33

Community

1
1

answered Dec 24 '14 at 10:24

Carlton

5,533
4
54
73

Try what @Oleg suggests, this should also prevent the AJAX call from being cached. Also are you building the jquery selector properly when you do $('#ioContent'), be sure you are not doing $('ioContent'), notice the missing # – Carlton Dec 24 '14 at 13:15

score 0 · Answer 2 · answered Dec 24 '14 at 12:13

0

you can try this methode. this will prevent all caching

$('#ioContent').load("db-analytics-resources-home.html?"+Math.random(), function(){})

answered Dec 24 '14 at 12:13

Oleg Alekseenko

130
8

Thanks for response . I tried this too ...but no help .I could get this resolved by passing JS script as parameter to JQUERY load callback and invoking it there on load success. – Priyesh Jaiswal Dec 24 '14 at 17:23

score 0 · Answer 3 · answered Dec 24 '14 at 17:25

Many Thanks for all response . I could get this resolved by passing JS script as parameter to JQUERY load callback and invoking it there on successfully load of html doc .

smthing like this :

                        $('#' + resType + 'Content').load(url, function(responseTxt, statusTxt, xhr) {
                                if (statusTxt == "success")
                                {

                                    alert("External content loaded successfully!...calling JS");
                                    new self.dbResourceAnalyze();
                                }
                                if (statusTxt == "error")
                                    alert("Error: " + xhr.status + ": " + xhr.statusText);


                            });

JQUERY LOAD unable to load same html again

3 Answers3