WixLocation.QueryParams.remove not working for more than one query param

Ask the community
,
1

On my site I’m adding query params to the URL as such:

wixLocation.queryParams.add({"category": "tag"});

The maximum number of additional params I add is two.

The issue appears when I try to remove multiple params at once. The user is able to click a “clear” button that, among other things, should clear all params from the URL. When there is just one param, it removes it with no issue. But if there are two params, it will either clear just one (if I am not adding another param in the same function) or clear none (if I am adding another param in the same function). An example of code is below:

export function searchbutton_click(event) {
    // Update the URL to remove filter specifications and add search specification
    if (wixLocation.query["author"]) {
        wixLocation.queryParams.remove(["author"]);
    }
    if (wixLocation.query["profession"]) {
        wixLocation.queryParams.remove(["profession"]);
    }
    if (wixLocation.query["tag"]) {
        wixLocation.queryParams.remove(["tag"]);
    }
    if (wixLocation.query["category"]) {
        wixLocation.queryParams.remove(["category"]);
    }
    
    wixLocation.queryParams.add({ "search": `${$w("#searchbox").value}`})
}

The above snippet should remove the params that contain “author”, “profession”, “tag”, and “category” if they exist, and add the param with “search”. It only adds the “search” param but removes nothing, even if it exists.

Is this an issue with queryParams.remove or with the code above? If anybody sees anything I’m missing, the help would be much appreciated!

2

Have you tried something like this?:

Object.keys(wixLocation.query).forEach(k => wixLocation.queryParams.remove(k));
3

I just tried that and it doesn’t remove any of the params… it definitely enters the loop, but the remove function doesn’t do anything.

4

Hello @naomimday ,

It looks like a bug indeed

In the meantime, and based on @skmedia answer, you could try this

wixLocation.queryParams.remove(Object.keys(wixLocation.query));

Let us know if it works :slight_smile:

5

@plomteuxquentin thanks for your answer! Any way I could follow the bug that’s been filed?

I tried that – it also didn’t remove any of the params. :frowning:

6

If it isn’t an invincible bug, then this should force it to work. Otherwise, it will have to be addressed by Wix first:

const rm = Object.keys(wixLocation.query).map(o => {
    return () => { wixLocation.queryParams.remove(o) }
});

Promise.all(rm).then(() => console.log('done')).catch(() => console.warn('failed'));
7

It prints ‘done’ and doesn’t still remove the params!

8

it’s because of queryParams.remove not returning anything. rm is just an array of undefined.

My last idea would be

cancelInterval = setInterval(() => {
    let keys = Object.keys(wixLocation.query);
    if(keys[0]) wixLocation.queryParams.remove(keys[0])
    else cancelInterval();
}, 1000) // start with a big interval than reduce until it breaks

does it work? :smiley:

(I have not tested the code in the editor there might be a syntax error)

9

@naomimday could you report the bug and create a ticket for that issue so we can report it? :slight_smile:

(we need the ticket number)

10

@plomteuxquentin oddly enough, that does work. I’ll modify it so it doesn’t remove the params I need… any thoughts as to why this works?

11

It seems like queryParams.remove will only remove one query parameter per function, no matter how many times it’s called.

12

Also @plomteuxquentin I’m not seeing how to report a bug/create an issue, only how to make a post… would you mind pointing me towards how to do that? I’d still like to file this as a bug!

13

You can do so by contacting Wix support directly. I would recommend you add a timeout to your interval function so that you don’t inadvertently crash anyone’s browser jic.

14

@skmedia Could you details a bit I don’t understand that issue :s

15

@naomimday Glad to know it works.

I think it does not work because as soon as it erase one queryParam It replace the whole reference, meaning that your initial reference point to something not connect to Wix system.

By using the interval, it reference the latest version of queryParams and delete from the binded queryParams.

But that could be something else :stuck_out_tongue:

16

@plomteuxquentin Mostly for outdated browsers/machines with little memory, but it’s still good to cover your tracks. Since the issue is with the API not working properly, it’s possible the interval will go on forever and the browser will run out of memory. On proper browsers only the page will crash, but on others it’s possible for the browser to crash.

17

@plomteuxquentin thanks so much for all your help! That explanation would make sense.

@skmedia absolutely – I’m using clearInterval() for this. Is there a way that you know of to set a timeout such that after the interval runs X times, it cancels itself?

18

One way would be to just set a separate setTimeout and clear your interval in the callback, although you’ll have to handle any potential conflicts as well.

My preferred method is something like this:

let i = 0;

const foo = setTimeout(() => {
    if (i === 20 || !wixLocation.queryParams) return false;
    myFunc();
    i++;
    foo;
}, 1000);

foo;
19

@skmedia Excellent. Thanks so much.

20

@plomteuxquentin @skmedia and anybody else who looks at this later: JFYI another solution that works, as recommended by Wix folks while they are looking into the issue, is to remove multiple params at once:

wixLocation.queryParams.remove(["category", "author"]);

Not sure why I didn’t think to try this! It works for my purposes for now. Thanks again for all your help!