mardi 16 décembre 2014

Remember filter value using jquery and cookies



I am looking for a solution for the following problem:


I have a large list that is related to a second list. The two list web parts are on one page, when you select an item in the first list, the second list is filtered by the value passed on from the first list.


In order to improve using this feature I am using a jQuery search box in a CEWP:



<script src="http://ift.tt/ILQp6H" type="text/javascript"></script>
Instant search:<br><input type="text" class="search" style="padding: 10px;"/>
<script type="text/javascript">
jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};
$(document).ready(function(){
$("input.search").change(function() {
var txt = $("input.search").val();
if (txt) {
$("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
$("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();
} else {
$("#WebPartWPQ2").find("tr.ms-itmhover").show();
}
}).keyup(function(){$(this).change();
});
});
</script>


Everything works fine up to this point. However, when I select an Item, the page is refreshed and the value entered in the input field is cleared, resulting in the right item being selected, but the selection made previously has disappeared.


What I was thinking now is saving the value of the txt variable in a cookie. On page load, the value of the cookie is set as default filter value and displayed in the input field.


So here's what I got now:



<script src="http://ift.tt/ILQp6H" type="text/javascript"></script>
<script src="http://ift.tt/1oUFyul" type="text/javascript"></script>
Instant search:<br><input type="text" class="search" style="padding: 10px;"/>
<script type="text/javascript">
jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};
$(document).ready(function(){
var txy = $.cookie("coo");
if (txy) {
$("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txy+"))").hide();
$("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txy+")").show();
} else {
$("#WebPartWPQ2").find("tr.ms-itmhover").show();
}
});
$(document).ready(function(){
$("input.search").change(function() {
var txt = $("input.search").val();
if (txt) {
$("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();
$("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();
} else {
$("#WebPartWPQ2").find("tr.ms-itmhover").show();
}
}).keyup(function(){$(this).change();
});
});
$.cookie("coo", txt);
</script>


This is not working unfortunately. I am a beginner in jQuery, any help with this code is appreciated.


Thanks,


Jakob








0 commentaires:

Enregistrer un commentaire