Step-By-Step [User Input, Dataset, Gallery output] need help

mhgeneric · December 20, 2017, 5:38am

First of all thank you all in advance for assisting me here as you all are doing a great job helping out so many people here. I been reading quite a lot and followed almost all the post here in this wix code forum.

Please help with step by step codes (to help me currently and for future newbies like me) for my requirements. Any suggestions to help improve way of coding or design would be much appreciated.

My objective is to retrieved user input (e.g. Event/title, bibNumber, firstName, etc…), output to a list/table based on the user input and when user selected the row in the output list/table the system will display the large image (most likely in another container?) of the results (field name is “photo”) from the list/table.

Current Issues :

Main issues is how to code to retrieve the image to display full size image either as individual image display on the same page OR as a collection of images like gallery that matches user input. Appreciate if you can tell me the code to achieved this result.
How to code efficiently multiple search (several user input field) and output results accordingly to the list/table. Search using EventName and bibNumber…and display the results. How to code using filters or contain statement? I tried but not getting successful results.

2a) How to have a list drop down of search input field …e.g. Event name have drop down list to select from instead if user enter the field name.

Having user input added as a line in my Database (…) which don’t want as need to clear the live Database manually.
How to align (centre, left, etc…) fields in the list/table.

Below are my simple code so far and it is working but having a slight issues.

Database updated below with every user input which don’t want. Most likely due to my dataset setting Mode as “Write-only”. Any workaround for this?

roi-bendet · December 20, 2017, 4:33pm

Hi mhgeneric,

First of all thank you for appreciating our work!

About your first issue, can you be more specific ? What is the scenario ?
I assume that a dynamic page will be useful.
here is an example of how to handle search with user input field

	import wixData from 'wix-data';
		
		wixData.query('databaseCollection')
		.contains('FieldKey', $w('#yourUserInputField').value)
		.contains('OtherField' ,$w('#someOtherUserInputField').value)
		.find()
		.then((results) => {
			const foundItems = [];
			if ($w('#yourUserInputField').value) {
				results.items.forEach((item) => {
					if (item.FieldKey1.toLowerCase().includes($w('#yourUserInputField').value) || item.FieldKey2.toLowerCase().includes($w('#yourUserInputField').value)) {
						foundItems.push(item);
					}
				});
			}
			$w('#yourTable').rows = foundItems;
		})
		.catch((err) => {
		let errorMsg = err;
		});

example of how to set Table columns

	$w('#yourTable').columns = [{
		"id": "col1",
		"dataPath": "FieldKey1",
		"label": "what ever you like",
		"visible": true,
		"type": "string"
	}, {
		"id": "col2",
		"dataPath": "FieldKey2",
		"label": "another what ever you like",
		"visible": true,
		"type": "string"
	}];

2a. You can use the same logic above for your drop-down menu and place it right bellow the user input field in hidden mode. When you start typing it will show up with the results of your search. (use onChange event in the user input field).

What do you mean by don’t want as need to clear the live database manually ?
On table layouts you can choose “Content alignment”.

Good luck!
Roi

mhgeneric · December 21, 2017, 7:01pm

Hey Roi, many thanks for the fast reply and wix code solution. Appreciate again if you can assist with my issues below.

I like to displayed the larger image once the user select the results from the list output table either on the same page or new page popup (how can i achieved this with dynamic page?). Need your sample code.
Not getting any results retrieved after entering both input value as followed the code given by you. Must be some syntax or setup error?
Have this warning: “Wix code SDK Warning: The link parameter that is passed to the link method cannot be set to null or undefined.”

Thank you again.

My code is:

import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
export function searchButton_onClick() {
wixData.query(‘WixRunningEventsDB’)
.contains(‘title’, $w(‘#input1’).value)
.contains(‘bibNumber’ ,$w(‘#input2’).value)
.find()
.then((results) => {
const foundItems = [];
if ($w(‘#input1’).value) {
results.items.forEach((item) => {
if (item.FieldKey1.toLowerCase().includes($w(‘#input1’).value) || item.FieldKey2.toLowerCase().includes($w(‘#input2’).value)) {
foundItems.push(item);
}
});
}
$w(‘#table1’).rows = foundItems;
})
.catch((err) => {
let errorMsg = err;
});

$w('#table1').columns = [{ 
	"id": "col1", 
	"dataPath": "FieldKey1", 
	"label": "Event Name", 
	"visible": true, 
	"type": "string" 
}, { 
	"id": "col2", 
	"dataPath": "FieldKey2", 
	"label": "Bib Number", 
	"visible": true, 
	"type": "string" 
}];

}

admin-23 · December 24, 2017, 4:49pm

Hi,

You can use a lightbox for that. Trigger the click by the onCellSelect event and pass the image url using the open lightbox function
In the lightbox code, receive the data passed by the page function to display the image.

You can see a code sample below. It uses a button to imitate the click event and passes the lightbox some image url.

Page code:

import wixWindow from 'wix-window';

let imageUrl = 'https://static-wix-blog.wix.com/blog/wp-content/uploads/2015/06/07104043/5-Things-That-Will-Disqualify-You-from-Working-at-Wix4.png';
const lightboxName = 'Fullscreen';

export function button1_click() {
	wixWindow.openLightbox(lightboxName, imageUrl);
}

Lightbox code:

import wixWindow from 'wix-window';

$w.onReady(function () {
	let receivedData = wixWindow.lightbox.getContext();
	$w('#image1').src = receivedData;
});

We made some fixes to your code, see our inline comments.


import wixData from 'wix-data';


$w.onReady(function () {
	setTableColumns(); // add this function to set the columns
	$w("#table1").onRowSelect((event, $w) => { // in here to some thing when you select a row

		let rowData = event.rowData; // {"fName": "John", "lName": "Doe"}
		let rowIndex = event.rowIndex; // 2
	});
});
// this function sets the columns in the table
export function setTableColumns() {
	$w('#table1').columns = [{
		"id": "col1",
		"dataPath": "title",
		"label": "Event Name",
		"visible": true,
		"type": "string"
	}, {
		"id": "col2",
		"dataPath": "bibNumber",
		"label": "Bib Number",
		"visible": true,
		"type": "string"
	}, {
		"id": "col3",
		"dataPath": "photo",
		"label": "photo",
		"visible": true,
		"type": "image"
	}];
}

export function searchButton_onClick() {
	$w('#dataset1').onReady(function () {
		wixData.query('WixRunningEventsDB')
			.contains('title', $w('#input1').value)
			.contains('bibNumber', $w('#input2').value)
			.find()
			.then((results) => {
				const foundItems = [];
				if ($w('#input1').value) {
					results.items.forEach((item) => {

						// notice the item[FieldKey]
						if (item.title.toLowerCase().includes($w('#input1').value) || item.bibNumber.toLowerCase().includes($w('#input2').value)) {
							foundItems.push(item);
						}
					});
				}
				$w('#table1').rows = foundItems;
			})
			.catch((err) => {
				let errorMsg = err;
			});
	})

}

mhgeneric · January 3, 2018, 1:39am

Hi Ido, apology for late reply. Happy New Year to you and to all the support members at Wix Code Forum.

Thank you for your above solution. The search code is working great. However still having issues with Lightbox solution and ways to displayed the image in large display. My site page name is “TESTING3 Display Image”

Is there a way for Lightbox to display the database table image field (instead of displaying the predefine imageUrl link) that correspond to the user selecting the field in the result table using onCellSelect event ?
If so, may i know the code to achieved this.

Thanks in advance.
MH

mhgeneric · January 9, 2018, 4:20pm

Anyone able to reply this with some solution? Many thanks as currently stuck.

admin-23 · January 10, 2018, 1:05pm

Hello,

Displaying an image from a collection in a lightbox is achieved in a similar way.

In the table onCellSelect event, send the image ID or some string that identifies the correct image to show, then, on your lightbox page, use this information to query the collection and fetch the right image.

helenbatstone91 · January 12, 2018, 4:50am

Hi Roi,

I have used your guide to code my site. I am filtering my gallery with dropdowns.

My code:
import wixData from ‘wix-data’;

	wixData.query('Clothing') 
	.contains('menswearwomenswear', $w('#dropdown1').value) 
	.find() 
	.then((results) => { 
		const foundItems = []; 
		if ($w('#dropdown1').value) { 
			results.items.forEach((item) => { 
				if (item.FieldKey1.toLowerCase().includes($w('#dropdown1').value)) { 
					foundItems.push(item); 
				} 
			}); 
		} 
		$w('#gallery1').items = foundItems; 
	}) 
	.catch((err) => { 
	let errorMsg = err; 
	});

When i go to preview, the following error messages appear and the filter does not work.

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the CLOTHING page. To debug this code, open glg83.js in Developer Tools.
There was an error in your script
Error: The element selector function (usually $w) cannot be used before the page is ready
Wix code SDK error: The “src” property of the item at index 0 cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or “image://”.
Wix code SDK error: The “src” property of the item at index 0 cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or “image://”.

Sorry I am not familiar with code so please make your reply “dummy” proof.

Thanks!!

admin-23 · January 14, 2018, 12:48pm

Hello Helen,

This code should be inside an event or a function.
For example in a submit button’s onClick event:

import wixData from 'wix-data';

export function submitBtn_click(event, $w) {
	//User clicked the submit button
	wixData.query('Clothing')
		.contains('menswearwomenswear', $w('#dropdown1').value)
		.find()
		.then((results) => {
			const foundItems = [];
			if ($w('#dropdown1').value) {
				results.items.forEach((item) => {
					if (item.FieldKey1.toLowerCase().includes($w('#dropdown1').value)) {
						foundItems.push(item);
					}
				});
			}
			$w('#gallery1').items = foundItems;
		})
		.catch((err) => {
			let errorMsg = err;
		});
}

Learn how to interact with button events here

helenbatstone91 · January 14, 2018, 1:24pm

Thank you - what do you replace “event” with?
I want my gallery to show all products when the page loads and then show the filtered products once the user has selected from the dropdowns.

	export function dropdown1_click(event, $w) {

Thanks for your help!

Helen

mhgeneric · January 15, 2018, 11:39am

Hello Ido,

I try researching and experimenting but not much success. Would be appreciate if you can show me the wix codes for your suggestion using lightbox below. Thank you again for your time and help.

“Displaying an image from a collection in a lightbox is achieved in a similar way.
In the table onCellSelect event, send the image ID or some string that identifies the correct image to show, then, on your lightbox page, use this information to query the collection and fetch the right image.”

helenbatstone91 · January 16, 2018, 2:39pm

Hi Ido,

Still having issues with my coding on my page https://www.fitunahealth.com/clothing . This is the code I have currently:

import wixData from ‘wix-data’;

export function dropdown1_click(event, $w) {

//User clicked the submit button 
wixData.query('Clothing') 
	.contains('menswearwomenswear', $w('#dropdown1').value) 
	.find() 
	.then((results) => { 
		const foundItems = []; 
		if ($w('#dropdown1').value) { 
			results.items.forEach((item) => { 
				if (item.FieldKey1.toLowerCase().includes($w('#dropdown1').value)) { 
					foundItems.push(item); 
				} 
			}); 
		} 
		$w('#gallery1').items = foundItems; 
	}) 
	.catch((err) => {

let errorMsg = err;

});

}

I have highlighted the lines with error messages in the code page section in BOLD.
Line 1: parameter event is never used
Line 20: ‘errorMsg’ is unread

I have the following 4 error messages on preview and the dropdown does not filter my gallery:
Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.

Loading the code for the CLOTHING page. To debug this code, open glg83.js in Developer Tools.

Wix code SDK error: The “src” property of the item at index 0 cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or “image://”.

Please let me know how these can be resolved?

Thanks,

Helen

admin-23 · January 17, 2018, 1:56pm

Hello Helen!

First, the errors you are referring to are only warnings and should not cause your code to break.

Second, you can use the onChange event for your dropdown box to trigger the filter.
onChange fires every time the dropdown box is changed.

Make sure to click the dropdown > properties > Click the + icon next to onChange.
Doing so will automatically add the required code in your code panel:

export function dropdown1_change(event, $w) {
	//Add your code for this event here: 
}

Then simply add the filtering code:

export function dropdown1_change() {
	wixData.query('Clothing')
		.contains('menswearwomenswear', $w('#dropdown1').value)
		.find()
		.then((results) => {
			const foundItems = [];
			if ($w('#dropdown1').value) {
				results.items.forEach((item) => {
					if (item.FieldKey1.toLowerCase().includes($w('#dropdown1').value)) {
						foundItems.push(item);
					}
				});
			}
			$w('#gallery1').items = foundItems;
		})
		.catch((err) => {
			let errorMsg = err;
		});
}

This video might help you
Wix Code | How to Add Custom Interactions with JavaScript

Good luck!

helenbatstone91 · January 18, 2018, 12:36pm

Hi Ido,

Thank you.

I amended my code and on preview it still wasn’t filtering the gallery on changing the dropdown (the gallery just disappeared when I changed the dropdown).
I wanted to check all my codes align with my dataset values but now I have another issue. None of my datasets will open. This doesn’t matter so much for the “Clothing” dataset as I created it to test, but the “Help” dataset is in use on the site. Please can you advise why I cannot see them?

Thanks,

Helen

admin-23 · January 18, 2018, 1:24pm

Hi Helen,

You do not have a field by the name ‘womenswearmenswear’ in your Clothing collection.
In addition, you should change the query function to match the name of the collection. which is Clothing with an uppercase c.

helenbatstone91 · January 18, 2018, 3:44pm

Hi Ido,

Thank you - I have amended these points but still no luck. In preview mode, the gallery does not filter from changing the dropdown.

Do I need to connect my dropdown to the dataset as well? I have manually input the dropdown options which match what I have in the dataset.
Updated code:
import wixData from ‘wix-data’;

export function dropdown1_change(event, $w) {
wixData.query(‘Clothing’)
.contains(‘menswearWomenswear’, $w(‘#dropdown1’).value)
.find()
.then((results) => {
const foundItems = [];
if ($w(‘#dropdown1’).value) {
results.items.forEach((item) => {
if (item.FieldKey1.toLowerCase().includes($w(‘#dropdown1’).value)) {
foundItems.push(item);
}
});
}
$w(‘#gallery1’).items = foundItems;
})
.catch((err) => {
let errorMsg = err;
});
}

Thanks,

Helen

mhgeneric · January 18, 2018, 4:08pm

Hello Ido,

Can you give me some example code of how to achieved the following you mentioned. Many thanks again.

“…In the table onCellSelect event, send the image ID or some string that identifies the correct image to show, then, on your lightbox page, use this information to query the collection and fetch the right image.”

mhgeneric · January 24, 2018, 5:32am

Anyone able to help out with this? Sorry not very good at coding.

Need some example code on passing image files ID from table (using onCellSelect event) thru lightbox.

ANYONE please…thank you.

maxgstm · November 17, 2019, 8:18pm

Wix can you create something that we dont need to code in? or is this wordpress?
it’s been nearly 3 years since this was requested over this post. DEC 2017

maxgstm · November 17, 2019, 8:18pm

תזיזו את עצמכם שלכם שם בנמל.

Topic		Replies	Views
HELP WITH DATAQUERY! Ask the community code , question	2	108	August 9, 2019
SQL query similar functionality Ask the community code , question	1	158	January 23, 2019
search dataset not database Ask the community code , question	6	359	January 31, 2018
How to display txt and img from db? Ask the community code , design , question	3	129	November 13, 2018
Database search and display results Ask the community code , wix-members-area , design , question	16	10067	November 15, 2019

Step-By-Step [User Input, Dataset, Gallery output] need help

export function dropdown1_click(event, $w) {

let errorMsg = err;

Related topics