Jquery reloads mysql insert only after first hard refresh

Question

I'm making a shop and message system within my mobile website and all works fine after i refresh it by refreshing the browser.

My problem is when i refresh the message page and go to my shop page it loads in the php mysql script but if i than change a filter for the shop and reload the content with jquery it doesn't show up. If i refresh the whole page and try to change filters for the shop after that it all works like a charm.

It's only on first visiting the page that it doesnt work after jquery refresh of the page.

I've tried multiple reload div scripts with jquery but al gave the same problem. I've also tried echoing test within my scripts part. It echos only when the rest is also working (So all of the php within the reloaded divs just disappear)

Reloadscript that i use:

$("#ShopScriptsReload").load(" #ShopScriptsReload > *");

Php mysql:

$sql = "SELECT * FROM shop ORDER BY id DESC";
$result = $conn->query($sql);

And i work with cookies to change the filter. So a cookies is set with javascript and it translate to (little edit: the cookie is set with variables that are hardcoded in):

if (empty($_COOKIE["setFilterCookie"])){$_COOKIE["setFilterCookie"]="1";}
    $fltr = $_COOKIE["setFilterCookie"];
    if ((empty($fltr) or ($fltr == 1)))
    {$WhereFltr = "";}
    elseif ($fltr == 2)
    {$WhereFltr = "WHERE tag='digitaal'";}
    elseif ($fltr == 3)
    {$WhereFltr = "WHERE tag='pins'";}
    elseif ($fltr == 4)
    {$WhereFltr = "WHERE tag='fysiek'";}
$sql = "SELECT * FROM shop WHERE filter='$fltr' ORDER BY id DESC";
$result = $conn->query($sql);

I've already tried the following methods: Removing previous pages from dom, Delete cache, tried to remove the reload part and work with GET method (this works perfectly but it is not what i want).

Well that everything works without the need for a whole refresh.

Thank you in advance guys and girls :)

_“And i work with cookkies to change the filter. So a session is set with javascript”_ - a cookie is not a session. Is that cookie already set when you load that page for the first time? If not, how did you expect this to work then? _Check_ on the PHP side, if your script actually received that cookie value - and if not, don’t add the WHERE clause to the query … — misorude, Aug 13 '19 at 10:29
And btw., this should of course never be used in production anywhere, not as it currently is, because it is for example open to SQL injection. — misorude, Aug 13 '19 at 10:29
Hey, Thanks for your fast reply, i'm sorry i meant cookies in both cases. If the WHERe case is gone it still does the same thing, i don't think that the cookies are the problem. And how do you mean open to SQL injection? I'm fairly new to this. Because you don't filter by inputting some keywords. I'm filtering on buttons with a set variable that is past to the cookie. Is this still open to SQL injection i thought this was only with inputs from users? The cookies are set on opening of the page.I — Michael W., Aug 13 '19 at 14:50
When you set the cookie on the client side, it will only be available to PHP on the next request. _“I'm filtering on buttons with a set variable that is past to the cookie. Is this still open to SQL injection”_ - of course it is. I can send _any_ random data I want to your script, I don’t even have to use anything one would call a “browser”. — misorude, Aug 14 '19 at 06:26
But how do i prevent this from happening (The SQL injection)? And yes i know. But by refreshing the div i also refresh the PHP part within that div, i mean it works after a full refresh only not when i go to that page for the first time? By the way thank you for your fast replys! — Michael W., Aug 14 '19 at 11:20
The `load` method equals a GET request, so it might be a caching issue. https://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached — misorude, Aug 14 '19 at 11:26
Regarding SQL injection - please inform yourself, that topic has been discussed plenty already. Ideally you should be using prepared statements in this day and age. — misorude, Aug 14 '19 at 11:26
I'm going to look into SQL injection thank you for the warning!, I've searched and tried a lot of caching options especially the one from jquery mobile self. But it is like nothing works and it keeps coming back to the same white page error (or at least white part within the div). I'm even tried adding random number after the reloaded div but offcourse does this only work for reloading pages not divs with IDs. — Michael W., Aug 14 '19 at 11:53
Your code looks weird in that regard to begin with, `.load(" #ShopScriptsReload > *")` - the argument should start with the URL you are actually sending the request to, I can only imagine that it defaults to the current URL somehow this way. If you actually specified the URL here, you could add a cache-busting parameter there (or maybe _just_ the query string with the parameter, so that it still defaults to the current URL, minus any query string that might have had.) — misorude, Aug 14 '19 at 12:35
From what i understands it gets only the div with that id from the page en reloads it with that content. I shall put my script in a new page and try it than with a string attached to it! Let's see if that works — Michael W., Aug 14 '19 at 12:45
... It didn't work. It still does the same i've tried: $("#reloadScripts").load("php/SCRIPTSberichten.php?t="+new Date().getTime()); — Michael W., Aug 14 '19 at 12:55
It might not be caching, but something else. You have shown only isolated snippets of code, so this is largely guesswork. Not sure where you set this cookie for example, so maybe something is off with that - regarding either logic, or “timing”. Please verify using your browser network tools, that this request actually sends the cookie value as you expect it to. — misorude, Aug 14 '19 at 12:57
Well, i echoed the cookie on a other page while updating the one on the right page and the cookie changed and does have a value. So the cookie is set. I also tried to echo "test"; within the parameters of php which gets refreshed but it disapears when i change the filter. So what i conclude is that the code is gone after a refresh for that perticular div. — Michael W., Aug 19 '19 at 14:17
_“So what i conclude is that the code is gone after a refresh for that perticular div”_ - what code? _“Well, i echoed the cookie on a other page while updating the one on the right page and the cookie changed and does have a value. So the cookie is set.”_ - at that point, maybe. That says rather little as to whether it was available already at the point where you tried to use its value originally. — misorude, Aug 19 '19 at 14:20
Oke, weird but i changed the reload div script to something that i used way past, and it works. This is the code that works: $("#div").load(location.href+" #div>*",""); Thank you for your help and time! — Michael W., Aug 19 '19 at 14:36

score 0 · Accepted Answer · answered Aug 27 '19 at 13:22

The problem here is, when you are refreshing the browser only then there is a server call, but refreshing the JQuery is on the client side! you can use ajax for that purpose i will demonstrate:

in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="./app.js"></script>
</head>
<body>
<select name="shop-criteria" class="shop-criteria">
    <option value="">all</option>
    <option value="2">digital</option>
    <option value="3">pins</option>
    <option value="4">fysiek</option>
</select>
</body>
</html>

in JavaScript the file app.js

$(document).ready(function(){

    $(document).on('change', '.shop-criteria', function (e) {

        let fd = new FormData();
        let tag = $(this).val();
        fd.append('tag', tag);

        $.ajax({

            url: "shop.php",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,

            complete: function (results) {

                let response = JSON.parse(results.responseText);
                my_function.call(this, response);
            }




        });
    });


    function my_function(response) {
        console.log("response", response);
    }

});

in PHP shop.php

 `<?php
  $tag = $_REQUEST['tag'];

  switch($tag) {

     case 2:
        $WhereFltr = "WHERE tag='digital'";
     break;

    case 3:
       $WhereFltr = "WHERE tag='pins'";
    break;

    case 4:
       $WhereFltr = "WHERE tag='fysiek'";
    break;

    default:
       $WhereFltr = "";
    break;
   }

   $sql = "SELECT * FROM shop WHERE filter='$fltr' ORDER BY id DESC";
   $result = $conn->query($sql);`

I've changed the script to your example and it works perfectly. Thanks for your advanced explanation! — Michael W., Aug 30 '19 at 17:50

Jquery reloads mysql insert only after first hard refresh

1 Answers1

in HTML

in JavaScript the file app.js

in PHP shop.php