I have created my own site map where I connected each pin point (as a button) to display the house information in various tables on the right hand side (I had to use multiple tables to get the vertical view).
When I tested the site I noticed each table displays ALL information on the startup as a scrollable table. Is there any way I can set these values to null until the user selects the pin point they wish to view?
Hello Kourtney,
my question is —> why the he… are you using several tables to do this VIEW?
WHY YOU DO NOT USE JUST —> 1x REPEATER TO ACHIEVE THE SAME RESULT ???
do you have a tutorial on this?
//YOUR BUTTON
Hello again,
a took a second look at your little project and i recognized, that you even do not need a repeater.
How you can manage this issue?
Creating a database ( surely you have already one ).
Creating the FORM which will show the results ( already done by you ).
You have 27 Buttons or what ever element you choose.
Creating 27-actions like onClick or onMouseIn (mouseOver).
Now back to the CODE.
You just have to query one time your database, to get the data…
Your code should then look similar to this one…
import wixData from 'wix-data';
var DATA
$w.onReady(function () {
wixData.query("YourCollectionNAmeHere")
.find()
.then( (results) => {
if(results.items.length > 0) {
let firstItem = results.items[0];
let DATA = results.items
console.log(DATA)
} else {
// handle case where no matching items found
}
})
.catch( (err) => {
let errorMsg = err;
});
})
//YOUR FIRST BUTTON
export function button1_click(event) {
$w('#text1').text = DATA[0].title //<---column-1 (title)
$w('#text2').text = DATA[0].xxxxx //<---column-2 (???)
$w('#text3').text = DATA[0].yyyyy //<---column-3 (???)
}
//YOUR SECOND BUTTON
export function button2_click(event) {
$w('#text1').text = DATA[1].title //<---column-1 (title)
$w('#text2').text = DATA[1].xxxxx //<---column-2 (???)
$w('#text3').text = DATA[1].yyyyy //<---column-3 (???)
}
//YOUR THIRD BUTTON
export function button3_click(event) {
$w('#text1').text = DATA[2].title //<---column-1 (title)
$w('#text2').text = DATA[2].xxxxx //<---column-2 (???)
$w('#text3').text = DATA[2].yyyyy //<---column-3 (???)
}
//and so on.... till button 27
How it works?
When the page is ready, a query of your database will be created.
Then every time when a button will be clicked, the right indexed (—> [0], [1], [2], and so on) data will be pulled out of “DATA”.
All your text will get the right value…
text1 = DATA[current selected index/database-row].tile
text2 = DATA[current selected index/database-row]. …<—put in here your database, coulmn-data.
text3 = DATA…
text4 = DATA…
text5 = DATA…
text6… and so on, as many as you need.
@russian-dima I’m still having trouble replacing the text values as I am getting an error “not a valid selector”.
Could you please give an example of how mine should look given the dataset provided. It is called dataset1. The field key is the same as the field name. Does the sort affect the index?
Much appreciated.
Take a look at this example here…
https://russian-dima.wixsite.com/meinewebsite/map
This is how it works.
You have just to connect all your 23-buttons with the CODE.
Buttons-IDs are —> “BTN4”, “BTN5”, “BTN6” … and so on…
This code identify the right button when hovering over the current button, and selects the right data from database.
You can EXPAND this code and add new functions to it…
For example:
-What shall happen when NO-DATA existing connected to a pressed button?
This function could be added, or several other ones.
An example of added new functions to ths code, you can see on the “PIC-EXAMPLE”
import wixData from 'wix-data';
var DATA, correctionFactor=-3
$w.onReady(function () {
wixData.query("Site-Plan")
.find()
.then( (results) => {
if(results.items.length > 0) {
let firstItem = results.items[0];
DATA = results.items
console.log(DATA)
} else {
// handle case where no matching items found
}
})
.catch( (err) => {
let errorMsg = err;
});
})
export function BTN4_mouseIn(event) {let currentData = 0; xxx(currentData)}
export function BTN5_mouseIn(event) {let currentData = 1; xxx(currentData)}
export function BTN6_mouseIn(event) {let currentData = 2; xxx(currentData)}
export function BTN7_mouseIn(event) {let currentData = 3; xxx(currentData)}
export function BTN8_mouseIn(event) {let currentData = 4; xxx(currentData)}
export function BTN9_mouseIn(event) {xxx(9)}
export function BTN10_mouseIn(event) {xxx(10)}
export function BTN11_mouseIn(event) {xxx(11)}
export function BTN12_mouseIn(event) {xxx(12)}
export function BTN13_mouseIn(event) {xxx(13)}
export function BTN14_mouseIn(event) {xxx(14)}
export function BTN15_mouseIn(event) {xxx(15)}
export function BTN16_mouseIn(event) {xxx(16)}
export function BTN17_mouseIn(event) {xxx(17)}
export function BTN18_mouseIn(event) {xxx(18)}
export function BTN19_mouseIn(event) {xxx(19)}
export function BTN20_mouseIn(event) {xxx(20)}
export function BTN21_mouseIn(event) {xxx(21)}
export function BTN22_mouseIn(event) {xxx(22)}
export function BTN23_mouseIn(event) {xxx(23)}
export function BTN24_mouseIn(event) {xxx(24)}
export function BTN25_mouseIn(event) {xxx(25)}
export function BTN26_mouseIn(event) {xxx(26)}
export function BTN27_mouseIn(event) {xxx(27)}
function xxx(currentData){
console.log(currentData)
console.log(DATA.length)
let inversedData = (DATA.length-currentData-1)
console.log(inversedData)
$w('#data0').text = DATA[inversedData].state
$w('#data1').text = DATA[inversedData].title
$w('#data2').text = DATA[inversedData].size
$w('#data3').text = DATA[inversedData].coverage
$w('#data4').text = DATA[inversedData].floorAreaRatio
$w('#data5').text = DATA[inversedData].height
$w('#data6').text = DATA[inversedData].buildingLine
$w('#data7').text = DATA[inversedData].price
$w('#image').src = DATA[inversedData].image
}
Surely you could also improve your code. It is still not perfect 
, but this will be your work 
EDIT: only the first 5-Buttons work right now.