[SOLVED] Logic for Drop Down + Button

raygrewe · October 10, 2022, 6:31pm

Hi there, I came up with what I thought would be a simple design but the coding behind it is proving to be a bit more than I can chew.

The idea is simple, a drop down menu with three options. Next to it a trigger button. If option 1 is selected from the drop down and the button is clicked, light box 1 would open. If option 2 is selected from the drop down and the button is clicked, light box 2 would open. If option 3 is selected from the drop down and the button is clicked, light box 3 would open. If nothing is selected and the button is clicked then an error message would appear.

I do not need to record this click in any sort of data set. I just need it to open the proper lightbox. Here’s the code I have so far that is not working.

export function button22_click ( event ) {
if (( $w ( “#dropdown1” ). value === “option1” ). wixWindow . openLightbox ( “lightbox1” ));
if (( $w ( “#dropdown1” ). value === “option2” ). wixWindow . openLightbox ( “lightbox2” ));
if (( $w ( “#dropdown1” ). value === “option3” ). wixWindow . openLightbox ( “lightbox3” ));
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}

Thanks in advance for any help!

CODE-NINJA · October 10, 2022, 9:19pm

When you do a selection on the dropdown you automaticaly change the selected-index of the dropdown.

Do you already have an idea?

$w.onReady(()=>{
	$w('#dropddown1').onChange(()=>{
		console.log("Dropdown-Value and INDEX has been changed!");
		console.log("Index: " $w('#dropddown1').selectedIndex);
	
	});
});

…if(…) {…} else {…} … —> check for selected index.
…or even do it directly…

wixWindow.openLightbox("lightbox"+$w('#dropddown1').selectedIndex));

raygrewe · October 11, 2022, 1:15pm

I’m sorry, I’m not following. Are you saying change the use of the button depending on what’s selected from the drop down? If so I’m not following how your code would change where the button points? Please elaborate.

CODE-NINJA · October 11, 2022, 2:45pm

Did you try out my provided code?

$w.onReady(()=>{
	$w('#dropddown1').onChange(()=>{
		console.log("Dropdown-Value and INDEX has been changed!"); 	
		console.log("Index: ", $w('#dropddown1').selectedIndex);
	});
});

Did you already took a look onto CONSOLE ? What you can see on CONSOLE, when you change the value of your Dropdown ?

raygrewe · October 12, 2022, 1:07pm

Sorry for the delay, I did try your code. No error message occurs, but nor does anything happen. I’m not sure I’m fully understanding your logic.

I did go back to my original code and checked the CONSOLE and got the following error message.

exportfunction button22_click ( event ){ if (( $w ( “#dropdown1” ). value === “option1” ). wixWindow . openLightbox ( “lightbox1” )); if (( $w ( “#dropdown1” ). value === “option2” ). wixWindow . openLightbox ( “lightbox2” )); if (( $w ( “#dropdown1” ). value === “option3” ). wixWindow . openLightbox ( “lightbox3” )); // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4// Add your code for this event here: }

TypeError: Cannot read properties of undefined (reading ‘openLightbox’)

CODE-NINJA · October 12, 2022, 9:27pm

Now go back to my code again and forget about your old code.

Dropdowns should be triggered by → onChange! → you use → onClick!!!
You said that you have tested my provided code and got no ERRORs, but also nothing happened! → That’s correct, because nothing else then a MESSAGE in the CONSOLE-log was programmed! → And you should just check the MESSAGE! → You even did not mention the message, when you did your test?!? —> BAD!!! → Not concentrated and maybe even lazy!
Better do not use extern functions, this is exactly what you do!!! → BAD!!! Instead put all your code inside → onReady()-code-part (like already shown in my code).

RE-TEST my code one more time! Change your dropdown and see what happens inside → CONSOLE!

You know how to use the CONSOLE ?
If not → Press-F12 (google-chrome/MS-Edge), or use the integrated CONSOLE inside the Wix-Editor on the very bottom of your page, when activating PREVIEW-MODE.

After successful testings → expand your code and add the following…

.....
    $w('#dropddown1').onChange(()=>{ 		
    console.log("Dropdown-Value and INDEX has been changed!"); 	 		
    console.log("Index: ", $w('#dropddown1').selectedIndex);
    wixWindow.openLightbox("lightbox"+$w('#dropddown1').selectedIndex));
});
....

raygrewe · October 13, 2022, 5:56pm

Velo-Ninja, I appreciate your time. Clearly our conversation has frustrated you in some sort of way. I am not a wix or software specialist, I’m an entrepreneur figuring stuff out as I go. Frankly, calling anyone lazy who is stating they do not understand your logic is a terrible mentality. The chrome console is not something I am used to using.

That being said I’ve opened both consoles. Neither gives any sort of error message with your code. I am sure this is something I am doing incorrectly but not sure what that may be.

No need to respond, I wish you well and thank you for your time. As I always do, I’ll find another way.

CODE-NINJA · October 13, 2022, 8:36pm

Ok, did not want to be rude.

Just wanted to hear from you that you have tried really tried it on your own.
I am not frustrated , just wanted to see your own actions, wanted to see that you are willing to learn.

It seems you do!

Normaly you should see the following message on your CONSOLE…
“Dropdown-Value and INDEX has been changed!”
…and …
“Index + selectedIndex of your Dropdown”
…when you change dropdown-value/selection.

And now just for you, i will demonstrate you what i wanted to see from you…

Generating a TESTING-PAGE…(including a DropDown)… -->EXPAND-PIC!
This will be our little and very simple testing-page.

What you can see on the pic is the PREVIEW-MODE of your Wix-Editor.
On the very BOTTOM of the Preview-Mode-Screen , you can see the CONSOLE !

The console is empty at the beginning, because nothing happens!

Now we are going to change some VALUES inside the DropDown…
We choose —> BLACK

…and take a look onto → CONSOLE! —> RESULT ???

What you can see on the CONSOLE ?
Now you got a message and a RESULT.

-----> RESULT = 1 <----- What does this mean ?

1 = INDEX of the DROPDOWN.

But why —> 1 ?
Normaly BLACK is the → second ← value inside our DropDown.

Because? Because in programming-language everything starts to count from ??? → EXACTLY → from —> 0.

Ok! Till here everything should be clear now!

OUR CODE IS WORKING ALREADY!

So what do you know now?
And what was your aim one more time?
And how to combine the new knowledge with your wished feature ?

Make some thoughts about that.

By the way, the following code was used in the shown example…

$w.onReady(()=>{
    $w('#dropdown1').onChange(()=>{
        console.log("Dropdown-Value and INDEX has been changed!");
        console.log("Index: ", $w('#dropdown1').selectedIndex);
    });
});

And some more infos for you.

Here…
xxx | My Site 5 (russian-dima.editorx.io)

…you can see the live-example. By using F12 on your keyboard, you also can open the LIVE-SITE-CONSOLE in your BROWSER (google-chrome or microsoft-edge for example)

You click onto F12-keyboard-button and the console of your browser will open (maybe you still will have to navigate to CONSOLE) → click on → CONSOLE.

Now do some changes inside your dropdown and see what happens in the CONSOLE of your Browser.

BTW: Of course you have first to publish your website, before you can see your LIVE-WEBSITE and the related console-logs on the browsers console.

Furthermore, i do not understand why you got no errors on your screen, when testing my code, because my code have had syntax-errors and also the ID of the dropdown was not really correct.

ID-Error ----> $w(‘#dropddown1’).onChange(()=>{
Syntax-Error: → console.log("Index: ", $w(‘#dropddown1’).selectedIndex);

This 2 errors were inside my first posted code.
Later the syntax-error was corrected in the second posted code, but still the element-ID was not really correct.

But ok, i don’t want to overload you to much, let’s go back to your own ERRORS.

You are using this one…

export function button22_click(event) {
    if (($w("#dropdown1").value === "option1").wixWindow.openLightbox("lightbox1"));
    if (($w("#dropdown1").value === "option2").wixWindow.openLightbox("lightbox2"));
    if (($w("#dropdown1").value === "option3").wixWindow.openLightbox("lightbox3")); 
}

My comment on this was…

DO NOT USE EXPORT-FUNCTIONS.
Yes it is possible to use them, but not recommende.
There is a big difference between my used coding-style and yours.
You always have to connect your buttons additionaly through the PROPERTY-PANEL.

Using my code this action is not needed to be done.
It often happens that someone opens a post, and describes his issue as following…

“Hello i have a problem with my buttons!”
Yesterday everything worked well, but i did something and nothing works anymore and i don’t know what happened".

And all what happened was just a broken connection between PROPERTY-PANEL and your/his CODE!

This is just one of many reasons WHYYOU SHOULD NOT USE EXPORT-FUNCTIONS.

And i also wrote something about generating the code a more direct style…
…and you got even a code-example… see pic…

This was the code-line you have had to add to your already existing code, which would look something like…

import wixWindow from 'wix-window';

$w.onReady(()=>{
    $w('#dropdown1').onChange(()=>{
        console.log("Dropdown-Value and INDEX has been changed!");
        console.log("Index: ", $w('#dropdown1').selectedIndex);
        wixWindow.openLightbox("lightbox"+$w('#dropdown1').selectedIndex);
    });
});

As you can see on the very top we have also imported the right API

import wixWindow from 'wix-window';

Now inspect the following code-line, what does this code-line do ???

wixWindow.openLightbox("lightbox"+$w('#dropdown1').selectedIndex);

END-RESULT: (This pice of code should normaly be the solution for your question/issue).

A DIRECT DROPBOX-SWITCH, OPENING CORRESPONDING LIGHBOXES ON VALUE-CHANGE.

import wixWindow from 'wix-window';

$w.onReady(()=>{
    $w('#dropdown1').onChange(()=>{
        console.log("Dropdown-Value and INDEX has been changed!");
        console.log("Index: ", $w('#dropdown1').selectedIndex);
        wixWindow.openLightbox("lightbox"+$w('#dropdown1').selectedIndex);
    });
});

Or even a better version…(without console-logs)…

import wixWindow from 'wix-window';

$w.onReady(()=>{
    $w('#dropdown1').onChange(()=>{     
        let selIndex = $w('#dropdown1').selectedIndex;      
        wixWindow.openLightbox("lightbox"+selIndex);
    });
});

Now jump one more time onto the example-page and do some testings.

QUESTION:
Which elements are needed to reconstruct this example, to get it to work using the shown code?

ANSWER:

1x DropDown
1x or more LIGHTBOXES

CODE by Velo-Ninja

EDIT: CONSOLE-LOG inside of Microsoft-EDGE-BROWSER…

And indeed!!! → There is no “lightbox0” <— because i never created it in my example

.

Have fun.

raygrewe · October 24, 2022, 8:59pm

Figured out the code for someone that may need it in the future:

import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
$w ( ‘#button22’ ). onClick (() => {
if ( $w ( ‘#dropdown1’ ). value === “Option1” )
( wixWindow . openLightbox ( “lightbox1” ))

    **if**  ( $w ( '#dropdown1' ). value  ===  "Option2" ) 
        ( wixWindow . openLightbox ( "Lightbox2" )) 

    **if**  ( $w ( '#dropdown1' ). value  ===  "Option3" ) 
        ( wixWindow . openLightbox ( "Lightbox3" )) 
})

});

Topic		Replies	Views
Dropdown List to Open Correct Lightbox HELP! Ask the community code , question	1	134	November 26, 2020
selectedIndex by buttonId Ask the community code , wix , question , wix-editor	3	57	March 26, 2024
Opening a Lightbox not working Ask the community code , question	3	1666	December 16, 2022
How to load light boxes from a dropdown selection Ask the community code , question	5	430	August 21, 2019
Help !!! Ask the community code , question	1	64	June 19, 2023

[SOLVED] Logic for Drop Down + Button

Related topics