How can I swap a div based on a cookie using Javascript?
Question
I'm updating a wordpress site for a customer. I've had to turn on server side caching because the site is so slow due to so many plugins. There is nothing I can do about this and can't disable the plugins.
One of the plugins requires the user to enter an email to download a file. If the plugin sees a valid email, it sets a session variable. Then the page reloads. If that session variable is set, the site displays a download button rather than the enter email form field and button.
Since server side caching is enabled, this functionality is lost. So, what I want to do is set a cookie instead, then check that cookie client side, and swap the content of the div ( id="download" ). I don't do much with Javascript and am having trouble getting this working.
I've set the cookie like this in PHP:
setcookie( 'show_download', 1 );
I've set the new content of the div ( dynamically generated ) like this:
setcookie( 'new_content', '<div class="btn-ss-downloads"><a target="_blank" href="/wp-content/plugins/ss-downloads/services/getfile.php?file=4v-zR6fc6f/9vaROBr/dTJd/Tg/D 0-dT.vBx">Download Series 20 Datasheet</a></div>' );
I've got a function to read the cookie in Javascript that I got from another post:
<script type="text/javascript">
function readCookie(name) {
var ca = document.cookie.split(';');
var nameEQ = name + "=";
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return "";
}
</script>
The functionality that seems correct is to call readCookie( 'show_download' ); . If the value = 1, swap the content of <div id="download"></div> with the content stored in the new_content cookie.
How do I make this work in Javascript given the pieces I have presented here? I'd like to just add a javascript function to my Wordpress header if that will work here. It seems that I could just run this function after the page has rendered / loaded. I'm not terribly familiar with the order of operations with the browser and javascript. Please help.
2 answers
solution1
0 2012-05-12 18:39:03
Is this what you're looking for?
(<head>)
<script type='text/javascript'>
var showDownload = localStorage.getItem("showDownload") //or readCookie()
if (showDownload == 1) {
$(document).ready(function(){
$("div.btn-ss-downloads").html("<a target='_blank'...</a>")
)};
}
</script>
(</head>)
See http://api.jquery.com/html/ and https://developer.mozilla.org/en/DOM/Storage#localStorage
This uses jQuery, which you can include using:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
(This is one of the few times I'd advocate using jQuery for something so simple, because $(document).ready is so nice!)
solution2
0 2012-05-13 02:19:58
Why are you not considering AJAX?
If the requirement is to check validity of an address and then do certain server actions to display a button back, it looks like a good place to use AJAX.
$.post("downloader.php", { eml: mail_id })
.done(function(data){
if(data != "")
$("div.btn-ss-downloads").html('<a href="' + data + '">Download</a>');
});
This assumes the downloader.php does the necessary checks and returns the download URL. You can separate this logic (which seems to be part of the main page now) into downloader.php
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.