How to save from a Listbox?

[kbdavis07]

Hi,

I have a webpage were it saves the contents of two textboxes:

FirstName
LastName

Into the ListBox.

Using jQuery statement:

$listbox.append($('').attr('value', $textbox.val()).text(self.FullName));

I tried replacing "Form" with option and select did not work.

I looked at http://sisyphus-js.herokuapp.com/#interaction and it looks like it is possible but for some reason it is not working for me.

//Save All of Form Data to HTML5 Local Storage <-- This works, but it is also hard coded html
$(function () { $("form").sisyphus(); });

//Save All names from Listbox to HTML5 Local Storage  <-- Does not work, option is generated at runtime with jQuery.
$(function () { $("option").sisyphus(); });

Does having it generated in the DOM have any effect?

Thanks,
Brian Davis

[simsalabim]

I am sorry I am not quite following the problem. What is ListBox, anyway? If it is <select> than doing $listbox.append($('').attr('value', $textbox.val()).text(self.FullName)); does not seem right. Select has to have a set of options to choose from, and setting value of select is effectively the same as assigning an active option (choosing one of the select's options to be active).

You obviously do not have a list of options but generate select's values based on 2 <input type="text"/> which is weird. In case with selects the plugin implies that you already have select populated with options and it memoizes what option user selected last time.

[kbdavis07]

Sorry for the wrong term :)

I guess you can call it a multiple select dropdown menu?

Here is the generated HTML code:

<option value="0">Davis,Brian</option> <--- Need to save these to LocalStorage <option value="1">Jones,Tom</option> <--- Need to save these to LocalStorage

The User Supplied Name is added to the page when user enters in a First and last name to add to the list.

So on first load it is empty.

The Select list is just a container to "hold" the names in till they press the submit button.

In between the time of adding the names and pressing the submit button would like to hold all of the names they added to the container in LocalStorage.

This way if they leave the page or session times out it is still stored on the client side.

In that case when they return to the page the Select list will still contain all of the names that they had previously entered in.

With Sisyphus saving all of the form information was easy, just having issue with the select list saving to localstorage client side.

With this "Select" list I do not want to just save what the user had selected, but all of the

User Supplied Name

That are on the page.

So I am using the Multiple "Select" dropdown menu as just a container to hold user inputted names.

That is where I came up with the name "List Box" because that is how I am using it :)

Also that is the control that Asp.Net Web Forms have, but now I am using Asp.Net MVC which has a helper @html.ListBox

But, the helper generates the html code I provided above.

[kbdavis07]

Hi,

I am currently using the following:

//Save All of Form Data to HTML5 Local Storage
$(function () { $("form").sisyphus(); }); <--- This works but the form data is not generated in DOM

//Save All <option> tags to HTML5 Local Storage
$(function () { $("option").sisyphus(); });   <--- Does not work and is generated in DOM.

So does anything has to be done special for items being generated on the fly in the DOM?

So far working with a manual adding to Local Storage:

localStorage.setItem("FullName", self.FullName); <--- On "Add" button click

Would like to collect all of the on the page periodically and save that to LocalStorage like it does for the form data :)

[simsalabim]

Do you generate select's options dynamically?

[kbdavis07]

Hi,

Yes the HTML Option Tags are generated dynamically when the user enters in their First and Last name into two text boxes.

When page first loads the "Listbox" is empty.

There are none tags on the page at all.

Then user enters in "Members" to add to the group, which they add First and Last Name.

This can be any where from 1 to 100 or more "Members".

When the user enters in these "members" I want to temporary save them into HTML5 LocalStorage for just in case something happens, session times out (30 mins), they accidentally close the tab or browser and etc.

If that happens all they do is return to the page and continue where they left off.

When they are done they hit the submit button and all their data with list of "members" goes to the server to save.

HTML5 Local Storage is then cleared out.

[simsalabim]

Ok. So if the tab is closed and restored, you need to generate that set of select's options so select value can be set. Which in turn is done by users as their input generates select's options.

I'd say generating select's options dynamically is weird, but apart from that if you want to use the plugin to restore your select's value it should have options already generated. If you for some reason need to keep the existing logic and behavior and UI and UX you'll have to implement this emergency backup logic manually. How you'll design this functionality is completely up to you. Obviously, you need to save entire set of select options somewhere separately.

[kbdavis07]

Hi,

I agree with you that this logic is not the best :)

But, this is for a college course assignment and that is what the book is calling for :)

The localstorage part is not part of the assignment but adding it in as an extra and was just curious if I could get it to work for a set of option tags.

Another thing I think might be nice for the plugin is to save all of the data into one JSON string container with only 1 key.

Currently if you have a form with 5 textboxes you are putting on the client 5 different entries (keys).

Would be nice to just load it all up into one JSON string, and then when loading just retrieve from the JSON collection :)

But, the plugin is really simple and easy to use for "normal" forms so great job and keep up the great work!

[simsalabim]

Thanks! That's cool, closing this.