I had posted one question earlier 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 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 ?
The location reload() method in HTML DOM is used to reload the current document. This method refreshes the current documents. It is similar to the refresh button in the browser.
Change the Value of an Attribute In the DOM, attributes are nodes. Unlike element nodes, attribute nodes have text values. The way to change the value of an attribute, is to change its text value. This can be done using the setAttribute() method or setting the nodeValue property of the attribute node.
log() yields this result isn't surprising because a DOM update is a synchronous event.
No, CSS does not change the DOM.
The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.
Several browsers have DOM inspectors, for example, Safari 4.0 has a great DOM browser that helps you view dynamically generated elements and their CSS styles dynamically.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With