I had posted one question earlier http://stackoverflow.com/questions/2381621/jquery-inconsistency-in-setting-readonly-attribute-in-ie-8-and-ff-3-5-8 and was quite happy with the answer.
But I did notice that if you update (any??) DOM elements dynamically, then view source (using browser's view source) I find the the updated DOM element attribute retains its older value(before update). However, if you use Firebug/IE Developer toolbar, it displays the 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);//set input with CSS class readonly to readonly
});
</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 box is set to readonly in jQuery's document.ready method. Viewing the source with browser would give a 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 my guess is that the browser (IE8/FF3.5) generates the html source much earlier before DOM events kick in (in my case it is jQuery's document.ready() )
Can someone tell me whats happening behind the scene ?