ajax onclick command pulling outdated data

Question

I'm writing a webpage that uses [what I believe to be] AJAX such that one can enter data into a text field, click an "OK" box, save the data to a database, and re-load the area containing the textfield and "OK" button along with some other data based on the entered data. As it works now, the process works fine on the first entry, but if you try to enter the information again, it behaves as if the original value was entered again:
Example:

User input: 5
Page behaves as if input was: 5
User input: 4
Page behaves as if input was: 5
User input: 3
Page behaves as if input was: 5

When the page initially loads, the area looks like this (yeah, it's blank. I call the code which loads it at the end of the initial loading of the page):

echo "<table>";  
    // ...Other stuff which I don't think is involved in the problem, though I've been wrong before...   
echo "<tr>";  
echo "<td>";  
echo "<div id=\"measurements\">";  
    // Filled by javascript functions below  
echo "</div>";  
echo "</td>";  
echo "</tr>";  
echo "</table>";

The following javascript function is available and is called when the page loads:

function measurementEntered(pid, vid, oid, varn, dat) {  
    // Create XMLHttpRequest object  
    var xmlhttp;  
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }  
    else {  
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }  

    xmlhttp.open("GET", "ajax_measurements_update.php?varn="+varn+"&pid="+pid+"&vid="+vid+"&oid="+oid+"&dat"+dat+"&user="+user, false);
    xmlhttp.send();
    document.getElementById("measurements").innerHTML=xmlhttp.responseText;
}

And the ajax_measurements_update.php page contains the following code to enter the data and refresh the area (there's also some code to add more information to the area, but I don't think it's causing the problem. If you suspect it might, I can post more):

echo "<input type=\"text\" id=\"Select4\" name=\"dat\" size=\"20\" />";

and

echo "<button type=\"button\" onclick=\"measurementEntered($pid, $vid, $oid, $varn, Select4.value);\" />OK</button>";

So this should, upon clicking the "OK" button, pull the data from the "Select4" text field and call the measurementEntered function. The measurementEntered function should then refresh the area with the new "OK" button ready to pull data from the new "Select4" text field. However, when you click it again, measurementEntered is called with the original value from Select4. Any ideas?

Thanks.

Are you tried to debug your ajax requests/responses? What data goes to server and what data come back? (Use firebug for firefox or dev version chrome - it is very usefull tool) — Xupypr MV, Feb 28 '11 at 19:14
I switched to jQuery and was able to get the program working. — BCarpe, Mar 01 '11 at 15:45

score 5 · Accepted Answer · edited May 23 '17 at 12:16

5

The consecutive requests are being cached by your web browser. That is why you are getting expected results in the first request and the same results in all consecutive requests.

Solution 1 -

To disable cache, add the following header information in ajax_measurements_update.php

header("cache-control: no-cache");

Solution 2 -

Change your request URL to the following (add a time parameter at the end, so your browser thinks this is a new URL, so will not load from the cache)

xmlhttp.open("GET", "ajax_measurements_update.php?varn="+varn+"&pid="+pid+"&vid="+vid+"&oid="+oid+"&dat"+dat+"&user="+user+"&temp="+(new Date()).getTime(), false);

Solution 3 -

An worthy alternative is to switch to jQuery. Add the following code in the document ready function to disable cache in all requests.

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

Linked to - Stop jQuery .load response from being cached

edited May 23 '17 at 12:16

Community

1
1

answered Feb 28 '11 at 19:12

Raj

22,346
14
99
142

Different `Select4.value` values leads to different GET requests. So, they will be not cached. Or I have a mistake in my opinion? – Xupypr MV Feb 28 '11 at 19:21
I'm still not sure if it was the caching or not, because I tried adding that header to ajax_measurements_update.php and adding the timestamp, and neither of those worked. I'm accepting this answer though, because of the suggestion of switching to jQuery, which I did, and that fixed the problem. – BCarpe Mar 01 '11 at 15:44
@BCarpe Can you tell me which version of Internet Explorer are you using? – Raj Mar 01 '11 at 16:54
I'm not. I'm using Firefox. Was there something I put in my code that's generally only used for IE? – BCarpe Mar 02 '11 at 15:07
yes that Microsoft.XMLHTTP looks IE style coding but jQuery is your ideal solution for cross browser compliant web applications – Raj Mar 02 '11 at 17:07

score 3 · Answer 2 · answered Feb 28 '11 at 19:38

if you append the datetime to your url it will never cache.

function measurementEntered(pid, vid, oid, varn, dat) {  
    // Create XMLHttpRequest object  
    var xmlhttp;  
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }  
    else {  
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }  

    var currentTime = new Date();
    xmlhttp.open("GET", "ajax_measurements_update.php?varn="+varn+"&pid="+pid+"&vid="+vid+"&oid="+oid+"&dat"+dat+"&user="+user+"&dt="+currentTime.getTime(), false);
    xmlhttp.send();
    document.getElementById("measurements").innerHTML=xmlhttp.responseText;
}

score 2 · Answer 3 · answered Feb 28 '11 at 19:15

2

The results are probably getting cached. Try disabling cache for your AJAX request, or appending a unique GET value (such as a timestamp) to the AJAX query.

answered Feb 28 '11 at 19:15

Malfist

31,179
61
182
269

score 2 · Answer 4 · answered Feb 28 '11 at 19:22

You can also add headers to any PHP file that you do not want the browser to cache:

header('Cache-Control: no-cache, must-revalidate'); instructs the browser not to cache header('Expires: Tue, 1 Jan 2010 12:00:00 GMT'); also adds an expiration date in the past

score 0 · Answer 5 · answered Feb 28 '11 at 20:10

0

Sounds like incorrect SQL to me. What code are you using to request the data from the database?

answered Feb 28 '11 at 20:10

logic-unit

4,195
12
47
72

ajax onclick command pulling outdated data

5 Answers5