It means that you passed a wrong ID that does not exist in the repeater items. Make sure you use the right ID’s
I’m not sure what exactly you mean.
But you can use a drop-down list with the staff member name as label and his/her ID as value.
Then use onChange() listener and retrieve the selected value and use the same repeater.forItems() code to scroll to it.
https://www.wix.com/corvid/reference/$w.Dropdown.html#onChange
“It means that you passed a wrong ID that does not exist in the repeater items. Make sure you use the right ID’s”
Hmmm. I’ve double check the IDs. They seem to be correct. Also, all of the buttons are functional and navigate me to the correct entry on the Staff Bio page when clicked. And on top of that, when I did input one of the IDs incorrectly before, it told me in the SDK warning exactly which one was entered incorrectly. The warning I’m getting now only give me a “.” after the warning.
As far as my second question: I think I have found another solution. Thank you!
after the let staffId line, and this one:
console.log(wixLocation.query.id);
console.log(staffId);
and check what it logs to your console (on Chrome: F12 key then console tab)
I added those lines of code. Here is the message it returned. Also, I don’t know if this might shred some light on the issues but I noticed that the buttons and code is only working properly in Preview Mode. On the published website, the buttons do not work properly.
Check the URL string in the browser address line. Does it include the ID?
Maybe put the link to the page here, so I’ll be able to take a look.
First of all: you should wrap the scroll action in a condition
if(typeof staffId !== "undefined"){
$w("#repeater1").forItems( [staffId], ($item, itemData, index) => {
item("image72").scrollTo();
})
}
So it won’t throw an error if you got to the page from somewhere else.
Second, when I click the following link (for example) I get the scroll as expected:
https://bkannapell.wixsite.com/mattinglyedge/bios?id=77894be0-cbf9-4583-9084-12f05ffbe9f4
So i don’t know why it’s not working for you.
Maybe you have other code on this page. Can you post your full code?
This is the other code I have on the Staff Bios page.
$w.onReady( function () {
$w(“#bioExpand”).onClick( (event) => {
let $item = $w.at(event.context);
$item(“#bioShort”).collapse();
$item(“#bioLong”).expand();
$item(“#bioExpand”).hide();
$item(“#bioCollapse”).show();
} );
} );
$w.onReady( function () {
$w(“#bioCollapse”).onClick( (event) => {
let $item = $w.at(event.context);
$item(“#bioShort”).expand();
$item(“#bioLong”).collapse();
$item(“#bioExpand”).show();
$item(“#bioCollapse”).hide();
} );
} );
So If I add the code you supplied above, would it look like this?
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(“#biosDataset”).onReady( () => {
let staffId = wixLocation.query.id;
if(typeof staffId !== “undefined”){
$w(“#repeater1”).forItems( [staffId], ($item, itemData, index) => {
$item(“#bioExpand”).scrollTo();
})
})
})
No. You have an extra ) parenthesis.
Can’t you just post the full code of the page here together? Because the code order is important.
$w.onReady( function () {
$w(“#bioExpand”).onClick( (event) => {
let $item = $w.at(event.context);
$item(“#bioShort”).collapse();
$item(“#bioLong”).expand();
$item(“#bioExpand”).hide();
$item(“#bioCollapse”).show();
} );
} );
$w.onReady( function () {
$w(“#bioCollapse”).onClick( (event) => {
let $item = $w.at(event.context);
$item(“#bioShort”).expand();
$item(“#bioLong”).collapse();
$item(“#bioExpand”).show();
$item(“#bioCollapse”).hide();
} );
} );
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w(“#biosDataset”).onReady( () => {
let staffId = wixLocation.query.id;
$w(“#repeater1”).forItems( [staffId], ($item, itemData, index) => {
$item(“#bioExpand”).scrollTo();
})
})
})
-
Put my part (from the import wixLocation and on) at the begging of your code.
-
instead of scrolling to the bioExapand, select a repeater element that you never collapse.
-
And fix this parenthesis issue.
I put it at the very beginning of all the code for that page or just at the beginning of the code for scrolling?
Put this (I fixed the parenthesis), at the beginning of the page :
import wixLocation from 'wix-location';
$w.onReady( function() {
$w("#biosDataset").onReady( () => {
let staffId = wixLocation.query.id;
if(typeof staffId !== "undefined"){
$w("#repeater1").forItems( [staffId], ($item, itemData, index) => {
$item("#bioExpand").scrollTo();
})
}
})
})
and as I said replace the bioExpand by a stable element.
#bioExpand is “Read More” link which is not collapsed by is hidden after it is clicked. Should I still change the element?
I guess you can leave it
Sadly, I don’t think that solved the issue. Everything works great in Preview Mode still but when I go to the published page and click on the buttons that lead to the Staff Bios page, it brings me to the top of the page on each button. I did discover that if I refresh the Staff Bios page after I’ve clicked on one of the buttons on the Contact page, it scroll function works that way it’s supposed and the screen will scroll to the desired element. Any ideas why it’s not doing that on the initially load?
No idea, and I can’t play with it as I don’t have an access to your editor.
But let’s try to get read of the extra onReady() function.
What will happen if you delete the entire code from the page and use this instead?
import wixLocation from 'wix-location';
$w.onReady( function() {
$w("#biosDataset").onReady( () => {
let staffId = wixLocation.query.id;
$w("#repeater1").onItemReady( ($item, itemData, index) => {
$item("#bioExpand, #bioCollapse").onClick( (event) => {
if(event.target.id === "bioExpand"){
$item("#bioShort").collapse();
$item("#bioLong").expand();
$item("#bioExpand").hide();
$item("#bioCollapse").show();
} else {
$item("#bioShort").expand();
$item("#bioLong").collapse();
$item("#bioExpand").show();
$item("#bioCollapse").hide()
}
})
});
if(typeof staffId !== "undefined"){
$w("#repeater1").forItems( [staffId], ($item, itemData, index) => {
$item("#bioExpand").scrollTo();
})
}
})
})
[updated]