jquery issue with caching in Wordpress
<p>depending on which language the user click, i display the according flag.
When user click on a flag, the code redirect the user to the right URL.</p>

<p>But since i have installed WP_SUPER_CACHE plugin for wordpress, the behavior of this jquery code is random, sometime it take effect and display the right flag, sometime, it doesn't refresh it correctly.</p>

<p>I suppose this is due to the caching plugin, so how can I be sure that the cookie will be read and update in the html code?</p>

<p>HTML code:</p>

<pre><code>&lt;a id="lang-select" class="&lt;?php echo isset($_COOKIE['lang']) 
? $_COOKIE['lang'] : 'en-us' ?&gt;" data-toggle="modal" 
data-target="#lang-modal"&gt;&amp;nbsp;&lt;/a&gt;
</code></pre>

<p>CSS Code:</p>

<pre><code>#lang-select {
display: inline-block;
background-image: url(img/flags.png);
background-position: 0 0;
cursor: pointer;
height: 20px;
width: 30px;
}
#lang-select.us-en { background-position: 0 0; }
#lang-select.eu-en { background-position: -323px 0; }
#lang-select.eu-fr { background-position: -323px 0; }
#lang-select.eu-nl { background-position: -323px 0; }
#lang-select.ca-en { background-position: -204px 0; }
#lang-select.ch-en { background-position: -403px 0; }
#lang-select.ch-fr { background-position: -403px 0; }
#lang-select.no-en { background-position: -364px 0; }
</code></pre>

<p>JQUERY Code:</p>

<pre><code>jQuery(function($){
var baseurl = window.location.protocol + "//" + window.location.host + "/";
var lang = $.cookie('lang');
if ((location.href == baseurl) || (location.href == baseurl + 'eu-en/') || (location.href == baseurl + "eu-fr/") || (location.href == baseurl + "eu-nl/")) {
    if (lang) {
        // US English
        if ((lang == 'us-en' || lang == 'ca-en') &amp;&amp; location.href != baseurl) {
            window.location.href = baseurl;
        }
        // Europe English 
        if ((lang == 'eu-en') &amp;&amp; location.href != baseurl + 'eu-en/') {
            window.location.href = baseurl + "eu-en/";
        }
        // Europe French 
        if ((lang == 'eu-fr') &amp;&amp; location.href != baseurl + 'eu-fr/') {
            window.location.href = baseurl + "eu-fr/";
        }
        // Europe Dutch 
        if ((lang == 'eu-nl') &amp;&amp; location.href != baseurl + 'eu-nl/') {
            window.location.href = baseurl + "eu-nl/";
        }
    } else {
        $('#lang-modal').modal('show');
    }
} 

// MODAL - SET COOKIES //

// US English 
$('#us-en').live('click', function(e) {
    $.cookie("lang", "us-en", { path: '/', expires: 10000 });
    if (location.href == baseurl + 'eu-en/' || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl;
    }
});
// CA English
$('#ca-en').live('click', function(e) {
    $.cookie("lang", "ca-en", { path: '/', expires: 10000 });
    if (location.href == baseurl + 'eu-en' || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl;
    }
});

// Europe English 
$('#eu-en').live('click', function(e) {
    $.cookie("lang", "eu-en", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl + "eu-en/";
    }
});

// Europe French 
$('#eu-fr').live('click', function(e) {
    $.cookie("lang", "eu-fr", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-en/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl + "eu-fr/";
    }
});

// Europe Dutch 
$('#eu-nl').live('click', function(e) {
    $.cookie("lang", "eu-nl", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-en/" || location.href == baseurl + "eu-fr/" ) {
        window.location.href = baseurl + "eu-nl/";
    }
});

});
</code></pre>