SOLVED - wix storage, transferring data between pages

Hi,

I have a little issue that i have been trying to solve, i was wondering if someone might be able to help? What i’m trying to do is get some fields pre-filled from the page they have selected.

So when they click #bookhere1 this will trigger the data from #price1, the button will direct them to the payment/details page and prefill the #pricetxt.
I’m looking to fill out as many of the details as possible but thought if I start with one, that should help me at least get started.

The code I have is below but is obviously not working.

import wixData from 'wix-data';

export function bookhere1_click(event, $w) {
	$w.onReady(function () {
        $w("#dynamicDataset").onReady(()=>{ 
            let itemObj = $w("#dynamicDataset").getCurrentItem(); 
        $w("#price1").text = itemObj.dateone.toDateString();
    }); 
}

I know i need to have code on both pages, but thought someone might be able to point me in the right direction.

Thanks in advance!

Stephen

Hi Stephen.

I think wix-storage might solve this problem.
You can store the data you want to pass to another page, and read it on that page in onReady section.

I think the session storage is good enough for this case.

Regards,
Genry.

Hi Genry,

Thank you for your response, I have managed to get some time to try and get back to solving this issue. This is an area that is new to me, and I’m finding a little tough to get my head around… would you mind helping me a little?

After the bookhere1_click
I would like the value of
#price1
#date1
#duration1
to be stored then applied to the new page in fields
#pricetxt
#datetxt
#durationtxt

So I have played around with the code and have come up with this on the category page

import {local} from ‘wix-storage’;

export function bookhere1_change(event, $w) {
local.setItem(“#price1”, “value”);
}

Then placed this in the payment page

import {local} from ‘wix-storage’;

let value = session.getItem(“#price1”); // “value”

How do I apply it to the new fields? Thank you in advance.

Stephen

maybe this would work on the new page:
$w("#pricetxt.value) = value;

Two things: if the above does not work, try #pricetxt.text. Other thing: you know that users might have turned off local storage in their browser. So if you rely on that, all fails. If you have the time, may be it is worth your while to investigate this:

  • prepare the link for the button by code, using a parameter, like {parh}/orderpage?courseid=34KJ2H34897DFGSFDG (where that silly number is its ID)
  • on the recieving end, use wix-location to get that last part (courseid=) with “query”
  • retrieve this item (it´s the row id of the collection) again from the db and display the data

This way, you don´t have to rely on local storage. I have not tried it out myself, just an idea.

Hi Stephen.

I see that when you store the value - you use ‘local’ storage, but when you read it - you use ‘session’ storage. Please try with using ‘session’ storage for both storing and reading the values.

Also to clarify, for the ‘key’ you can use any string, it is not necessary to use the ‘#’ sign.

Also when setting a value, I am not sure what ‘value’ you mentioning in your code. If the element name for example is price1 , then the value for the element to store should be $w(‘#price1’).text for Text element or $w(‘#price1’).value for TextInput element.

import {session} from 'wix-storage';
...
session.setItem('price1', $w('#price1').text); // for Text
session.setItem('price1', $w('#price1').value); // for TextInput

And when reading the item:

import {session} from 'wix-storage';
...
const price1 = session.getItem('price1');

Regards,
Genry.

Hi Giri and Genry,

Thank you for getting back to me. I have had a look through your thoughts and tried to implement the code from Genry, I think that the code is reading the value now, due to the code making sense and now no errors.
The area that is confusing me, is when trying to display the item on the new page:

import {session} from ‘wix-storage’;

const price1 = session.getItem(‘price1’);

How does the code know where to display the value on the new page? I’m trying to get it to display in #pricetxt so I’ve tried this:

import {session} from ‘wix-storage’;

const price1 = session.getItem(‘price1’, $w(‘#pricetxt’).value);

PS how do you get the code to display in the grey box?

Hi Stephen.

The code snippet I wrote was only to show how to store and retrieve the data to and from the session storage.

Now, once you read the data, you should assign it to the relevant component. So in your case this should be:

import {session} from 'wix-storage'; 
... 
const price1 = session.getItem('price1');
$w('#pricetxt').text = price1; // if the element is Text
$w('#pricetxt').value = price1; // if the element is TextInput

More info about the Text and TextInput elements and how you can interact with them via code can be found here:

Regarding how to show the code in grey box: you can select a portion of a text - and a popup with more selection options will be shown - you can then mark the section as code.

Regards,
Genry.

Hi Genry,

I must admit this is driving me a little of the wall! The reason I’m finding it hard is that I can’t get anything to happen so there isn’t any process of elimination… One issue I’ve come across is that if I put an on_Click event on the button then the ‘link’ that directs them to the new page doesn’t work? So I have read as much as my brain can take and have come up with the following code to try and get around this one also.

The frustrating part is that the code actually makes sense, but no results. Anyway the below code is to store the data

import {session} from 'wix-storage';

$w.onReady (function() {
    $w("#bookhere1").onClick ();
	session.setItem('price1', $w('#price1').text);
});

Then the code you provided to retrieve the data on the payment page

 import {session} from 'wix-storage'; 
 
 const price1 = session.getItem ('price1'); 
 $w('#pricetxt').text = price1; 

I have played around with using input fields instead of text fields and changed the text to value but still nothing seems to change

Hi Stephen. Your direction is correct.
You should add an onClick event on the relevant button in first page where you will store the information for the second page to read from. From my understanding in your site it is the button bookhere1 .

On you code you are calling an onClick method of the button, rather than defining it.

You can find a short demo of how to add and define events on UI elements in the following article: Velo: Reacting to User Actions Using Events | Help Center | Wix.com

Regards,
Genry.

Hi Genry,

Thanks for getting back to me.
This is driving me up the wall… it makes sense but I can’t get any results, I’ve been at it for days, reading through articles, videos but I can’t get it to do anything. I have amended the code, see what you think.
I was going to ask if you offer services for this? and how much it would be to write the code?

Here is what I have currently
PAGE 1

import {session} from 'wix-storage';

export function bookhere1_click(event, $w) {
	session.setItem('price1', $w("#price1").text); 
}

PAGE 2

import {session} from 'wix-storage'; 

const price1 = session.getItem ('price1'); 
$w("#pricetxt").text = price1; 

I’ve noticed on the API documentation that the retrieve code is:

import {session} from 'wix-storage';

let value = session.getItem("price1"); 
//: with my reference below
$w("#pricetxt").text = value;  

But I can’t get the above to work either… I appreciate this is becoming a little long winded, and you have already given me a lot of your time, if this is a service you offer, I don’t mind paying to learn the code, or to have it written as you have been very helpful!

Best wishes

Stephen

Can’t believe I actually sorted this one out! Thanks for all your help Genry, Very much appreciated!!

The code that worked is below

import {session} from 'wix-storage';  

export function bookhere1_click(event, $w) {
	session.setItem('coursetitle', $w("#coursetitle").text);
	session.setItem('priceOne', $w("#price1").text);
	session.setItem('durationOne', $w("#duration1").text);
	session.setItem('dateOne', $w("#date1").text);
	}
import {session} from 'wix-storage';  

export function coursetitle_viewportEnter(event, $w) {
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration1 = session.getItem('durationOne');
$w('#durationtxt').value = duration1; 
let date1 = session.getItem('dateOne');
$w('#coursestartdatetxt').value = date1;
let price = session.getItem('priceOne');
$w('#pricetxt').value = price;
}
1 Like

Hi Stephen.

Glad to hear that it works for you. I somehow didn’t receive a notification about your previous post.

Another alternative on how to initialize the values of the components on the second page, is to put the initialization code in the $w.onReady event.

E.g.:

$w.onReady(function () {
   // here comes the initialization code

});

Regarding my services - I offer my services here at the forum for free as part of me being an employee of WixCode R&D :slight_smile:

Good luck and best regards,
Genry.

Hi Genry, How did you set up the transition to the other page? The redirect I mean as with a on click event you cannot as well redirect

Hi mschuettke.

What functionality are you trying to achieve? On clicking a button - open another page?
Should the onClick event also do some custom logic, e.g. pass data to the target page?

Regards,
Genry.

I’ve been trying to do the same thing for days, and finally I found this post and the code works great. Thank you for sharing the workable code. I am so happy to see that the text appeared in the text field on the next page. I am however facing another problem, when the form is submitted on the second page, the autofilled value isn’t submitted to the database. Can I know what am I doing wrong ?

Thank you in advance

Hello everyone, I’m trying to create a login page and provide the ability to transfer data from one page to another. In the login page, it will check the database in order to see if the input email and password are the same as email and password stored in the database. After checking that, the input email that is equal to email stored in the database should be transferred into another page (main page).

Please find below the code in the login page:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
import {session} from ‘wix-storage’;

let userEmail;
let userPassword;
let user = wixUsers.currentUser;

$w.onReady( function ()
{ //TODO: write your page related code here…
$w(" #textErrors ").hide();
})

export function button1_click(event, $w)
{ //TODO: write your page related code here…
let inEmail = $w(’ #input1 ‘);
let inPassword = $w(’ #input2 ');
let transEmail = inEmail;
wixData.query(“loginDB”).eq(“email”, inEmail).find().then((results) =>
{
let resultCount = results.totalCount;
if (resultCount)
{
userEmail = results.items[0].email;
userPassword = results.items[0].password;
if (inPassword===userPassword && inEmail===userEmail)
{
session.setItem(‘transEmail’, transEmail.value);//Keep in mind, ‘item’ must be a string. wixLocation.to (/mainpage);
} else {
$w(" #textErrors “).show();
$w(” #textErrors “).text = “Incorrect email or password.”;
} } else {
$w(” #textErrors “).show();
$w(” #textErrors ").text = “Can’t find the user.”;
}}). catch ((err) =>
{
let errorMsg = err;
});
return inEmail;
}

export function button2_click(event) { //Add your code for this event here: }

Here is the code in main page:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import {session} from ‘wix-storage’;
let filteredEmailtxt;
let filteredEmailvle;
let filteredEmail;

$w.onReady( function ()
{ //TODO: write your page related code here…
console.log(filteredEmail, “here is the email being sent to filter”);
console.log(“Dataset is now filtered”);
//$w(" #transEmail ").hide();
});

export function button3_click(event)
{ //Add your code for this event here:
session.removeItem(“inEmail”);
session.clear();
}

export function trans_email(event, $w)
{
const transEmail = session.getItem(‘transEmail’); //Where result will be a string.
filteredEmail = transEmail;
}

However, the outcome is:undefined here is the email being sent to filter
So what did I do wrong here?

Hi Genry, thanks for all the help above. I am also trying to achieve the same functionality as you mentioned above, but when the data is passed the first time from page1 to page2, it does not show, however when again a different data is passed, it is then that the previous data is shown.

Also, all this happens when it is opened in a new window, and not in the current window.
Please Help

Code from Page 1
 

import {session} from ‘wix-storage’;

export function button1_click(event,$w) {
//Add your code for this event here:
session.setItem(‘firstname’, $w(‘#input1’).value);
}

Code from page 2

import {session} from ‘wix-storage’;
$w.onReady(function () {
//TODO: write your page related code here…

});

export function text13_viewportEnter(event,$w) {
//Add your code for this event here:
let firstname = session.getItem(‘firstname’);
$w(‘#text13’).text = firstname;
}

You probably have to add a timeout so that the input value is properly set. See the article Give the TextInput onKeyPress Function some time for more information.

Something like this:

export function button1_click(event,$w) {
    setTimeout(() => {
        session.setItem('firstname', $w('#input1').value);
    }, 10); // 10 milliseconds works for me, you might need more
}

Hi Stephen, I was hoping you could help me with this same/similar issue. I have a drop down list on my homepage (dropdown1) that I would like my users to select a Service from a list of 127 Services I have being pulled from a data set. I would like them to push a button (button8) below the drop down and redirect them to another page. On the other page I have a miltipage form I created using a slide show. I would like the selection the user made from dropdown1 on the homepage to appear in the first user input text box on my form. I need this to happen because I don’t want the form to be on the homepage but I need the original service selection from the dropdown menu to go to the same data collection in the same row as the rest of the form. I have tried everything. I wasn’t sure if for .value I have to actually write a string and include every single value in the drop down list. or if you just leave it as .value I really hope you can help me I have spent endless hours trying to figure this one out.

Thanks,

Bethany