Hello,
I have a repeater displaying team member content from my data collection (image, name etc). So far so good. However, I would like to have a 'Bio' button inside the repeater which, upon click, opens a text box with a short biography. And then preferably closes the same box upon a second click.
Simple enough, but I've tried a million different variants of onClick, .show()/.hide() by now! Could someone please please share a string of working code? It works okay with items _outside_ the repeater, but never when I apply code to something inside it. Thank you so much!
Great! Its good to hear that you didn't give up on this :) also, you can safely remove the line with console.log - it is for debugging purposes only.
Now it works!! So happy, couldn't have done it without you Marius. Thank you! :)
My final code, if anyone else needs it:
import wixData from 'wix-data'; $w.onReady(function () { $w("#biobutton").onClick(async (event, $w) => { const bio = await wixData.get('Team', event.context.itemId) console.log(bio) $w('#textgroup').show("fade"); } ); } ) export function closebutton_click(event, $w) { //Add your code for this event here: $w("#textgroup").hide("fade"); }
'biobutton' - the button to click in order to show the textbox
'Team' - the concerned data collection
bio - the Id of the column where text is imported from
'textgroup' - the textbox + a white background box + 'closebutton'
'closebutton' - a button that closes the textbox
Thanks again!
Tried:
$w.onReady(function () { //your code $w("#biobutton").onClick(async (event, $w) => { const bio = await wixData.get('Team', event.context.itemId) console.log(bio) $w('#biotext').show(); })
And get: 'Parsing error: Unexpected token' for the final row.
The console reads:
public/pages/gsel1.js: Unexpected token (8:2) 6 | console.log(bio) 7 | $w('#biotext').show(); > 8 | }) | ^
Yes, I was considering that too... Also tried using a table. It's just a bit less elegant, and heavier to load, than a simple pop-up. It seems like such a small thing, but the repeater makes everything difficult!
The code was just a snippet. You need to wrapt it with:
$w.onReady(function () { //your code })
please write if it doesnt workt
Also, if you are not sure what you are doing with the js code, you could consider using a dynamic page instead of the modal box for the bio. You can easily find an example how to do it in the wixCode documentation
It says:
There was an error in your script
Error: The element selector function (usually $w) cannot be used before the page is ready
what does it print in the console when you click the button? you can open the console in the preview mode by pressing on 'Developer Console' in the bottom of the screen
Dear Marius, thank you for sharing!
However, my very limited .js skills can't really get it to work...
This is what I just tested:
import wixData from 'wix-data'; $w("#biobutton").onClick(async (event, $w) => { const bio = await wixData.get('Team', event.context.itemId) console.log(bio) // your custom logic goes here $w('#biotext').show(); })
#biobutton is the button that I want to click on to trigger the textbox #biotext, 'Team' is my data collection and 'bio' is the column containing the various texts I want to show. Obviously there's something I'm not getting, would you mind helping out again? Thank you so much.
Helena
Hi Helena,
this is a part of the code you are looking for:
$w("#image1").onClick(async (event, $w) => { const book = await wixData.get('Books', event.context.itemId) console.log(book) // your custom logic goes here })
I have a 'Books' collection. In a page I display books with a repeater, where every book has a cover image displayed by an element with id '#image1'. OnClick handler gets attached for every image inside the repeater. Then, when the user clicks on an image, I extract the id of that specific book from the event, and then I query wixData for that specific id. Then I get the whole book object, which I can feed to a custom element and then show it on the page.
hope that helps,
Marius