Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

How to keep search results from clearing on page reload? WordPress

  • SOLVED

This applies to a wordpress site that I'm developing, but is more of a general coding (php? javascript? cookies?) question than a wordpress-specific question.

Here's the website
http://lucalune.com/wordpress/

If you click the +Sort Projects dropdown on the right, you get a wordpress-driven search that sorts the projects by certain criteria. If you select just the first option, Available for Exhibit, and click Sort, you will get the search results.
If you then click on one of those results, it will bring up that page, and the sort/search results will clear on page reload.

I need to figure out how to keep those search results active (to NOT clear on page reload) until a new search (sort) is performed.

I believe this could be done with cookies, but I've done some searches and haven't found answer, and this is beyond my skill set.

Here are the relevant files

<strong>HEADER.PHP (the relevant parts)</strong>

<script type="text/javascript">
jQuery(function($){
$('form').submit(function(e){
e.preventDefault();
var $f = $(this);
$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $f.serialize(),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});
});
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: true, //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<?php wp_head(); ?>
</head>
<body>
<div class="sort_projects">
<a class="menuitem submenuheader" href="#nogo" ><img src= "http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/search_projects.jpg"></a>
<div class="submenu">
<span style="margin-left:2px;">SORT BY:</span><BR>
<?php get_search_form(); ?>
<div style="margin-left:5px;"><br>SORTED<BR>
<IFRAME name="results" id="results" WIDTH="141" HEIGHT="200" allowtransparency="true" scrolling="auto" frameborder="0" src="http://lucalune.com/wordpress/wp-content/themes/simplest/iframefill.php"></IFRAME>
</div>
</div>
</div>


<strong>SEARCHFORM.PHP</strong>

<div class="searchform">
<form id="myForm" action="<?php bloginfo('template_url') ?>/build_search.php" method="post" onsubmit="return false">

<div style="display:none;"><select name="and-or" id="select-and-or">
<option value="OR">Match ANY of the checkboxes (default)</option>
<option value="AND">Match ALL of the checkboxes</option>
</select></div>
<div>
<?php
// The following will list all tags with a checkbox next to them.
$tags = get_terms( 'post_tag' );
$checkboxes = '';
foreach($tags as $tag) :
$checkboxes .='<input type="checkbox" name="tag[]" class="styled" value="'.$tag -> slug.'" id="tag-'.$tag->term_id.'" /><label for="tag-'.$tag->term_id.'" style="line-height:22px; clear:left;">'.$tag->name.'</label><br>';
endforeach;
print $checkboxes;
?>
</div>
<p><input type="image" onclick="dosubmit()" value="" src="<?php bloginfo('template_url') ?>/images/sort_button_grey.png"></p>

</form>
</div>


<strong>ARCHIVE.PHP</strong>

<div style="padding:0px; text-transform:uppercase; font-size:10px; MARGIN-TOP:4PX; style="background-color:#818286;">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink() ?>" target="_parent"><?php the_title(); ?></a><br>

<?php endwhile; else: ?>
<?php _e('Sorry, no projects currently meet all of those criteria. Please select again.'); ?></div>
<?php endif; ?>
</div>

Answers (6)

2012-01-26

Christianto answers:

Hi,

If you use jquery cookie that would be simple by storing all checked value and used it when page load...

Try this code for your javascript on <head>:
jQuery(function($){

var sv = $.cookie("search_value");
if(sv){
var mycheckedoption = sv.split(',');
$.each(mycheckedoption, function(i,v){
$('input[value="'+v+'"]').prop("checked", true);
});
$('#myForm').submit();
}

$('form').submit(function(e){

e.preventDefault();

var cvalue = new Array(), $f = $(this);
$(':checked',this).each(function(i){
cvalue[i] = $(this).val();
});
$.cookie("search_value", cvalue.join(',') );

$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $f.serialize(),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});
});


Let me know if this doesn't work on your site..


tydende comments:

Cristianto,

Here's a page with your code
http://lucalune.com/wordpress/community-sculpture/the-moths/

the search function doesn't seem to be working. let me know if you need to see any code you can't see


tydende comments:

idt, that didn't work at first. i'll try adding the second parts


tydende comments:

idt,

i think i have the code as you suggested here http://lucalune.com/wordpress
but the search results are still clearing.
i added the first block of javscript code to the header.php file, and added the jQuery(function($) code to the bottom of searchform.php

there's one other file that is used to build the search, and that's build_search.php (below), but i don't think that's a factor.

Let me know if i missed something


---------------------------

build_search.php


<?php
// Keyword search
if (isset($_POST['keywordsearch'])) {
$text_search = $_POST['keywordsearch'];
$text = $text_search;
}

// If there is no keyword entered
else {
$text = '';
}

// If there's a category search
if (isset($_POST["cat"])) {
$cat = $_POST["cat"];
}

// If there's a tag search
if (isset($_POST["tag"])){
$tags_array = array();
$tags_array = $_POST["tag"];

foreach ($tags_array as $key => $value)
{
if ($_POST["and-or"] == "OR") {
// tag1 OR tag2 is chosen, add a comma after the tags
$string .= $value.'+';
}

elseif ($_POST["and-or"] == "AND") {
// tag1 AND tag2 is chosen, add a plus after the tags.
$string .= $value.'+';
}
}

// Remove the last symbol in the string, in this case the comma or plus that is added after each tag. We don't want it to look like "tag1+tag2+".
$tags_string = substr($string, 0, -1);

$tag = $tags_string;
}

// If there's no search for tags, set it to 0
else {
$tag = 0;
}

// build the url with the variables
$url = header("Location:/wordpress/?s=$text&cat=$cat&tag=$tag");
?>


Christianto comments:

I don't see my code there are you change it to test other code?


tydende comments:

idt,

i notice that on refresh the checkbox states remain (do not clear)
http://lucalune.com/wordpress/

but the search results do not remain (they clear on refresh). the priority is for the search results to remain.

just to clarify on that in case that was not clear.

thanks again for all the help so far


Christianto comments:

I'm not idt.. :)

Have you tried my code?
I can't see my code on your site, so I can't see why it doesn't work..


tydende comments:

cristianto,

i added your code to the header file on this page
http://lucalune.com/wordpress/community-sculpture/the-moths/

check and see if i added it correctly. the sort button does not work on the page for me


tydende comments:

cristianto,

looking at your code it looks like you may also be trying to get the checkbox states to remain constant. just to clarify, the checkbox states are not the goal, but rather to have the search results (the links) remain on page refresh.

thanks


Christianto comments:

On page
http://lucalune.com/wordpress/community-sculpture/the-moths/

you load jquery 1.4.2 above my code and jquery 1.6.1 below my function, can u place the code below <? wp_head() ?>

it need jquery.prop() to work (included version 1.6 added)
also there is dosubmit undefine function.


Christianto comments:

I fix it by change place of jquery.cookie.js and swap my code place.
jquery.cookie.js need to be define after loading jquery.js (ver 1.6)
not between loading jquery1.4.2.js and jquery.js

please change your header.php to :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Jen Lewin Studio</title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/jquery1.4.2.js"></script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/custom_checkbox.js"></script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: true, //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/menu.js"></script>

<?php wp_head(); ?>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/jquery.cookie.js"></script>
<script type="text/javascript">
function dosubmit(){
jQuery('#myForm').submit();
}
jQuery(function($){

$('form').submit(function(e){
e.preventDefault();

var cvalue = new Array(), $f = $(this);
$(':checked',this).each(function(i){
cvalue[i] = $(this).val();
});
$.cookie("search_value", cvalue.join(',') );

$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $f.serialize(),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});

var sv = $.cookie("search_value");
if(sv){
var mycheckedoption = sv.split(',');
$.each(mycheckedoption, function(i,v){
$('input[value="'+v+'"]').prop("checked", true);
});
$('#submit-search').click();

/*
uncomment this if you want to delete the checkbox statement
$.each(mycheckedoption, function(i,v){
$('input[value="'+v+'"]').prop("checked", false);
});
*/
}

});
</script>
</head>


Christianto comments:

My bad, I forgot to change my example submit code $('#submit-search').click(); to dosubmit();

This is your header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Jen Lewin Studio</title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/jquery1.4.2.js"></script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/custom_checkbox.js"></script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: true, //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/menu.js"></script>

<?php wp_head(); ?>
<script type="text/javascript" src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/jquery.cookie.js"></script>
<script type="text/javascript">
function dosubmit(){
jQuery('#myForm').submit();
}
jQuery(function($){

$('form').submit(function(e){
e.preventDefault();

var cvalue = new Array(), $f = $(this);
$(':checked',this).each(function(i){
cvalue[i] = $(this).val();
});
$.cookie("search_value", cvalue.join(',') );

$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $f.serialize(),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});

var sv = $.cookie("search_value");
if(sv){
var mycheckedoption = sv.split(',');
$.each(mycheckedoption, function(i,v){
$('input[value="'+v+'"]').prop("checked", true);
});

dosubmit();

/*
uncomment this if you want to delete the checkbox statement
$.each(mycheckedoption, function(i,v){
$('input[value="'+v+'"]').prop("checked", false);
});
*/
}

});
</script>
</head>

2012-01-26

Fahad Murtaza answers:

Yes this can be done through cookies.


Fahad Murtaza comments:

or may be sessions.

2012-01-26

John Cotton answers:

You can do this with cookies - either on the client side with javascript or the server side with PHP. Since I can't see you server code completely, I'm going to walk you through doing it with javascript.

Firstly, you need to add jquery.cookie.js to your project. You can [[LINK href="https://github.com/carhartl/jquery-cookie"]]get a copy here[[/LINK]].

Then you need some script like this:


<script type="text/javascript">
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};

$('form').submit(function() {
$.cookie("search_settings", JSON.stringify($('#form').serializeObject()), { path: '/' });
});

var settings = $.parseJSON($.cookie("search_settings"));
$.each( settings, function( name, value){
// deserialize your settings
// In this case, it's all checkboxes, so it's simpler. Different form elements would need to be handle differently!
$('[name="'+name+'"]').prop('checked', true);
});
</script>


tydende comments:

Thanks John.

I added the code and jquery.cookie.js as suggested
http://www.lucalune.com/wordpress/wp-content/themes/simplest/js/jquery.cookie.js

The sort search results still clear. Are there names or values that I need to change in the code you posted? Let me know if there's anything else from my files that you might need to see.

Thanks!


John Cotton comments:

<blockquote>The sort search results still clear. Are there names or values that I need to change in the code you posted? Let me know if there's anything else from my files that you might need to see.</blockquote>

My code doesn't seem to be there...

I guess you're trying another solution, but if you want me to help you get mine working, just let me know - but you should try to do just one at once!

JC

2012-01-26

idt answers:

Hi,

Please check this one: [[LINK href="http://stackoverflow.com/questions/3313595/saving-checkbox-state-on-reload"]]http://stackoverflow.com/questions/3313595/saving-checkbox-state-on-reload[[/LINK]]. I think that's exactly what you needed.

Please let me know if you need help implementing this on your code. You can PM FTP login details if you want me to do it.

Thanks,
idt


idt comments:

This code:

function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
// use localStorage:
return {
set: function(id, data) {
localStorage.setItem(key_prefix+id, data);
},
get: function(id) {
return localStorage.getItem(key_prefix+id);
}
};
} else {
// use document.cookie:
return {
set: function(id, data) {
document.cookie = key_prefix+id+'='+encodeURIComponent(data);
},
get: function(id, data) {
var cookies = document.cookie, parsed = {};
cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
parsed[key] = unescape(value);
});
return parsed[key_prefix+id];
}
};
}
}

jQuery(function($) {
// a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_');

$('form#myForm input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
// save the data on change
storedData.set(this.id, $(this).is(':checked')?'checked':'not');
}).each(function() {
// on load, set the value to what we read from storage:
var val = storedData.get(this.id);
if (val == 'checked') $(this).attr('checked', 'checked');
if (val == 'not') $(this).removeAttr('checked');
if (val) $(this).trigger('change');
});

});


idt comments:

Basically, your code in the head of your HTML will be like this:

<script type="text/javascript">
function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
// use localStorage:
return {
set: function(id, data) {
localStorage.setItem(key_prefix+id, data);
},
get: function(id) {
return localStorage.getItem(key_prefix+id);
}
};
} else {
// use document.cookie:
return {
set: function(id, data) {
document.cookie = key_prefix+id+'='+encodeURIComponent(data);
},
get: function(id, data) {
var cookies = document.cookie, parsed = {};
cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
parsed[key] = unescape(value);
});
return parsed[key_prefix+id];
}
};
}
}
</script>

Then insert this code:

// a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_');

$('form#myForm input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
// save the data on change
storedData.set(this.id, $(this).is(':checked')?'checked':'not');
}).each(function() {
// on load, set the value to what we read from storage:
var val = storedData.get(this.id);
if (val == 'checked') $(this).attr('checked', 'checked');
if (val == 'not') $(this).removeAttr('checked');
if (val) $(this).trigger('change');
});

inside jQuery(function($){ that's already in your page, just above the last });


idt comments:

If that didn't work, please try adding this block
// a key must is used for the cookie/storage

var storedData = getStorage('com_mysite_checkboxes_');



$('form#myForm input:checkbox').bind('change',function(){

$('#'+this.id+'txt').toggle($(this).is(':checked'));

// save the data on change

storedData.set(this.id, $(this).is(':checked')?'checked':'not');

}).each(function() {

// on load, set the value to what we read from storage:

var val = storedData.get(this.id);

if (val == 'checked') $(this).attr('checked', 'checked');

if (val == 'not') $(this).removeAttr('checked');

if (val) $(this).trigger('change');

});

at the bottom of your searchform.php file. So your searchform.php becomes like this:

<div class="searchform">
<form id="myForm" action="<?php bloginfo('template_url') ?>/build_search.php" method="post" onsubmit="return false">

<div style="display:none;"><select name="and-or" id="select-and-or">
<option value="OR">Match ANY of the checkboxes (default)</option>
<option value="AND">Match ALL of the checkboxes</option>
</select></div>
<div>
<?php
// The following will list all tags with a checkbox next to them.
$tags = get_terms( 'post_tag' );
$checkboxes = '';
foreach($tags as $tag) :
$checkboxes .='<input type="checkbox" name="tag[]" class="styled" value="'.$tag -> slug.'" id="tag-'.$tag->term_id.'" /><label for="tag-'.$tag->term_id.'" style="line-height:22px; clear:left;">'.$tag->name.'</label><br>';
endforeach;
print $checkboxes;
?>
</div>
<p><input type="image" onclick="dosubmit()" value="" src="<?php bloginfo('template_url') ?>/images/sort_button_grey.png"></p>

</form>
</div>
<script type="text/javascript">
jQuery(function($) {
// a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_');

$('form#myForm input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
// save the data on change
storedData.set(this.id, $(this).is(':checked')?'checked':'not');
}).each(function() {
// on load, set the value to what we read from storage:
var val = storedData.get(this.id);
if (val == 'checked') $(this).attr('checked', 'checked');
if (val == 'not') $(this).removeAttr('checked');
if (val) $(this).trigger('change');
});

});
</script>


idt comments:

Sorry, I meant try moving this // a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_');

$('form#myForm input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
// save the data on change
storedData.set(this.id, $(this).is(':checked')?'checked':'not');
}).each(function() {
// on load, set the value to what we read from storage:
var val = storedData.get(this.id);
if (val == 'checked') $(this).attr('checked', 'checked');
if (val == 'not') $(this).removeAttr('checked');
if (val) $(this).trigger('change');
});

from where I originally suggested it to your searchform.php.


idt comments:

Please remove this line from the code i gave you:

$('#'+this.id+'txt').toggle($(this).is(':checked'));

2012-01-26

Hai Bui answers:

Hi,

First, please add jquery.cookie.js to your project.

Second, change the javascript part in header.php:
<script type="text/javascript">
jQuery(function($){
$('form').submit(function(e){
e.preventDefault();
var $f = $(this);
$.cookie("search_data", $f.serialize(), { path: '/' });
$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $f.serialize(),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});
if ($.cookie("search_data")) {
$(".searchform form").each(function(){
var $f = $(this);
$("#results").empty().html('<img src="http://www.lucalune.com/wordpress/wp-content/themes/simplest/images/ajax-loader.gif" />');
$.ajax({
url: $f.attr('action'),
type: 'post',
data: $.cookie("search_data"),
success: function(data){
$('#results').replaceWith('<div id="results">' + data + '<\/div>');
}
});
});
}
});
</script>


Let me know if it doesn't work.


tydende comments:

cristianto,

this works. thank you!

thank you tyo the others that posted solutions. i tried cristianto's solution first (in line) and that worked.

thanks

2012-01-26

Julio Potier answers:

Hello

You can use cookies but this cookie can grow big or you can use wordpress transients, kind of temporary datas in database, like "options".

I need the code from "http://lucalune.com/wordpress/wp-content/themes/simplest/build_search.php" to do this

thank you.

<em>ps : if you can provide me FTP access, i'll do this directly for you ;)</em>