Saving element position and size (JQuery ui resizable and draggable)

Question

Hi, I'm new to jquery and even javascript. I'm trying to create a system where you can edit very simple, static page by logging in and just dragging and resizing divs. The system works to the point where you get to edit the site, but the problem is how to save the coordinates and sizes of the divs.

The system doesn't use mysql, since the login is just for the site author. I'd also like to try to not require javascript to just view the page (get the coordinates and sizes from a file via php).

So, basically I need a way to check div width, height, left and top and store them into a file when the author hits the save-button.

Answer 1

You could store the variables in a cookie on the user's machine (jQuery doesn't have native cookie support, but this plugin gives it to you).

However, that requires Javascripw, which you mention that you don't want to require. However, if you want the user to be able to drag modules on a page around, then you aren't going to be able to do this without the aid of js.

If you do want to store this data server-side, then all I can suggest short of using a database is to store them in a file-based cache.

Answer 2

Use PHP Serialisation to store the data in serialised arrays and serve them to your javascript via AJAX in JSON (JavaScript Object Notation).

That way you can do:

$s_my_data = unserialize(file_get_contents($s_my_filename));
$s_my_json_data = json_encode($s_my_data);

If you read this in via AJAX you will be able to access it like a JavaScript object, e.g:

myObject.myProperty

Hope this helps ;)