IE browser caching and the jQuery Form Plugin

Posted by Harfleur on Stack Overflow See other posts from Stack Overflow or by Harfleur
Published on 2010-02-22T19:43:38Z Indexed on 2010/05/15 5:04 UTC
Read the original article Hit count: 240

Filed under:
|
|

Like so many lost souls before me, I'm floundering in the snake pit that is Ajax form submission and IE browser caching.

I'm trying to write a simple script using the jQuery Form Plugin to Ajaxify Wordpress comments. It's working fine in Firefox, Chrome, Safari, et. al., but in IE, the response text is cached with the result that Ajax is pulling in the wrong comment.

    jQuery(this).ajaxSubmit({
        success: 
            function(data) {
                var response = $("<ol>"+data+"</ol>");
                response.find('.commentlist li:last').hide().appendTo(jQuery('.commentlist')).slideDown('slow');
            }           
        });

ajaxSubmit sends the comment to wp-comments-post.php, which inelegantly spits back the entire page as a response. So, despite the fact that it's ugly as toads, I'm sticking the response text in a variable, using :last to isolate the most recent comment, and sliding it down in its place.

IE, however, is returning the cached version of the page, which doesn't include the new comment. So ".commentlist li:last" selects the previous comment, a duplicate of which then uselessly slides down beneath the original.

I've tried setting "cache: false" in the ajaxSubmit options, but it has no effect. I've tried setting a url option and tacking on a random number or timestamp, but it winds up being attached to the POST that submits the comment to the server rather than the GET that returns the response, and so has no effect. I'm not sure what else to try. Everything works fine in IE if I turn off browser caching, but that's obviously not something I can expect anyone viewing the page to do.

Any help will be hugely appreciated. Thanks in advance!

EDIT WITH A PROGRESS REPORT: A couple of people have suggested using PHP headers to prevent caching, and this does indeed work. The trouble is that wp-comments-post is spitting back the entire page when a new comment is submitted, and the only way I can see to add headers is to put them in the Wordpress post template, which disables caching on all posts at all times--not quite the behavior I'm looking for.

Is there a way to set a php conditional--"if is_ajax" or something like that--that would keep the headers from being applied during regular pageloads, but plug them in if the page was called by an Ajax GET?

© Stack Overflow or respective owner

Related posts about AJAX

Related posts about jQuery