Connecting Database to Lightbox: Help with code bug that is affecting sort display.

Ask the community
,
1

Hi and thank you in advance to anyone who is kind enough to help a newbie coder. I have modified a code I found to connect a database with individual lightboxes and after a little tweaking it is working great, yay! …but

The issue I am having is that the code is affecting the sort setting I have setup with the database which is a simple A-Z sort when displaying the database. When the live page loads it most often flips the database sort from A-Z to Z-A when it is displayed live. Sometimes it doesn’t but most often it does. For reference, at the moment it should begin with the name Heather Burton.

Below is a link to the live site page I am working on along with the code I am using.

https://helloboygirl.wixsite.com/c21ll-2/agents

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
wixData . query ( “Agents” )
. find ()
. then (( results ) => {
$w ( #repeater1 ). data = results . items ;
})
. catch (( err ) => {
let errorMsg = err ;
});

    $w ( `#repeater1` ). onItemReady (( $w ,  itemData ) => { console . log (); 
        $w ( `#button1` ). label  =  itemData . contact ; 
        $w ( `#button1` ). onClick (( event )=>{ 
            wixWindow . openLightbox ( itemData . lightbox );   
        }); 
    });

});

2

It is not clear why you run a direct query (for the Agents collection) if you already have the repeater connected to a dataset.

3

Hi J.D. and thank you! As mentioned above i am a total newbie coder (but an experienced WIX user) and found this code on the forum:

The reason I am using code to achieve this functionality on the page is that when you use repeaters connected to a database it does not allow for connection to individual lightboxes (and lightboxes can not act as dynamic pages). For this reason I moved to coding it. So I believe that is why the code is running a direct query (for the Agents) collection. I hope that is clear and makes sense. (For reference each real estate agent will have there own light box that functions in this way.)

4

@hello431 You don’t need both of them (it’s just doing everything twice).
You should decide what you prefer - dateset (you can use dataset with code as well) or direct query.
DATASET OPTION CODE:

import wixWindow from 'wix-window';
$w.onReady(function () {
      $w('#dataset').onReady(() => {
        $w('#repeater1').forEachItem(($i, itemData) => {
            $i('#button1').label = itemData.contact;
        });
    $w('#button1').onClick(event => {
	const itemData = $w('#repeater1').data.find(e => e._id === event.context.itemId);
      wixWindow.openLightbox(itemData.lightbox);  
        });
    })
});

DIRECT QUERY OPTION (disconnect the dateset and delete it from the page):

import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(function () {
   wixData.query("Agents")
   .ascending('title')//or use other fields instead of 'title'.
   .find()
   .then((results) => {
       $w(`#repeater1`).data = results.items;
     })
    .catch((err) => {
       let errorMsg = err;
     });
    $w(`#repeater1`).onItemReady(($i, itemData) => {
       $i(`#button1`).label = itemData.contact;
     //assign other thing as well for example: $i('#text1').text = itemData.title; OR: $i('#image1').src = itemData.src;
     });
    $w('#button1').onClick(event => {
	const itemData = $w('#repeater1').data.find(e => e._id === event.context.itemId);
      wixWindow.openLightbox(itemData.lightbox);  
    });
})
5

@jonatandor35 Thank you J.D., that solved the issue! I appreciate you providing code for both options. It is now function correctly. Cheers to you my friend :slight_smile:

6

Hello, I’m new to coding, and I’m trying to do the same thing here. I’m not sure which parts of the code reference your personal datasets and lightboxes and which are just pure code. Also, do you just post this on the page with the repeater or do you need to put it in the lightbox and the repeater pages? Using the dataset system