DOM and Javascript

Question

I let a user reconfigure the location of a set of rows in a table by giving them ability to move them up and down. The changes are done by swapping nodes in the DOM.

After the user has moved rows around, when I do a view source, I see the HTML in the original state (before the user made any changes).

Can someone explain why that is? My understanding was when we do any DOM operations, the underlying HTML will be changed as well.

EDIT: Does that mean on the server side, when attempt to get the state after user's changes, I will be able to get what I need? I am using C#/ASP.NET. Could it be because this is a HTML table (not ASP.NET Server control), that it's not maintaining the state of the changes?

Answer 1

When you view source, you're viewing the content that the browser downloaded initially. To see the current state, use a plugin like Firebug for Firefox or DebugBar for IE

Answer 2

It's just a matter of your browser not displaying the updated source.

There are a couple of add-ons for Firefox that will allow you to view the changes as they happen. I suggest trying Firebug. IE's Developer tools from MS have similar functionality, I believe.

Answer 3

@Your edit:

Unless you have some script that tells the server what the updated order is (i.e. javascript makes a call to a server side script, passing the new order to it), your server will not have any way of knowing what the user did.

Answer 4

To the second part of your question, it's not maintaining the state of those changes on the server side because the browser never sends that information back to the server. The only way that the server knows that changes have been made to the HTML is if you send information about the user's changes back to the server.

So, you could have the page make an AJAX call back to the server to let it know which changes have been made to the page, or you could use hidden form fields that store the meta information about the HTML (in this case the order of the table rows, which will be updated when the row order changes) and then have a submit button that POSTs the information about the changes that were made back to the server.

There's no way for the server to see the exact HTML modifications that were made to the DOM, you have provide it with that information by sending it back to the server.

Answer 5

Firebug's DOM view shows you the exact state it's rendered in at that moment. View source will not.

Answer 6

Re. your edit - no, you'll have to track the changes to the row order yourself.

I suggest you put an id on each row, then have some javascript on the submit button click that looks at the order of the rows at that time and puts a comma-delimited list of their ids into a hidden input field.

The contents of the hidden input will be sent to your server: parse that to determine the order of the rows.

Good luck!

Answer 7

Google Chrome has a feature where you can right click on an element and select "Inspect element" and it shows the runtime DOM.