1

I am looking for a component/framework that has the the ability to serialize/re-hydrate the elements, or UI components upon the next page view. Something analogous to $.serialize() but for an element's properties (examples: visibility,width, top, left ).

All the functionality in jQuery is there to do this manually, but I am looking for a framework that has explored the problems/pitfalls of this functionality better than I have to date.

Server side I am using asp.net, but it is really the client-side functionality that I am looking for. I expect the actual state to be persisted in a cookie, or more persistent manner on the server.

I realize the functionality I am looking for is implemented in web parts. I am hoping get a light-weight framework to work with. I am not too excited about investing in web parts.

An example of what I am trying to achieve: I would like to create a page with 5 to 10 divs, laid out in a grid-live fashion. A dashboard-like UI. there is a default layout, but users can hide some areas & expand others to get the best view of the data that they care about. Aside from just divs, There may be other widgets: tabs, accordions, ect. They do not need to be, but lets assume the UI is powered by jQuery UI. The next time the user logs in, I should be able to restore the state of the page by the user.

Before I begin working on a custom functionality, I want to make sure that I am not re-building a wheel.

brian chandley
  • 1,276
  • 1
  • 10
  • 20
  • Just to get a better understanding of what you're asking, you're looking for a javascript UI framework that automatically saves an object's state? Every object's state? – NT3RP Nov 16 '11 at 17:43
  • @NT3RP Every Object's state seems like too much to ask for. Lets narrow it down to basic position & visibility... and my imaginary framework would would be extensible enough to allow me to define how to save visual state on something like an Accordion widget.. – brian chandley Nov 18 '11 at 00:25

3 Answers3

2

You may wish to look at knockout.js, it's a Model-View View Model javascript framework.

It handles things like syncing DOM elements properties to a model.

Here is the homepage: http://knockoutjs.com/

It has guidence on loading and saving via JSON: http://knockoutjs.com/documentation/json-data.html

However i'd reccomend doing the interactive tutorial first, as it really shows of it's power and will help you gather whether it's suitable for your problem: http://learn.knockoutjs.com/

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • This is a compelling Library, and I have wanted to use it. I would not initially thought it would help, but as I went through the tutorials, if I though about the problem a little differently.. perhaps. The main strength is that is provides the ability to work at a higher level of abstraction. – brian chandley Nov 23 '11 at 02:02
0

Or you could save the state within your database so it's stored with the users session, or you could create some client side code that store's the state within a cookie on the client's machine

Here's a similar example of the second option, to store it within a cookie

Jquery - save class state for multiple div #'s to a cookie?

and the code provided by the post: http://pastebin.me/d99bd40618a7b9e2bd88c40cee777f5f

Community
  • 1
  • 1
Manuel van Rijn
  • 10,170
  • 1
  • 29
  • 52
  • Thanks for your suggestion. I began working directly with cookies, and I found I was running into low level problems when the problem I was trying to solve was a high-level one. – brian chandley Nov 23 '11 at 02:04
0

Check the PersistJS library http://pablotron.org/?cid=1557

It has lot of features

It currently supports persistent client-side storage through the following backends:

  1. flash: Flash 8 persistent storage.
  2. gears: Google Gears-based persistent storage.
  3. localstorage: HTML5 draft storage.
  4. whatwg_db: HTML5 draft database storage.
  5. globalstorage: HTML5 draft storage (old spec).
  6. ie: Internet Explorer userdata behaviors.

  7. cookie: Cookie-based persistent storage.

    • globalStorage: Firefox 2.0+, Internet Explorer 8
    • localStorage: development WebKit
    • openDatabase: Safari 3.1+
    • userdata behavior: Internet Explorer 5.5+
Nitin Sawant
  • 7,278
  • 9
  • 52
  • 98
  • I think the storing the information is not the real problem. He would like to save the elements states. – ComFreek Nov 22 '11 at 18:13
  • Thanks for the suggestion. I was not aware of this lib. It is powerful. however, client side robust persistence is not my main issue here. server side DB will be where this is saved ultimately. – brian chandley Nov 23 '11 at 02:09