I sent one question earlier about jQuery mismatch in setting readonly attribute in IE-8 and FF-3.5.8 and was quite happy with the answer.
But I noticed that if you update (any) DOM elements dynamically and then look at the source (using the browser view source), I believe that the updated attribute of the DOM element retains its previous value (until the update). However, if you use the Firebug / IE Developer toolbar, it displays an updated DOM
Example: http://gutfullofbeer.net/readonly.html
FF3.5-View page Source:
<html> <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script> <script> $(function() { $('input.readonly').attr('readonly', true);</script> </head> <body> <input type='text' class='readonly' maxlength='20' value='Blort'>This one is read-only<br> <input type='text' maxlength='20' value='Fish'>This one is not read-only<br> </body> </html>
Here, the first text field is read-only in the jQuery document.ready method. Viewing the source using a browser will give markup like
<input type='text' class='readonly' maxlength='20' value='Blort'>
and Firebug will give something like
<input type="text" value="Blort" maxlength="20" class="readonly" readonly="">
IE8 Developer Toolbar:
<input class="readonly" type="text" maxLength="20" readOnly="readonly" value="Blort"/>
So, I assume that the browser (IE8 / FF3.5) generates the html source much earlier than the DOM events (in my case it is jQuery document.ready() )
Can someone tell me what is going on behind the scenes?
source share