Persisting Ajax data cache issue

Question

I have the following Ajax code using POST:

<script type="text/javascript">
$('#consultdate').change(function() {
consultdate = $('#consultdate').val();
userid= '<?php echo $user_id;?>';
cat = '<?php echo $category;?>';
//alert(consultdate);
$.ajax({
type: "POST",
url: 'qry/date-time_qry.php',
headers: {
'Cache-Control': 'no-cache, no-store, must-revalidate', 
'Pragma': 'no-cache', 
'Expires': '0'
},
data: {consultdate : consultdate, userid : userid, cat : cat },
success: function(data)
{
alert(data);
$('input#consulttime').timepicker({ 'disableTimeRanges':JSON.parse(data)});
},
error : function() {
alert("error while loading data");
}
});
});
</script>

In my server side code too, i placed the prevent cache headers.

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

The ajax call is tied to jQuery Datepicker. If i select one date and then another date it is displaying the old data which seems to be a data cache issue. I also tried cache: false without any result. It is persisting. Any solution other than using GET and Math.random() etc...??

I tried the solutions in the following link: Prevent browser caching of jQuery AJAX call result

1. Format your code properly when asking questions here. 2. Include all relevant parts of the problem statement (i.e., what does `data` look like?). 3. Spend more than half a second debugging your code before you ask for help: the last 4 questions you asked on SO are about the exact same code snippet. — André Dion, Nov 05 '17 at 10:59

score 0 · Answer 1 · answered Nov 05 '17 at 10:31

0

Try below code:

<script type="text/javascript">
    $('#consultdate').change(function() {
        consultdate = $('#consultdate').val();
        userid= '<?php echo $user_id;?>';
        cat = '<?php echo $category;?>';
        //alert(consultdate);
        $.ajax({
            cache: false,//<-- added cache false option
            type: "POST",
            url: 'qry/date-time_qry.php',
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate', 
                'Pragma': 'no-cache', 
                'Expires': '0'
            },
            data: {consultdate : consultdate, userid : userid, cat : cat },
            success: function(data)
            {
                alert(data);
                $('input#consulttime').timepicker({ 'disableTimeRanges':JSON.parse(data)});
            },
            error : function() {
                alert("error while loading data");
            }
        });
    });
</script>

I've added build in cache option with false value which automatically appends a timestamp to the query string when making the request. Hope this work for you...!

answered Nov 05 '17 at 10:31

Narendra Lakhtariya

29
2

In my original post i have specified that i have tried it and it will not work. I am also making POST request. – Pamela Nov 05 '17 at 10:37
and if we add headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' }, my ajax call data will not get reflected in time picker. In my original post i added it to show that i tried it..without suucess – Pamela Nov 05 '17 at 10:41
Ok, just put `$.ajaxSetup({ cache: false });` before ajax call and check. It should work... – Narendra Lakhtariya Nov 05 '17 at 10:45
No..i tried it. The issue persists. Seems like there is no way other than using GET and using Math.random() ... – Pamela Nov 05 '17 at 10:50
What do you mean "you are referring to this post"... How did you say that..? – Narendra Lakhtariya Nov 05 '17 at 10:56
It is the answer provided by @Peter J in the above link. I have already read and tried that. – Pamela Nov 05 '17 at 10:57
It's ok if you refer any link and tried but I given my answer from my past experience. Here I'm for help only so please don't say like "you are referring to this post" – Narendra Lakhtariya Nov 05 '17 at 11:02

Persisting Ajax data cache issue

1 Answers1