Hello
View attachments for more clarity.
Like you can see my page has a list of words. People can add words to that list, and people can vote for a specific word by clicking the button.
How do I when someone clicks a button increment only the counter next to that specific button by one?
These were the problems I encountered trying to implement this:
- Make each button kind of unique so the code knows which row to update.
- Retrieve current counter value for that word.
- Update that value by one and save it.
Thanks!
@nielduysters A repeater could handle this task. You would create a dataset and connect it to the repeater. Then add a couple text elements and connect those to the word and counter fields. After that insert an icon button in that row. Here’s a screen shot of the idea:
Have a look at the repeater documentation to get an explanation of what’s happening with this code. In short, this approach allows you to apply code to a particular row of the repeater.
In preview, this example looks like this:
When I click a button in the list, my inputbox to send a word gets triggered?
@tony-brunsman Yes, that’s the voting button. I want that when I click that button your Javascript code gets launched. However, it sends the inputform to the dataset.
If I’m understanding you correctly, the white input box is connected to the dataset. It’s used for adding records only, right? I would disconnect it from the data and add an onClick event for the “Voeg Toe” button with code like this:
$w("#Woordenvote").new()
.then( (item) => {
$w("#Woordenvote").setFieldValues( {
"Woord": $w("#inputbox").value,
"Counter": 0
} );
$w("#Woordenvote").save();
})
It’s kinda working… But your Javascript code generates a new column [Counter] which is incrementing when clicking the vote button, but I can’t access it from my dataset to display it!!
@tony-brunsman Look this is the issue I meant: I click the button for ‘yow’ and only ‘hey’ gets increased… The button doesn’t know for which word to increase.
‘Code’:
@nielduysters I’m guessing that the actual field key, which Javascript and Wix use, is all lower case. The code capitalizes the first letter of both fields, so the setFieldValues created a new field. Change it to be all lower case.
@nielduysters Is the green box a repeater? If not, none of the code has a chance of working.
The example that I posted above is a repeater, and the code was tested and it works the way you describe in your first post. In other words, clicking the star icon increments the number in that color row.
@tony-brunsman Yes, it’s a repeater. The content from the database gets added dynamically.
@tony-brunsman None of your code isn’t working.
// Voor volledige API-documentatie, inclusief codevoorbeelden, bezoek je https://wix.to/94BuAAs
import wixData from "wix-data";
$w.onReady(function () {
//TODO: write your page related code here...
});
export function addWordBtn_click(event) {
//Add your code for this event here:
$w("#Woordenvote").new()
.then( (item) => {
$w("#Woordenvote").setFieldValues( {
"Woord": $w("#input1").value,
"Counter": 0
} );
$w("#Woordenvote").save();
})
}
//Button 1 is button in list
export function button1_click(event) {
//Add your code for this event here:
let $item = $w.at(event.context);
let itemData = $item("#dataset2").getCurrentItem();
let newValue = itemData.Counter + 1;
$item("#dataset2").setFieldValue("Counter", newValue);
$item("#dataset2").save();
$item("#dataset2").refresh();
}
That’s my code.
The code for adding a new word adds the word, but also an empty row each time.
The code for incrementing the counter only increments for one word in the list no matter what button is clicked…
Note that I have three datasets though.
One for reading (needed to display), one for writing (to add words), and one with read-write (to update the counter).
@nielduysters The fact that you are using three datasets would account for the different results that we are getting since the example that I posted uses only one. Needless to say, I’m questioning the rationale for using three datasets.
