How to import a dynamic value from a repeater to a form?

cristine · May 24, 2022, 4:28pm

Hi all,

Let me explain the process: recruiter goes to resume database, on a repeater. There is a button that opens a lightbox so he can send a text/SMS to the candidate. The moment the recruiter clicks on the button and the lightbox opens, the number he will text should appear on the PhoneInput field. This is the code I am using, but it´s not working. Can someone point me in the right direction? Tks!

import { session } from ‘wix-storage’ ;
$w . onReady (() => {
let value = session . getItem ( ‘value’ );
if ( typeof value === ‘string’ ){
$w ( ‘#PhoneInput’ ). value = value ;
}
})

CODE-NINJA · May 24, 2022, 8:09pm

Where is the related code for your LIGHBOX ?
Where is the related code for your REPEATER ?
Do you use a DATASET ? I do not see any…

$w('#dataset').onReady(()={ ... });

…code part inside your code.

The TYPE inside WixStorage is always —> a STRING!

This for if you want to store DATABASE-DATA inside wix-storage, you will have to use…

JASON.stringify(YouDataHere); ← will putt data into storage as string-data
JSON.parse(“StringDataHere”); ← will reconstruct your data back from given STRING-DATA.

cristine · May 24, 2022, 10:11pm

Hi Velo-Ninja,

thank your for the reply. So, here is the code for the repeater page :
$w . onReady ( function () {
$w ( “#dataset1” ). onReady (() => {
const item = $w ( “#dataset1” ). getCurrentItem ();
if ( item . copyOfCandidateResumeLink )
$w ( “#button3” ). link = “mailto:” + ( item . copyOfCandidateResumeLink )

})
})

import { session } from ‘wix-storage’ ;
$w . onReady (() => {
const item = $w ( “#dataset1” ). getCurrentItem ();
$w ( ‘#input1’ ). onChange ( event => {
session . setItem ( ‘value’ , $w ( ‘#input1’ ). value );
})
})

And here is the code for the Lightbox:

import { sendMessage } from ‘backend/twilioService’ ;

$w . onReady ( function () {

$w ( '#sendButton' ). onClick (() => { 
    **if**  ( validateForm ()) { 
        **const**  toPhone  =  $w ( '#PhoneInput' ). value ; 
        **const**  message  =  $w ( '#messageInput' ). value ; 

        $w ( '#successMessage' ). hide (); 
        $w ( '#errorMessage' ). hide (); 
        sendMessage ( toPhone ,  message ). then (() => { 
            $w ( '#successMessage' ). show (); 
        }). **catch** (() => { 
            $w ( '#errorMessage' ). show (); 
        }) 
    }  **else**  { 
        updateFormValidation (); 
    } 
});

});
function validateForm ( ) {
return $w ( ‘#PhoneInput’ ). valid && $w ( ‘#messageInput’ ). valid ;
}

function updateFormValidation ( ) {
$w ( ‘#PhoneInput’ ). updateValidityIndication ();
$w ( ‘#messageInput’ ). updateValidityIndication ();
}

import { session } from ‘wix-storage’ ;
$w . onReady (() => {
let value = session . getItem ( ‘value’ );
if ( typeof value === ‘string’ ){
$w ( ‘#PhoneInput’ ). value = value ;
}
})

What you are saying is that I need to add that database to my lightbox as well? Tks

CODE-NINJA · May 25, 2022, 12:36am

Will take a look tomorrow onto it. Today to late already (powerbank is empty)

CODE-NINJA · May 26, 2022, 9:01am

Well first of all → never use more then one → onReady() ← in your code, this could make some problems.

Second, before using DATASET, your DATASET must be ready first!

So resulting code for frontend would be…
//FRONT-END-CODE…

import {session} from 'wix-storage';

$w.onReady(()=> {
    // SAVING DATA INTO WIX-STORAGE (MEMORY-FUNCTION)...
    $w('#input1').onChange(event => {
        session.setItem('value', $w('#input1').value);
    });

    //The following happens when DATASET IS READY TO BE USED....
    $w("#dataset1").onReady(()=> {console.log("Dataset is fully ready, let's go");
        const itemData = $w("#dataset1").getCurrentItem(); 
        console.log("ITEM-DATA: ", itemData);
        if (itemData.copyOfCandidateResumeLink) {
            $w("#button3").link = "mailto:"+ (itemData.copyOfCandidateResumeLink);
        }
    });   
});

And all this code is doing is just getting some data out of MEMORY and set a link of type e-mail for a button, so if pressing this button it would open an e-Mail-field.

//LIGHTBOX-CODE…

import { sendMessage } from 'backend/twilioService';
import {session} from 'wix-storage';

$w.onReady(function () {
    let value = session.getItem('value');
    if (typeof value === 'string'){
        $w('#PhoneInput').value = value;
    }

    $w('#sendButton').onClick(()=> {
        if (validateForm()) {
            const toPhone = $w('#PhoneInput').value;
            const message = $w('#messageInput').value;

            $w('#successMessage').hide();
            $w('#errorMessage').hide();
            sendMessage(toPhone, message).then(() => {
                $w('#successMessage').show();
            }).catch(() => {
                $w('#errorMessage').show();
            })
        } else {
            updateFormValidation();
        }
    });
});

function validateForm() {
    return $w('#PhoneInput').valid && $w('#messageInput').valid;
}

function updateFormValidation() {
    $w('#PhoneInput').updateValidityIndication();
    $w('#messageInput').updateValidityIndication();
}

Where is located your send-button ???

$w('#sendButton').onClick(() => {
        if (validateForm()) {
            const toPhone = $w('#PhoneInput').value;
            const message = $w('#messageInput').value;

            $w('#successMessage').hide();
            $w('#errorMessage').hide();
            sendMessage(toPhone, message).then(() => {
                $w('#successMessage').show();
            }).catch(() => {
                $w('#errorMessage').show();
            })
        } else {
            updateFormValidation();
        }
    });

Without seeing your setup a little bit difficult to give a clear answer.

Also check if the 2 values arrives at back-end-code…

sendMessage(toPhone, message)

cristine · May 28, 2022, 8:58pm

Hi Velo-Ninja, thanks a bunch. The only information that I believe is missing is that there are 2 buttons on the main page, one for email (which is the “mailto”) and the other that takes the user to the lightbox (Called “sendsms”).

.
The lightbox is triggered once the “sendsms” button is clicked. See the lightbox below.

CODE-NINJA · May 31, 2022, 6:23pm

I went one more time through your code and i did not find any codepart, which opens a LIGHBOX. I must be blind!

The lightbox is triggered once the “sendsms” button is clicked. See the lightbox below.
Ok, first thing i do not see any “sendsms” button, but i assume it will be → " Send Text " with unknown button-ID out of my point of view.

I would suggest you to clear-up your code first, naming all your elements the right way.

What does mean the right way?

Naming your elements the right way in CODING-WORLD means, you do never use inside your code something like …
‘#button1’
‘#button21322’
‘#button9999’ … and so on!

Instead you use something like…
‘#btnViewRemsume’
‘#btnSendEmail’
‘#btnSendText’

[ btn stand for ? → yes, for → BUTTON ]

If you already would have used the mentioned button-IDs earlier, i maybe already would have understood your real problem much faster and easier, because extern CODER, would be able to read your code much better, by recognizing each of elements the easy way.

Another problem you have, it the fact that you surely use a mix of connected button-functions to dataset, and some functions which are handled by code.

For example, as already mentioned, nowhere inside your code can be found the command-line, wich opens the LIGHBOX!

This is not good! Why? → Because this way you are forced to use Wix-Storage.
Yes it is a solution, but there is another better way of how to send DATA between page and LIGHBOX and it is already integrated inside the LIGHBOX-API itself.
And this was not the only reason why not to mix CODE and PREDEFINED STUFF.
Either go the one way, or the other. Mixing both, sooner or later will end in chaos, errors or dead end.

Excerpt from the VELO-API…

/*************
2 * Page Code *
3 *************/
4
5import wixWindow from 'wix-window';
6
7export function openButton_click(event) {
8  wixWindow.openLightbox("MyLightBox", {
9    "pageSend1": $w('#pageSend1').value,
10    "pageSend2": $w('#pageSend2').value
11  })
12  .then( (data) => {
13    $w('#pageReceive1').text = data.lightBoxSend1;
14    $w('#pageReceive2').text = data.lightBoxSend2;
15  } );
16}

The same for REPEATER!
We can cleary see a REPEATER, but we do not see any CODE FOR REPEATER, yes because you use again a DATASET.

The way you go is possible, but could get complicated.

Ok, however, lets switch back to your issue…
Let us take the new button-IDs inside our code…

‘#btnViewRemsume’
‘#btnSendEmail’
‘#btnSendText’
‘#btnCalendar’

You recognize which buttons are meant , regarding your own pic ?

I think my first suggestion was wrong.

import {session} from 'wix-storage';

//----------------------------------------------------------------------------
//-------------------------PAGE-CODE------------------------------------------
//----------------------------------------------------------------------------
$w.onReady(()=> {
    // SAVING DATA INTO WIX-STORAGE (MEMORY-FUNCTION)...
    $w('#input1').onChange(event => {
        session.setItem('value', $w('#input1').value);
    });

    //The following happens when DATASET IS READY TO BE USED....
    $w("#dataset1").onReady(()=> {console.log("Dataset is fully ready, let's go");
        const itemData = $w("#dataset1").getCurrentItem(); 
        console.log("ITEM-DATA: ", itemData);
        if (itemData.copyOfCandidateResumeLink) {
            $w("#button3").link = "mailto:"+ (itemData.copyOfCandidateResumeLink);
        }
    });   
});

We will have to recode it!

But first, let us try to understand relationship between…
a) repeater
b) dataset
c) database

The DATASET is some kind of wire, which connects a repeater with a chosen databse. Only one database can be connected in same time.

So you have surely connected your database with the repeater using a dataset, in this case called → $w(“#dataset1”).

On the pic above we can see the results.

Your problem now is to get the related value out of the repeater, each time you click onto one of the buttons inside the repeater, to get the right selected data.

As already mentioned there are 2 different ways of how to achieve that!

using CODE
using DATASET-CONNECTION

See informatoin below (pic).

Delete your existing code and restart with the following one…

//----------------------------------------------------------------------------
//-------------------------PAGE-CODE------------------------------------------
//----------------------------------------------------------------------------
$w.onReady(()=> {console.log("Page is ready...");
    $w("#dataset1").onReady(()=> {console.log("Dataset is ready...");    
        $w("#btnViewRemsume").onClick((event) => {console.log("View-Resume clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendEmail").onClick((event) => {console.log("Send-Email clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendText").onClick((event) => {console.log("Send-Text clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });
    });    
});

OPEN THE CONSOLE, either inside Wix-Editor (on the very bottom of the screen), or in your local Browser (google-browser = F12 + console).

Do not forget to safe and publish your site first, if you want to use the console of your local browser.

Now do some actions inside your repeater.
Do you see some changes inside CONSOLE-PANEL ?

Now try to expand your code…

import {session} from 'wix-storage';

//----------------------------------------------------------------------------
//-------------------------PAGE-CODE------------------------------------------
//----------------------------------------------------------------------------
$w.onReady(()=> {console.log("Page is ready...");
    $w("#dataset1").onReady(()=> {console.log("Dataset is ready...");
        // SAVING DATA INTO WIX-STORAGE (MEMORY-FUNCTION)...
        $w('#input1').onChange(event => {
            session.setItem('value', $w('#input1').value);
        });
    
        $w("#btnViewRemsume").onClick((event) => {console.log("View-Resume clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendEmail").onClick((event) => {console.log("Send-Email clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendText").onClick((event) => {console.log("Send-Text clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });
    });    
});

Adding more functionalities…

import {session} from 'wix-storage';
import wixWindow from 'wix-window';


//----------------------------------------------------------------------------
//-------------------------PAGE-CODE------------------------------------------
//----------------------------------------------------------------------------
$w.onReady(()=> {console.log("Page is ready...");
    $w("#dataset1").onReady(()=> {console.log("Dataset is ready...");
        // SAVING DATA INTO WIX-STORAGE (MEMORY-FUNCTION)...
        //$w('#input1').onChange(event => {
        //   session.setItem('value', $w('#input1').value);
        //});
    
        $w("#btnViewRemsume").onClick((event) => {console.log("View-Resume clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendEmail").onClick((event) => {console.log("Send-Email clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        $w("#btnSendText").onClick((event) => {console.log("Send-Text clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });

        //------------------------------
        $w("#btnCalendar").onClick((event) => {console.log("CALENDAR clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
        });
        
        $w("#btnSendText").onClick((event) => {console.log("Send-Text clicked!");
            let $item = $w.at(event.context);
            let clickedItemData = $item("#dataset1").getCurrentItem(); 
            console.log("Clicked-Data: ", clickedItemData);
            console.log("DO WE WANT TO OPEN LIGHBOX HERE SENDING THE CHOSEN DATA TO LIGHBOX????);
            
            wixWindow.openLightbox("MyLightBox", {
                "value1": $w('#pageSend1').value,
                "value2": "My value2 to be sended to LB"
            })
           .then((data) => {console.log("DATA recieving back from LIGHBOX running...);
               console.log("Returned-Data: ", data);
                $w('#pageReceive1').text = data.lightBoxSend1;
                $w('#pageReceive2').text = data.lightBoxSend2;
           });            
        });
        //------------------------------
    });    
});

Try to go trough all your code one more time and take a closer look onto it.
Notice all changes and check all element-IDs.

Topic		Replies	Views
Help Passing Data From Repeater Into Dynamic Lightbox Ask the community code , question	1	259	June 28, 2019
Copy repeater text value into a input field Ask the community code , wix-forms , question	4	239	March 3, 2020
Dynamically fill mail from Lightbox data. Ask the community code , question	3	140	July 2, 2019
saving data from repeater Ask the community code , question	12	2170	March 28, 2020
How to get Item from dynamic Dataset to a Lightbox field Ask the community code , cms , wix , question	2	106	January 12, 2024

How to import a dynamic value from a repeater to a form?

Related topics