Two OnClick-Events on 1 Button?

Ask the community
,
1

Hello, I have two questions:

1.Question:
Is it possible to add two onclick events on one button?
The first event should filter a dataset when the user clicks on the button.
The second event should randomize the results.

Booth of them are working fine on different buttons. But I don’t want the user to click two times…

  1. Question:
    Is it possible to let the repeater only show 1 result, even if there are more?

Thanks in advance for your help! Greets from Berlin

Website: https://editor.wix.com/html/editor/web/renderer/edit/22ac18c6-1d49-4e66-9b12-ca86ccf6b889?metaSiteId=bc1e4859-2d40-4d8d-bdbb-ac02f6fb4d83&editorSessionId=ff721bd5-91a7-4ad3-853b-fdf2ccb5e2c4&referralInfo=dashboard
Code:

import wixData from ‘wix-data’;
$w.onReady( function () {

});

export function button1_click_1(event)
{$w(“#dataset1”).setFilter(wixData.filter()
.eq(“extroo”,$w(“#switch8”).checked)
.eq(“introo”,$w(“#switch7”).checked)
.eq(“chic”,$w(“#switch11”).checked)
.eq(“smoke”,$w(“#switch1”).checked)
.eq(“cocktails”,$w(“#switch10”).checked)
.eq(“rooftop”,$w(“#switch9”).checked)
);

}

function shuffle(items) {
var currentIndex = items.length, temporaryValue, randomIndex;

// While there remain elements to shuffle…
while (0 !== currentIndex) {

// Pick a remaining element…
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = items[currentIndex];
items[currentIndex] = items[randomIndex];
items[randomIndex] = temporaryValue;
}

return items;
}

export function button3_click(event, $w) {
let repeaterItems = $w(‘#repeater1’).data;
$w(‘#repeater1’).data = shuffle(repeaterItems);
}

2

You can do something like this:

let buttonClickCount = 0;
$w("#button1").onClick((event) => {
buttonClickCount++;
if(buttonClickCount === 1){
//do X
} else {
//do Y
}
})

Yes. Create an array that contains the first results and then:

$w("#repeater1").data = myArray;
3

Hey j.d.

thanks! But unfortunately I don’t understandt where to add your code. For me it seems, that with your soltion to my first question, the user still have to click two times on the same button.

export function button1_click_1(event, $w) 
{
    $w("#dataset1").setFilter(wixData.filter()
 //.eq("city",$w('#dropdown1').value)
        .eq("extroo",$w("#switch8").checked)
        .eq("introo",$w("#switch7").checked)
        .eq("chic",$w("#switch11").checked)
 //.eq("dress",$w("#switch12").checked)
 //.eq("pricing",$w("#switch14").checked)
        .eq("smoke",$w("#switch1").checked)
        .eq("cocktails",$w("#switch10").checked)
        .eq("rooftop",$w("#switch9").checked));

}

How and where do I have to insert the code and how can I add an array?

 
export function button3_click(event, $w) {
 let repeaterItems = $w('#repeater1').data;
    $w('#repeater1').data = shuffle(repeaterItems);

 
}

best
rouven

4

All you really need to do is put all of your code (from both onClick event handlers) into the event handler of one button. You don’t need two “events” - what you want is two different actions. Just put one after the other.

5

Hi Yisrael,

I already tryed this, but only the first event (filter) ist working. THe second one (shuffle isnt working). Can you check the code (export function) and look whats wrong here?

Many thanks in advance!

best
rouven

import wixData from 'wix-data';
$w.onReady(function () {
 //TODO: write your page related code here...

});

 function shuffle(items) {
 var currentIndex = items.length, temporaryValue, randomIndex;

 // While there remain elements to shuffle...
 while (0 !== currentIndex) {

 // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

 // And swap it with the current element.
    temporaryValue = items[currentIndex];
    items[currentIndex] = items[randomIndex];
    items[randomIndex] = temporaryValue;
  }
 return items;
}

export function button1_click_1(event, $w) {
    $w("#dataset1").setFilter(wixData.filter()
        .eq("extroo",$w("#switch8").checked)
        .eq("introo",$w("#switch7").checked)
        .eq("chic",$w("#switch11").checked)
        .eq("smoke",$w("#switch1").checked)
        .eq("cocktails",$w("#switch10").checked)
        .eq("rooftop",$w("#switch9").checked)); 
 
   let repeaterItems = $w('#repeater1').data;
    $w('#repeater1').data = shuffle(repeaterItems);
}
6

The dataset’s setFilter() function returns a Promise which you will need to handle. See the setFilter() API for details.

You will need to do something like this:

$w("#dataset1").setFilter(wixData.filter()
   .eq("extroo",$w("#switch8").checked)
   .eq("introo",$w("#switch7").checked)
   .eq("chic",$w("#switch11").checked)
   .eq("smoke",$w("#switch1").checked)
   .eq("cocktails",$w("#switch10").checked)
   .eq("rooftop",$w("#switch9").checked))
.then( () => {
   console.log("Dataset is now filtered");
   // setFilter is finished so we can shuffle the resulting repeater
   let repeaterItems = $w('#repeater1').data;
   $w('#repeater1').data = [ ];
   $w('#repeater1').data = shuffle(repeaterItems);
} )
   .catch( (err) => {
      console.log(err);
} );

BTW - you can also look at the Shuffle Repeater example.

7

thank you. it worked well!

One last qestion. The repeater should only show one item/result.

Here`s what I tryed, but it does not work (green):

export function button1_click_1(event, $w) 
{

  $w("#dataset1").setFilter(wixData.filter()
    .eq("extroo",$w("#switch8").checked)
    .eq("introo",$w("#switch7").checked)
    .eq("chic",$w("#switch11").checked)
    .eq("smoke",$w("#switch1").checked)
    .eq("cocktails",$w("#switch10").checked)
    .eq("rooftop",$w("#switch9").checked))  
  .then( () => {
   console.log("Dataset is now filtered");

 let repeaterItems = $w('#repeater1').data;
   $w('#repeater1').data = [ ];
   $w('#repeater1').data = shuffle(repeaterItems);
} )
  .then( (results) => {
 let myArray = [];
    myArray.push(results.items[0]);
  $w("#repeater1").data = myArray;

  })
   .catch( (err) => {
      console.log(err);
} );
}
8

Ah, sorry. I read your question quickly and thought you were asking something else…

9

If you only want one item, why are you using a Repeater? Just display the information from the first item in the array.

You could maybe do this:

let shuffledItems = shuffle(repeaterItems);
let oneItem = shuffledItems[0];
let myArray = [ ];
myArray.push(oneItem);
$w('#repeater1').data = [ ];
$w('#repeater1').data = myArray;

Again, not sure why you would want to do this, but there’s the [untested] code for what it’s worth.

10

thanks man, its working!