Newbie question on local storage variables

[Peter Viglietta]

Hello,

I'm building a very simple app for my dating site where users log in, indicate their location, and then post a message that other users can see.

I've imported a csv file of all the US Cities and states, into a collection called Cities. The user logs, in, searches their city, then either creates a post or views posts. My plan is that when user makes a post, one of the columns in the Posts collection will be CityID. That way, when users want to view other people's posts for their city, they indicate what city they're in, and the 'View Posts' page runs a service that queries all posts that have that CityId. Is there a way I can use a local storage variable so that the user gets a prompt and chooses 'Brooklyn, NY', and then at the next page, when they write their post and save it, the database service that creates the row in the Posts table looks at whatever city they chose on the previous screen, and puts in the CityID?

[Bad Addy]

localStorage at the moment works like any HTML5 development.

prelocalStorage.setItem('cityId', value);/pre

Or you can create it at run time using the Click event to the next page and load the variable. You would also need to add the 'cityID' to your Data tab for localStorage so you can easily map it.

When the users taps to the next page, this should fire before the navigateTo is fired. Or you can call it in JS using:

prelocalStorage.getItem('cityID');/pre

[Peter Viglietta]

Hey, thanks for the response. So I added the local storage variable and bound it to the component (the city they tap), and then I edit the mappings of the service that creates the post, and under the request parameters I put the local storage variable 'CityID' that I created as a click event. But this didn't work.. it didn't create the row in the Posts collection. How do I indicate that it's only the ID of the row in the Cities collection that I want to show up in the CityID column in the Posts collection. Sort of like foreign key in SQL..?

[Bad Addy]

if you look in browser console and check under 'resources' whether or not the variable is saved. If the variable is saved under 'cityID' once you click, then you no the bounding has worked.

If it has worked, and you can see it, then as long as the mapping is correct from the localStorage in the Data tab, to the service parameter, there is no reason for it not work.

Check also, while testing within the browser console, the 'network' tab and see what the server is sending, if the mapping is incorrect, you should see a empty item under payload "cityID'. This would suggest the mapping is not working.

With these two checks you should be able to debug ?

[Peter Viglietta]

Still not working.. let me explain my exact setup:

The user gets to the 'city search' screen and types the name of the city in the search field, and hits search
They get back a list of cities (from the Cities collection) that match the name they typed. At this point they have to choose a city.
When they click on their city, I need it to store the ID of that row in the cities table as a local storage variable 'CityID' to be used in subsequent screens.

So, the collection is called 'Cities', the column is called _id, and the name of the local storage variable needs to be 'CityId'.

I tried doing the click event, but that didn't work- it doesn't seem like there's any way to indicate in the click event that it's only the ID of the record that you want to store as the LS variable..?

Thanks for any help!

[Bad Addy]

How have you mapped the _id of each city in the list, I assume you have mapped to a list component ? If you are using a service to populate the list, based on the users input, you would have mapped the name column to the list Label, but you would also have to add the _id to the same component, so when the user clicks, its then saved to the LS.

On the response of the service that brings in the cities to click, you add the _id to element of the component like this:

Notice the blue AddJS button, in there you need this:

This loads the _id into each repeated element with the correct _id. To get it back you would do this:

This saves the _id into storage once a city is clicked with the correct _id from the collection.

Hope that helps ?

[Peter Viglietta]

I have the city names mapped to a Label within a Grid component. In my screenshot, mobileLabel21 is the cityname (mobilelabel22 is the state abbreviation). Is this how I should be doing it? I don't see anywhere in your screenshot where the _Id is mapped to component?

[Bad Addy]

The first two screen shots is where I save the _id. If you look at the code:

preelement.attr('selectedid', value._id);/pre

now, the element is a grid row, and I am adding a attribute 'selectedid' Because of how its mapped, value holds everything brought back from the query. So 'value._id' is saving the _id to a new attribute called 'selectedid'.

You need, in the your screenshot, is to add the localStorage 'cityID' and leave it blank, so in the createObject service you can map it.

[Peter Viglietta]

I think I'm still doing something wrong here? When I do it like you said, the CreateObject service puts the City in the column that's ultimately supposed to hold the CityID. So the City in this screen shot is getting saved as the LS Variable somehow?

I tried mapping the _Id into the label component, and that made it so that the LS variable WAS the _Id, like this:

...but it also made it so that in the App, the CityID displays where the City name is supposed to display

I used the JS you said to use on the Label component..

and I do already have 'CityId' as a local storage variable, and I put it in the JS for the click event when the user clicks on a city, like this:

setVar('CityId', $(this).attr('selectedid'));

[Bad Addy]

If you look at my example, the code is on the element thats at the head of the array.

So you put the code on mobilelabel_21, that code needs to be on mobilegrid_15 instead.