(SOLVED) Button in lightbox only works once

Ask the community
,
1

Hello, I have an embedded HTML element showing an interactive map inside of a lightbox. I have been experimenting with making a reset button underneath it in the lightbox that will set the map back to its default position when clicked. So far I’ve tried two different methods and run into an interesting consistent error with both.

First I used this code:

exportfunction button2_click(event){
$w('#html1').src="https://viewer.mapme.com/186d69e8-db95-48cb-afa5-d09adbe06640/location/b9115122-cd63-4137-b6d5-de79b28662a1?showinfo=none"}

The URL is the embedded map point. This works, but will only reset the map once. All further clicks are unresponsive.

After playing with this for a while I decided to try an entirely different approach. I created a ‘fake’ reset button that closes and then reopens the lightbox:

import wixWindow from 'wix-window';
export function button2_click(event) {
wixWindow.lightbox.close();wixWindow.openLightbox("Mehelle Tour 1 Point 1")}

This isn’t technically a reset button for the embedded HTML, but it works!

Here’s where it gets strange though. Just as with the previous code, this one will only work once. On the first click it will close and reopen the lightbox no problem; on the second click it just closes the lightbox and that’s it.

Because these two codes take entirely different approaches, I’m thinking the issue must be with the button itself somehow. Maybe something with how buttons interact with lightboxes? or some bit of code I’m missing? Note that the button does not have a link embedded and nothing in the lightbox is connected to data. The button is functioning strictly through the code.

Any ideas?

2

You stated that you want to close and then re-open the Lightbox, and you are using the function:

export function button2_click(event) {
    wixWindow.lightbox.close();
    wixWindow.openLightbox("Mehelle Tour 1 Point 1") // this won't run
}

However, that function will not do what you expect. Once you close the Lightbox, the rest of the code won’t run. So, openLightbox() won’t run.

What you will need to do is the close the Lightbox, and then in the Page code open it again.

3

It seems that the HtmlComponent needs to be “reset” by setting the .src property to something else. After that, set it back to the original map URL. Try something like the following:

export function button1_click(event) {
    $w("#html1").hide()
        .then(() => {
            $w('#html1').src = "https://www.wix.com";
            setTimeout(() => {
                $w('#html1').src = "https://viewer.mapme.com/186d69e8-db95-48cb-afa5-d09adbe06640/location/b9115122-cd63-4137-b6d5-de79b28662a1?showinfo=none"
            }, 100); // you may have to adjust this time delay
            $w('#html1').show();
        });
}

I tried this and it works. The delay of 100 milliseconds works OK for me, but you might need to adjust it.

4

Yisrael, You’re an absolute champ! This worked perfectly, thank you so much!