How can I get the DOM to reflect the modified input value?
<div>
<input value='0'>
</div>
<script src='.5.0/jquery.min.js'></script>
<script>
setInterval(function() {
$('input').val(parseInt($('input').val()) + 1)
console.log('div.html(): ', $('div').html())
}, 1000)
</script>
How can I get the DOM to reflect the modified input value?
<div>
<input value='0'>
</div>
<script src='http://ajax.googleapis./ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
setInterval(function() {
$('input').val(parseInt($('input').val()) + 1)
console.log('div.html(): ', $('div').html())
}, 1000)
</script>
3 Answers
Reset to default 6Try changing the DOM directly. For example:
<div id="myDiv">
<input id="myInput" value='0'>
</div>
<script>
setInterval(function() {
var v = parseInt(document.getElementById("myInput").value) + 1;
document.getElementById("myInput").setAttribute("value",v);
}, 1000);
</script>
<input type="button" onclick="javascript:alert(document.getElementById('myDiv').innerHTML);" value="Click to see DOM" />
The following seems to work for me:
http://jsfiddle/h8AP8/1/
All credit to gnarf here and his formhtml:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
So your modified code would be:
<div>
<input value='0'>
</div>
<script src='http://ajax.googleapis./ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
(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!
this.innerHTML = 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);
setInterval(function() {
$('input').val(parseInt($('input').val()) + 1)
console.log('div.html(): ', $('div').formhtml())
}, 1000)
</script>
I'm sorry, but the problem is not in the example code you supplied. Or when this is the only html in your page, then you're missing the starting and closing tags.
This clean page runs perfectly on my machine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div><input value='0'></div>
<script src='http://ajax.googleapis./ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
setInterval(function() {
$('input').val(parseInt($('input').val()) + 1)
console.log('div.html(): ', $('div').html())
}, 1000);
</script>
</body>
</html>
Or are you testing in Internet Explorer? In that case, remove the line which is logging to your error console:
console.log('div.html(): ', $('div').html())