Pass parameter to function onclick jQuery

Question

I am trying to remove the parameters from the URL with jquery. Actually parameters have to be passed dynamically and should be the text of parent element on click. Then after adding a prefix to that, I need to pass that to function.

As in image shown below, when someone clicks the Clear link, it fetches the filter name from its heading title ie COLOR, after adding some prefix, say js_, then pass this js_color to function.

Till now, I have done something like this but it doesn't seems to work. Can you please help me out.

Thanks

Edit:

If I pass param value manually, it is working fine.

Working: removeParam("js_color", url)

Not Working: removeParam(param, url)

Fiddle: https://jsfiddle.net/jz1dyh9r/

Function not getting value for 1st parameter.

    // Append Clear Link to element
    $('.woof_redraw_zone .woof_container_inner h4').each(function(){
        $(this).append('<a class="clear_filters">Clear</a>');
    });

    // Extract parameter, pass it to function and generate new URL
    $('.woof_redraw_zone .woof_container_inner h4').click(function(){
        var url = window.location.href;
        var prefix = ("pa_");
        var key = $(this).clone().children().remove().end().text().toLowerCase();
        var param = prefix + key;
        var alteredURL = removeParam(param, url);
        console.log( removeParam(param, url) );
        // window.location.href = alteredURL;
    });

// Reference: Remove a parameter to the URL with JavaScript

    function removeParam(key, sourceURL) {
        var rtn = sourceURL.split("?")[0],
            param,
            params_arr = [],
            queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
        if (queryString !== "") {
            params_arr = queryString.split("&");
            for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                param = params_arr[i].split("=")[0];
                if (param === key) {
                    params_arr.splice(i, 1);
                }
            }
            rtn = rtn + "?" + params_arr.join("&");
        }
        return rtn;
    }

So evidently param is not what you think it is, and again, did you try logging it to the console. — adeneo
– adeneo, Commented Sep 28, 2016 at 6:00
ok, found you're problem - you have spaces in your'e key string. change you're comparison to param.trim() === key.trim() and you're good to go — Jameson the dog
– Jameson the dog, Commented Sep 28, 2016 at 6:59

Jameson the dog · Accepted Answer · 2016-09-28 07:07:01Z

1

You're comparison strings may have spaces and line breaks wrapping them, use trim() on the strings before comparing them

function removeParam(key, sourceURL) {
        var rtn = sourceURL.split("?")[0],
            param,
            params_arr = [],
            queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
        if (queryString !== "") {
            params_arr = queryString.split("&");
            for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                param = params_arr[i].split("=")[0];
                if (param.trim() === key.trim()) { // compare trimmed strings
                    params_arr.splice(i, 1);
                }
            }
            rtn = rtn + "?" + params_arr.join("&");
        }
        return rtn;
    }

answered Sep 28, 2016 at 7:07

Jameson the dog

1,8061 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass parameter to function onclick jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related