JQuery not working after cache cleared

Question

JQuery doesn't work after I ctrl click f5 (which refreshes and clears cache in chrome). But the odd thing is that this problem goes away when I add an alert statement at the top of my code.
My jquery is a local file. What's going on here?

Also, all of my code is in

    <script type="text/javascript" src="javascript/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>

<script type="text/javascript">

    var json_screenSizes;

    <!-- The function loadJSON is located in main.js (loaded above) -->
    loadJSON("json/screenSizes.json", function (response) {
        // Parse JSON string into object
        json_screenSizes = JSON.parse(response);
    });

    alert('read'); <!-- This causes code below to work on cache refresh */

    /* DOCUMENT READY */
    $(function () {

        var xhr;

        <!-- This on keyup code never calls on cache clearing but does on normal refresh -->
        $(".search_dreams form input[type=search]").on("keyup", function () {
            if (xhr && xhr.readyState != 4) {
                xhr.abort();
            }
            if ($(".search_dreams form input").val().length < 3) { /* If search input is empty */
                $(".search_dreams .results ul").html("");
                $(".search_dreams .results").hide();
                $(".search_dreams input.search").removeClass("orange");
                return;
            }
            xhr = $.ajax({
                type: 'GET',
                url: 'searchDreams.php',
                data: {numResults: 10, keyword: $(".search_dreams form input").val()},
                success: function (data) {
                    data = JSON.parse(data);
                    var output = "";
                    alert("succes");

                    /* ADD DREAM */
                    for (var i in data) {
                        output += "<li class='addDream'>";
                        /* Dream Name */
                        output += "<div class='dream_name'><a href='google.com'>" + data[i].dreamName + "</a></div>";
                        output += "<div class='button_container'><input class='addDream small orange' type='submit' value='Add Dream'></div>";
                        /* Add dream button */
                        output += "</li>";
                    }

                    $(".search_dreams input.search").addClass("orange");

                    $(".search_dreams .results").show();
                    $(".search_dreams .results ul").html(output);

                }

            });
        });


    });
</script>

Except for the alert statement I mentioned adding.

@RaniMorelesRubillos It doesn't clear the cache, but I think it bypasses the cache for that load. — Barmar, Nov 03 '16 at 01:47
@Barmar It does clear the cache. Have a look here : http://stackoverflow.com/questions/385367/what-requests-do-browsers-f5-and-ctrl-f5-refreshes-generate — J Doe, Nov 03 '16 at 12:01
@Satpal My bad, that was a type-o on stack overflow, the code does not show that on my website. I updated question. — J Doe, Nov 03 '16 at 12:32
@OzgurBar It only shows an error reading from my json file. Which is odd because I can alert the values and they are loaded. — J Doe, Nov 03 '16 at 12:51
sounds like a race condition. I'd get rid of that `loadJSON` function or any js code before the problematic part and see if works. — rasso, Nov 03 '16 at 13:16
@OzgurBar I believe I am trying to use the JSON variables before the file is loaded. How can I ensure the file is loaded first? — J Doe, Nov 03 '16 at 13:22
well it's really hard to tell why.you need to give some details regarding the function code. looks like something fails or delays the first time the content is delivered and then cached by browser & works the second time you refresh (f5) the page. repeats when you do another ctrl+f5. edit: don't know the details but this can help? https://api.jquery.com/category/deferred-object/ — rasso, Nov 03 '16 at 13:25
@JDoe It doesn't clear the entire cache, just the cache for the page you're refreshing. Think about how long it takes when you use "Clear browsing data" to clear the cache, but `F5` takes hardly any time. — Barmar, Nov 03 '16 at 16:53

Darkseal · Answer 1 · 2016-11-03T01:37:34.123

1

This usually happens when you need to do something with resources not yet loaded (such as images). Pressing F5 will issue a reload for all resources in the page, while normal navigation does not.

Try to replace your $(function(){ }); call with one of the following:

$(window).load(function() {});

or

$(document).on("pageinit", function () {});

edited Nov 03 '16 at 01:37

answered Nov 03 '16 at 01:34

Darkseal

9,205
8
78
111

this doesn´t help if the code is executed before jquery loads. – Bryan Azofeifa Nov 03 '16 at 01:36
Well he said all his code is within the ready() block, so he should be ok unless he's loading jQuery in async mode or later in the file. Let's see what he says about that... – Darkseal Nov 03 '16 at 01:44
Replacing $(function(){}); with either of those causes the code to not work at all, even when not cache reloading. I will post code above – J Doe Nov 03 '16 at 12:00

score 1 · Answer 2 · answered Nov 03 '16 at 13:27

1

When the page was cache refreshed, the json file had to load again. I was trying to use the JSON variables before it was loaded.

answered Nov 03 '16 at 13:27

J Doe

385
4
16

score 0 · Answer 3 · answered Nov 03 '16 at 01:35

0

That could be because your code is executed before jQuery loads. I guess the alert would give the browser enough time to retrieve jQuery. You can look on the network tab, and see if jquery it´s loaded before your code is executed, if not that´s what you should aim to do

answered Nov 03 '16 at 01:35

Bryan Azofeifa

144
4

I'm not quite sure, I though $(function) would solve that problem. Have a look at the updated code. – J Doe Nov 03 '16 at 12:07
@OzgurBar Any ideas on the culprit? – J Doe Nov 03 '16 at 13:02
@JDoe actually i was wondering if the call is really not being made. did you try something like this -> `$(".search_dreams form input[type=search]").on("keyup", function () { alert("entered"); //rest of the code }` – rasso Nov 03 '16 at 13:04
@OzgurBar Yes It's not being made, I tested it. As I said earlier though, it is called normally, but when the page cache is cleared, it isn't. But if I have the alert statement, then it does get called on the page cache reload. – J Doe Nov 03 '16 at 13:05
None of my jquery code appears to work. Including $(window).on('resize', function(){}); – J Doe Nov 03 '16 at 13:06
but you are not getting a `$ is not defined` error in the console. which means the lib is loaded, right? – rasso Nov 03 '16 at 13:08
Can you upload a .har file? from the network tab on the developer tools. If you don't know how to get that file, look this link https://confluence.atlassian.com/kb/generating-har-files-and-analysing-web-requests-720420612.html#GeneratingHARfilesandAnalysingWebRequests-Chrome – Bryan Azofeifa Nov 03 '16 at 14:27

JQuery not working after cache cleared

3 Answers3