jeudi 4 février 2016

Construct url with checkbox value

I have a script that passes select dropdowns and checkboxes values to the url - in this cases its a checkbox. The script is basically put together from different sources and a lot of googling - its close to do what I want but missing one thing.

The url is passed like this ?fss=HP - this shows all my HP products. If I check the next set of checkboxes called disk it construct the url like this: ?fss=HP+SSD. All of this works, my problem is when I try to pass values from the same set of checkboxes: ?fss=HP+DELL or ?fss=HP+DELL does not work. this is from the script originally using selectboxes I think, but I cant figure out how to make the values from same set of checkboxes to work.

Any ideas?

HTML:

<div class="filterGenius">
  <div class="col">
     <b>Manufacturer</b><br>
         <input type="checkbox" name="HP" value="HP" /> 
        <input type="checkbox" name="Dell" value="Dell" /> 
        <input type="checkbox" name="Lenovo" value="Lenovo" /> 
        <input type="checkbox" name="Apple" value="Apple" /> 
        <input type="checkbox" name="Acer" value="Acer" /> 
        <input type="checkbox" name="Asus" value="Asus" /> 
   </div>

  <div class="col">
     <b>Disk</b><br>
         <input type="checkbox" name="SSD" value="SSD" /> 
        <input type="checkbox" name="SATA" value="SATA" /> 

</div>

Script:

$(document).ready(function() {
new function(settings) {
    // Various Settings
    var $separator = settings.separator || '&';
    var $spaces = settings.spaces === false ? false : true;
    var $suffix = settings.suffix === false ? '' : '[]';
    var $prefix = settings.prefix === false ? false : true;
    var $hash = $prefix ? settings.hash === true ? "#" : "?" : "";
    var $numbers = settings.numbers === false ? false : true;

    jQuery.query = new function() {
        var is = function(o, t) {
            return o != undefined && o !== null && (!!t ? o.constructor == t : true);
        };
        var parse = function(path) {
            var m, rx = /\[([^[]*)\]/g,
                match = /^([^[]+)(\[.*\])?$/.exec(path),
                base = match[1],
                tokens = [];
            while (m = rx.exec(match[2])) tokens.push(m[1]);
            return [base, tokens];
        };
        var set = function(target, tokens, value) {
            var o, token = tokens.shift();
            if (typeof target != 'object') target = null;
            if (token === "") {
                if (!target) target = [];
                if (is(target, Array)) {
                    target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
                } else if (is(target, Object)) {
                    var i = 0;
                    while (target[i++] != null);
                    target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
                } else {
                    target = [];
                    target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
                }
            } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
                var index = parseInt(token, 10);
                if (!target) target = [];
                target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
            } else if (token) {
                var index = token.replace(/^\s*|\s*$/g, "");
                if (!target) target = {};
                if (is(target, Array)) {
                    var temp = {};
                    for (var i = 0; i < target.length; ++i) {
                        temp[i] = target[i];
                    }
                    target = temp;
                }
                target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
            } else {
                return value;
            }
            return target;
        };

        var queryObject = function(a) {
            var self = this;
            self.keys = {};

            if (a.queryObject) {
                jQuery.each(a.get(), function(key, val) {
                    self.SET(key, val);
                });
            } else {
                self.parseNew.apply(self, arguments);
            }
            return self;
        };

        queryObject.prototype = {
            queryObject: true,
            parseNew: function() {
                var self = this;
                self.keys = {};
                jQuery.each(arguments, function() {
                    var q = "" + this;
                    q = q.replace(/^[?#]/, ''); // remove any leading ? || #
                    q = q.replace(/[;&]$/, ''); // remove any trailing & || ;
                    if ($spaces) q = q.replace(/[+]/g, ' '); // replace +'s with spaces

                    jQuery.each(q.split(/[&;]/), function() {
                        var key = decodeURIComponent(this.split('=')[0] || "");
                        var val = decodeURIComponent(this.split('=')[1] || "");

                        if (!key) return;

                        if ($numbers) {
                            if (/^[+-]?[0-9]+\.[0-9]*$/.test(val)) // simple float regex
                                val = parseFloat(val);
                            else if (/^[+-]?[0-9]+$/.test(val)) // simple int regex
                                val = parseInt(val, 10);
                        }

                        val = (!val && val !== 0) ? true : val;

                        self.SET(key, val);
                    });
                });
                return self;
            },
            has: function(key, type) {
                var value = this.get(key);
                return is(value, type);
            },
            GET: function(key) {
                if (!is(key)) return this.keys;
                var parsed = parse(key),
                    base = parsed[0],
                    tokens = parsed[1];
                var target = this.keys[base];
                while (target != null && tokens.length != 0) {
                    target = target[tokens.shift()];
                }
                return typeof target == 'number' ? target : target || "";
            },
            get: function(key) {
                var target = this.GET(key);
                if (is(target, Object))
                    return jQuery.extend(true, {}, target);
                else if (is(target, Array))
                    return target.slice(0);
                return target;
            },
            SET: function(key, val) {
                var value = !is(val) ? null : val;
                var parsed = parse(key),
                    base = parsed[0],
                    tokens = parsed[1];
                var target = this.keys[base];
                this.keys[base] = set(target, tokens.slice(0), value);
                return this;
            },
            set: function(key, val) {
                return this.copy().SET(key, val);
            },
            REMOVE: function(key) {
                return this.SET(key, null).COMPACT();
            },
            remove: function(key) {
                return this.copy().REMOVE(key);
            },
            EMPTY: function() {
                var self = this;
                jQuery.each(self.keys, function(key, value) {
                    delete self.keys[key];
                });
                return self;
            },
            load: function(url) {
                var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
                var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
                return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
            },
            empty: function() {
                return this.copy().EMPTY();
            },
            copy: function() {
                return new queryObject(this);
            },
            COMPACT: function() {
                function build(orig) {
                    var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
                    if (typeof orig == 'object') {
                        function add(o, key, value) {
                            if (is(o, Array))
                                o.push(value);
                            else
                                o[key] = value;
                        }
                        jQuery.each(orig, function(key, value) {
                            if (!is(value)) return true;
                            add(obj, key, build(value));
                        });
                    }
                    return obj;
                }
                this.keys = build(this.keys);
                return this;
            },
            compact: function() {
                return this.copy().COMPACT();
            },
            toString: function() {
                var i = 0,
                    queryString = [],
                    chunks = [],
                    self = this;
                var encode = function(str) {
                    str = str + "";
                    if ($spaces) str = str.replace(/ /g, "+");
                    return encodeURIComponent(str);
                };
                var addFields = function(arr, key, value) {
                    if (!is(value) || value === false) return;
                    var o = [encode(key)];
                    if (value !== true) {
                        o.push("=");
                        o.push(encode(value));
                    }
                    arr.push(o.join(""));
                };
                var build = function(obj, base) {
                    var newKey = function(key) {
                        return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
                    };
                    jQuery.each(obj, function(key, value) {
                        if (typeof value == 'object')
                            build(value, newKey(key));
                        else
                            addFields(chunks, newKey(key), value);
                    });
                };

                build(this.keys);

                if (chunks.length > 0) queryString.push($hash);
                queryString.push(chunks.join($separator));

                return queryString.join("");
            }
        };

        return new queryObject(location.search, location.hash);
    };
}(jQuery.query || {}); // Pass in jQuery.query as settings object

function removeFSS() {
    ga("send", "event", "button", "click", "filter-clear", "input");

    var t = encodeURI(unescape($.query.set("fss", '')));
    var n = window.location.href.split("?")[0];
    window.location.href = n + t
}

function getFSS() {
    var D = jQuery('.filterGenius input, .filterGenius select').serializeArray();
    var O = {};
    jQuery.each(D, function(_, kv) {
        if (O.hasOwnProperty(kv.name)) {
            O[kv.name] = jQuery.makeArray(O[kv.name]);
            O[kv.name].push(clean(kv.value, ""));
        } else {
            O[kv.name] = kv.value;
        }
    });

    var V = [];
    for (var i in O)
        if (jQuery.isArray(O[i]))
            V.push(O[i].join("+"));
        else
            V.push(O[i]);

    V = jQuery.grep(V, function(n) {
        return (n)
    });
    return V.join("+");
}
$(document).ready(function() {
    $(".filterGenius input").each(function() {
        if (window.location.href.indexOf($(this).val()) >= 0) {
            $(this).attr("checked", "checked")
        }
    });
    $(".filterGenius select option").each(function() {
        if (window.location.href.indexOf($(this).val()) >= 0) {
            $(this).attr('selected', true);
        }
    });
    $(".filterGenius input, .filterGenius select").change(function() {

        var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
        var o = window.location.href.split("?")[0];

        $(".filterGenius input, .filterGenius select").attr("disabled", true);

        window.location.href = o + s
    });
});
});




Aucun commentaire:

Enregistrer un commentaire