CODEWITHSUNDEEP
jqueryuser-interfaceslider
user1791743
user1791743

Reputation: 13

jquery Ui price Slider cookie

im having dificulties of integrating cookie support (not so good with it) for the fallowing price slider

Here is the code for the js

$(window).load(function(){
function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});​
});

and the html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div class="demo">

    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider-range"></div>
    <ul id="products">
            <li data-price="10"> product - £10 </li>
            <li data-price="50"> product - £50 </li>
            <li data-price="100"> product - £100 </li>
            <li data-price="150"> product - £150 </li>
            <li data-price="200"> product - £200 </li>
        </ul>
    </div

​

Here is link to my jsfindle Price slider

it uses jquery 1.72

My question is how to put cookie support to it, so when visitor selects something it will save his selection and when he refreshes the page or comes back to the page it will still include his selected values.

Upvotes: 1

Views: 1623

Answers (3)

Muthu Kumaran
Muthu Kumaran

Reputation: 17920

Try this, it should work with cookies

DEMO: http://jsfiddle.net/nSJAS/38/

JS codes:

//COOKIE code from MDN https://developer.mozilla.org/en-US/docs/DOM/document.cookie
var allCookies = {
  getItem: function (sKey) {
    if (!sKey || !this.hasItem(sKey)) { return null; }
    return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toGMTString();
          break;
      }
    }
    document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
  },
  removeItem: function (sKey, sPath) {
    if (!sKey || !this.hasItem(sKey)) { return; }
    document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : "");
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = unescape(aKeys[nIdx]); }
    return aKeys;
  }
};

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

var min_value = parseInt(allCookies.getItem("cookie_min_val"), 10);
min_value = (min_value > 0) ? min_value : 0;

var max_value = parseInt(allCookies.getItem("cookie_max_val"), 10);
max_value = (max_value > 0) ? max_value : 0;
//alert(cookie_val);
$(function() {

    var options = {
        range: true,
        min: 0,
        max: 300,
        values: [min_value?min_value:50, max_value?max_value:300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            allCookies.setItem("cookie_min_val", min, "", "/");
            allCookies.setItem("cookie_max_val", max, "", "/");
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    if(min_value>0){
        min = min_value;
        max = max_value;
    }else{
        min = $("#slider-range").slider("values", 0);
        max = $("#slider-range").slider("values", 1);
    }

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});​

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22580

What you want is a plugin for jQuery called $.cookie().

Then you can do something like:

    slide: function(event, ui) {
        var min = ui.values[0],
            max = ui.values[1];

        $("#amount").val("$" + min + " - $" + max);

        $.cookie('the_cookie', { min: min, max: max });

        showProducts(min, max);
    }

Upvotes: 0

Yngwie89
Yngwie89

Reputation: 1217

to add support for cookies in jQuery just follow this tutorial:

http://www.electrictoolbox.com/jquery-cookies/

This js needs "to be installed" as a jQuery standard plugin (so just include the js file in your page), and you'll be able to write and read cookies where you saved your shop list.

Upvotes: 0

Related Questions