How to save the state of AJAX application using jQuery

Question

I am just trying to dip my toes in this Ajax thing. I have a very basic question

I have seen the UI plugin(http://interface.eyecon.ro/docs/drag) for jQuery, where you can drag and drop frames, stretch things, animate etc. So basically you get all the desktop features right in your web application.

In the desktop world, you can save the state of the objects to a file but how do you save the state of the manipulated objects in jQuery.

For e.g. If I drag a frame in jQuery, or stretch the borders of a div element, how do I save it to a file on the server so that next time, when I open, it remains modified?

Answer 1

Collect the state into an object, serialize it to JSON, do an HTTP POST using AJAX to a script on your server which saves it appropriately.

Load it with the reverse method (you can skip the AJAX and print the JSON straight into your page as it loads though)

Answer 2

Hi RoBorg, Thank you for your answer. Need some more clarification. How do we collect the state of the object? Does jQuery have api to get the current size and position of the DIVs?

Answer 3

Yes Nilesh - the height() and width() methods. I'm not aware of a native method that provides positional data, although there may well be a plug-in; failing that, some raw javascript should suffice some raw javascript should suffice.

Answer 4

Thank you guys. I think I was not explaining clearly. Persistence was the keyword that I missed in my question. here is a link I found http://www.codeproject.com/KB/webforms/JQueryPersistantDragDrop.aspx