Menu
I'm really suprised I haven't run into this problem before, but it seems that calling jQueries .html() function on an element ignores changes in the DOM, i.e it returns the HTML in the original source. IE doesn't do this. jQueries .html() just uses the innerHTML property internally.
Is this meant to happen? I'm on Firefox 3.5.2. I have a sample below, where no matter what you change the textbox value to, the innerHTML of the "container" element only ever returns the value defined in the HTML markup. The sample isn't using jQuery just to make it simpler (the result is the same using jQuery).
Does anyone have a work around where I can get the html of a container in its current state, i.e. including any scripted changes to the DOM?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
<!--
function BodyLoad(){
document.getElementById("textbox").value = "initial UPDATE";
DisplayTextBoxValue();
}
function DisplayTextBoxValue(){
alert(document.getElementById("container").innerHTML);
return false;
}
//-->
</script>
</head>
<body onload="BodyLoad();">
<div id="container">
<input type="text" id="textbox" value="initial" />
</div>
<input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" />
</body>
</html>
464
jQuery html() MethodThe html() method sets or returns the content (innerHTML) of the selected elements. When this method is used to return content, it returns the content of the FIRST matched element.
People can struggle and complain about innerHTML not working. Such things usually occur because of human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.
The outerHTML is the HTML of an element including the element itself. Contrast this with the innerHTML of the element, which is the HTML contained within an elements opening and closing tags.
Firefox doesn't update the value attribute of a DOM object based on user input, just its value property - pretty quick work around exists.
DOM:
function DisplayTextBoxValue(){
var element = document.getElementById('textbox');
// set the attribute on the DOM Element by hand - will update the innerHTML
element.setAttribute('value', element.value);
alert(document.getElementById("container").innerHTML);
return false;
}
jQuery plugin that makes .formhtml() automatically do this:
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,button", this).each(function() {
this.setAttribute('value',this.value);
});
$("textarea", this).each(function() {
// updated - thanks Raja & Dr. Fred!
$(this).text(this.value);
});
$("input:radio,input:checkbox", this).each(function() {
// im not really even sure you need to do this for "checked"
// but what the heck, better safe than sorry
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
// also not sure, but, better safe...
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
//optional to override real .html() if you want
// $.fn.html = $.fn.formhtml;
})(jQuery);
This is a known "issue" in Firefox. The specifications for innerHTML are not entirely clear, so different browser vendors implement it in a different way.
A discussion about this topic can be found here:
http://forums.mozillazine.org/viewtopic.php?t=317838#1744233
6
Thanks for your formhtml plugin.
In order to use it with textarea, I had to update it :
$("textarea", this).each(function() {
$(this).text($(this).val());
});
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
