Hi!
I’m trying to build a multistage form which consists of several steps. It's build using a slideshow. Anyone has any thought where it might go wrong?
What's the issue?
I face very strange behaviour. I'm trying to get from slide 1 to slide 2 through the button which is linked with the following click event:
export async function slide1_button_next_click(event) {}
When triggering this event to go from slide (1) to slide (2), the click event
export async function slide2_button_next_click(event) {}
is triggered as well!?
How is this even possible, if I didn’t call this function elsewhere in my code?
Also when setting “$w('#slideshow1').changeSlide( … );“, no update on the level of the slideIndex variable is registered. I verified this through:
slideIndex = $w("#slideshow1").currentIndex;
I am however able to make the slides progress from slide (1) to slide (2), which makes it even stranger that this variable is not updated.
How does this look from user perspective?
* Slideshow "Slide 1":
* Slideshow "Slide 2":
What's the current outcome?
Console log export after triggering the following function:
export async function slide1_button_next_click(event) {}
Button “slide1next” clicked
Button click 'slide1_button_next_click 'received...
slide[0]_id = slideshowSlide1
Button slide2next clicked!
Button click 'slide2_button_next_click 'received...
slide[0]_id = slideshowSlide1
But to recap: the 'next' button on "Slide 2" was never clicked! The italic hence shouldn't be displayed by the console yet and the code underneath shouldn't yet have been executed.
What does the code say?
See: https://jsfiddle.net/bh1o6nmr/
OR
Code Snippet:
export async function slide1_button_next_click(event) {
//Add your code for this event here:
buttonIndex = $w("#slide1next").id;
console.log("Button"+ buttonIndex + "clicked!");
// Send message towards the HTML element
$w("#html1").postMessage("question1_button_next");
console.log("Message sent from Wix!");
//Receive message from the HTML element
$w("#html1").onMessage(function (result) { // Adds an event handler that runs when the HTML Component sends a message.
dataReceived = JSON.stringify(result.data);
//console.log(`Message received by Wix: ${result.data}`);
var timestamp = new Date();
// Contents of above date object is
// converted into a string using toISOString() function.
var insertDateTime = timestamp.toISOString(); // Format: "_updatedDate": "2017-05-24T12:33:18.938Z",
//5. Store results in user database
let insertAnswer = {
"memberId": 1,
"quizId": 1,
"sectionId": 1,
"partId": 1,
"questionId": 1,
"answer": dataReceived,
"timestamp": insertDateTime // Format: "_updatedDate": "2017-05-24T12:33:18.938Z",
};
wixData.insert("member-answers", insertAnswer)
.then( (results) => {
let item = results; //see item below
} )
.catch( (err) => {
let errorMsg = err;
} );
});
//Go to the next slide
console.log("Button click 'slide1_button_next_click 'received...");
await setSlide()
function setSlide(){
//Set next slide (2)
qId++;
$w("#text19").text = StyleQuizSection;
$w("#text27").text = qId + ". " + myArray[qId-1+offSet][2];
pageNumber++;
//
$w('#slideshow1').changeSlide(1);
}
slideIndex = $w("#slideshow1").currentIndex;
console.log("slide["+ slideIndex + "]_id = " + $w("#slideshow1").slides[slideIndex].id);
}
export async function slide2_button_next_click(event) {
//Add your code for this event here:
buttonIndex = $w("#slide2next").id;
console.log("Button"+ buttonIndex + "clicked!");
console.log("Button click 'slide2_button_next_click 'received...");
await setSlide()
function setSlide(){
//Set next slide (3)
qId++;
$w("#text19").text = StyleQuizSection;
$w("#text29").text = qId + ". " + myArray[qId-1+offSet][2];
pageNumber++;
//
$w('#slideshow1').changeSlide(2);
}
slideIndex = $w("#slideshow1").currentIndex;
console.log("slide["+ slideIndex + "]_id = " + $w("#slideshow1").slides[slideIndex].id);
}
Wix already do their own multistage form example.
https://www.wix.com/corvid/example/multistage-form
Also, if you are using slideshows, make sure that you have turned off all of its own settings and taken off any navigation parts too.