wixLocation.to() does not work in a repeater object

Ask the community
,
1

I am trying to navigate to another page on my site and I cant seem to get navigation to work when the element is in a repeater. If you take a look at the screen shot, I have these elements I handle the click action and the only place it works is on the iconButton1 thats not in the repeater. I have also manually set the link on the buttonView button and iconButton and no matter what I do, i cannot get the wixLocation.to() to work in the repeater button. What I am trying to do is to navigate to the Customer page and pass a query parameter to it so I can filter the results based on that.

2652×1476 324 KB

2

Derick:

I think your problem might be the console.log statement. Your other two functions log a specific string. The failing function tris to log an object (event). This will fail. If you want to log the event object you should use console.log(JSON.stringify(event));

Steve

3

It actually does log the event properly but after I looked at it again, I did not have a ; after the console.log() lines. I fixed it but it still does not work. this is what the code looks like now. The strange thing is that it does even log to console any more.

export function custName_click(event) {
console.log(“custName_click”);
wixLocation.to(“/Customer”);
}

export function buttonView_click(event) {
console.log(“buttonView_click”);
wixLocation.to(“/Customer”);
}

export function iconButton1_click(event) {
//Add your code for this event here:
console.log(“iconButton1_click”);
wixLocation.to(“/Customer”);
}

4

Actually, I had a link defined in the iconButton1 button. I removed that now none of them works. I also removed the event from buttonView_click event and handler and used the UI to set the same link from both the buttonView and iconButton1 buttons and only the one outside of the repeater works

5

So this is weird, I created another button out side of the repeater, set it up to navigate using the Wix GUI and it worked. I then moved it into the repeater and it still works. I removed the link and the added the wixLocation.to() function and it also does not work. So the bottom line, is that I cant get wixLocation.to() to work ANYWHERE

6

Derick:

What is the URL of the page you are having problems with? With that we can see what is happening and debug the published code and give you a response.

I have an example of a Shop ratings page that uses a button on a repeater which fires and loads a ratings update box as expected. I can only imagine that you have some error in wiring up your elements?

Here’s the example page and its code:

Steve

7

here is the URL https://dev0768.wixsite.com/dcsoftware/licensing

8

Hi Derick:

OK you have a couple of problems which you need to fix.

  1. You set the link value in the $w(‘#repCustomers’).onItemReady() function to ‘/Customer?id=’+itemData.id and you also set the onClick event handler which calls wixLocation.to(‘/Customer’).

  2. You are linking to a page uppercase C - Customer however the page name is lowercase c - customer.

The button in the repeater does get called but because there is an error in the page name it doesn’t redirect.

The solution to your problem is to use lowercase customer in your link assignment ike this:

$w("#buttonView").link = "/customer?id=" + itemData._id;

and delete the buttonView_click(event) handler function.

OR

If you want to keep the buttonView_click(event) handler then you need to do a couple of things.
a) You need to get the scope selector for the repeater item that the button clicked is in. You do this as follows:

let scopeSelector = $w.at(event.context);

b) You need to get the id for the current item. Normally if you were mapping the fields using a data set this would all be accessible from the dataset. Luckily in your case you have the id as a field in the repeater ‘#custId’. So you need to get the custId value and then rebuild the location string as follows:

let custId = scopeSelector('#custId');
let targetUrl = 'customer?id='+custId;
wixLocation.to(targetUrl);

So remove the statement $w(“#buttonView”).link = “/customer?id=” + itemData._id.
and use the following click function

export function buttonView_click(event) {
    console.log("buttonView_click");
    let scopeSelector = $w.at(event.context);
    let custId = scopeSelector('#custId');
    let targetUrl = 'customer?id='+custId;
    wixLocation.to(targetUrl);
}

Hope this makes sense and gets you past the current hurdle :wink:
By the way you should get used to checking the URL of target pages for the wixLocation.to() function in the page SEO settings

1808×1132 301 KB

Steve

9

Hi Steve, thanks, that fixed the issue. I didnt realize that the Customer form was lower case as it displays as Customer in the designer, I will use the SOE page to validate it. I used the following line to get the custIdand it works, not sure if this good practice or not

export function buttonView_click(event) {
wixLocation.to(“/customer?custID=” + event.context.additionalData.itemId );
}

10

@derickclack Excellent. glad I could help.