Problem getting Javascript variable to hidden input value

Question

I'm trying to create a system where you can drag and resize divs (jquery ui) and then save the positions and sizes to a css file.

I already got the system working with one div, but now that I tried to update the system to support multiple divs, I ran into a problem.

The source: http://ezmundorf.110mb.com/problem.txt (It's ugly, but I'm pretty much just trying out how stuff works).

When I click the #update div the page goes blank and source for the page is only the form starting tag. The page is trying to do something since firefox is displaying the loading graphic.

If I remove the line the that writes the hidden input fields, I get to see the save button, yet still there's something wrong with the javascript since browser just keeps doing something.

I'm sorry for posting such a "fix this code for me" question here, but I don't know how to explain it without whole code and I couldn't find answer anywhere.

Answer 1

You can't use document.write after the page has finished loading without it overwriting the whole page, as you're seeing.

You should use .innerHTML on some container, for example:

$('myDiv').innerHTML = '<form>...</form>';

or use DOM methods:

var form = document.createElement('form');
var body = document.getElementsByTagName('body')[0];

body.appendChild('form');

Answer 2

You can't use document.write after the page has finished loading (e.g. in an event handler, including $(document).ready). Instead, you can use the jQuery method .html(val) to change the contents of an existing element, or insert new elements into the DOM with the other jQuery manipulation methods.