Dropdown onChange on page, changes object in Header

Ask the community
,
1

I have containers in my header that I want to have shown or hidden depending on a selection in the dropdown. I have this code here;

export function Choices_onChange(event) {
	//
	if (event.target.value === "Option 1") {
		$w('#Box1').show();
	} else {
		$w('#Box1').hide();
	}
	//
	if (event.target.value === "Option 2") {
		$w('#Box2').show();
	} else {
		$w('#Box2').hide();
	}
	//
	if (event.target.value === "Option 3") {
		$w('#Box3').show();
	} else {
		$w('#Box3').hide();
	}
	//
	if (event.target.value === "Option 4") {
		$w('#Box4').show();
	} else {
		$w('#Box4').hide();
	}
	//
	if (event.target.value === "Option 5") {
		$w('#Box5').show();
	} else {
		$w('#Box5').hide();
	}
	//
	if (event.target.value === "Option 6") {
		$w('#Box6').show();
	} else {
		$w('#Box6').hide();
	}
}

Which works great if the containers are within the same page as the dropdown, but I would like to have the containers in the header, not the page.

What do I need to do to change the dropdown on one page, that’ll set which container is visible in the header? I feel like I’m also missing a save function to make sure the container “sets” for all visitors.

Purpose: Online Status Feature; Lets viewers know of current availability, such as online or offline and other variants.

2

Hi,

Did you try moving the containers to the header? The code should work out of the box.

3

I mucked up, I switched the page the dropdown was on and forgot to add the _onChange to it’s properties. It works like it should in the header.

The only issue I’m having now is getting it to “set” the status. Do I need to create a dataset for this? How would I go about setting it up to work with the dropdown and containers? Otherwise it just changes for the current user and not all visitors and changes back on refreshing the page.

4

All attempts are proving fruitless. Any ideas, anyone?

5

Can you explain a bit more what are you trying to do? Do you want to display something that updates in real time?

6

Yes, pretty much. Pick an option from the drop down and set it so it changes on the site for all visitors.

So far I’ve created a dataset with the options and connected it to a dropdown. And using the code above it displays the associated container when selected from the drop down.

But I don’t know what to do from there. I was thinking I would need a button, so I created a “set status” button.

7

Hi, one way to achieve live updates is to:

  1. Save the status in a collection
  2. Connect the status reflecting element to a dataset configured to use the status collection
  3. Refresh the dataset with a “setInterval” function.

For example, if the status text / container is connected to a dataset with ID “statusDataset”, you can just refresh it every 5 seconds:

setInterval(() => $w("#statusDataset").refresh(), 5000);

You can add this code to the “$w.onReady” block of your site code, so it will run on every page.
Let me know if it’s clear.

8

Hey there!
I was having a hard time with this so I set it aside and now I’m finally coming back to it. lol

So I figured out how get the status part to work! But I don’t think I can get it to refresh in the method you mentioned above. Everything is done through import wixData and I can’t find any refresh api examples beyond table and dataset.

Here’s my code. The status changes whenever someone navigates to a new area of the site.

import wixData from 'wix-data';


$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'Offline')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#OfflineBox').show();
	} 

	else {
		$w('#OfflineBox').hide();
	}
});
});

$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'Online Chat')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#OnlineChatBox').show();
	} 

	else {
		$w('#OnlineChatBox').hide();
	} 
});
});

$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'Online Cam & Chat')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#OnlineCamChatBox').show();
	} 

	else {
		$w('#OnlineCamChatBox').hide();
	} 
});
});

$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'Online Cam, Chat & InstaShows')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#CamChatInstaShowsBox').show();
	} 

	else {
		$w('#CamChatInstaShowsBox').hide();
	} 
});
});

$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'Skype InstaShows Available')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#InstaShowsBox').show();
	} 

	else {
		$w('#InstaShowsBox').hide();
	} 
});
});

$w.onReady(function () {
wixData.query('Online-Status')
	.startsWith('status', 'InstaShows & Live Chat')
	.find()
	.then( (results) => {
		let status = results.items;
		let firstItem = status[0];
		 	if (firstItem) {
		$w('#ChatInstaShowsBox').show();
	} 

	else {
		$w('#ChatInstaShowsBox').hide();
	} 
});

});

This works but did I unnecessarily put each query in it’s own onReady function?

9

Yep, you should have the in the same onReady() function.

Liran.

10

I had a feeling lol Thanks Liran!