I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.

Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.

The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.

I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.

Is there a better way?

I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.

Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.

The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.

I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.

Is there a better way?

• javascript
• jquery
• dom

2 Answers 2

legenden - there are a number of possible solutions to this, I would check out these history plugins for one:

• History Remote
• jQuery History plugin
• Deep Linking plugin

They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.

You need to manage history yourself if you want things to work in this way. You need Really Simple History.