Develop Reference

onChange is not working IE8

I am dynamically creating a text area, based on the number of each user, comment for each user.
i am using the below code to do the same, it works fine in all the browser except IE8.
$(template1).find('textarea').attr({"id":'selfasgn'+aud.ASGN_ID,"onchange":'captureSelfComments('+aud.ASGN_ID+')'})
note that $(template1) is clone of one of the element in node.
template1 = reviewTemplate.clone(true);
function captureSelfComments(p_asgnid){
alert('caling captureSelfComments');
}
I tried below code, but its getting called when this element gets constructed or appened to the DOM. so i removed it.
$(template1).find('textarea').live('change',captureSelfComments(aud.ASGN_ID))
am I doing anything wrong here ?

For IE, try propertychange() as described here since IE may not always support the change event.
var lowIE = /msie (6|7|8)/gi.test(window.navigator.userAgent);
$(template1).find('textarea').live(lowIE ? 'propertychange' : 'change',captureSelfComments(aud.ASGN_ID));
Generally, it is not a good idea to do user agent sniffing but we are talking about IE... which is basically also not a good idea, generally :)

Javascript Changing bgColor Compatible Issue in IE 9? (no JQuery) (no console.log)

I currently build a javascript which will change the bgColor of the table row. All is well when I tested it with Google Chrome, but after I try it on IE9 then it just...sometime works, sometimes do not...Do someone here know how can I fixed it? Am I going to throw away the java scripts and build another 1? Below is the related code...
Updated:
I manage to change the bgColor using javaScript, but it does not perform correctly until I press F12 or double click the table rows for IE9.
I found out that Website with JS doesn't work in IE9 until the Developer Tools is activated is almost 100% with my situation and there are many more. But, I do not have any code which related to the console or console.log in my program and I had try many methods to find out what is the problem.
But at the end, still back to zero. No idea what is going wrong, need some helps at here... Thanks in advanced
JavaScript
<SCRIPT LANGUAGE="JavaScript">
//......
//......
function setColor(){
if(selectedRow != ""){
selectedRow.bgColor = originColor;
}
var x = getObjectById("row");
x.bgColor = "#CCCCFF";
selectedRow = x;
}
</SCRIPT>
HTML
<TD ... onclick="setColor();"></TD>
Need some hints.

I'm not sure what getObjectById is doing, but you should be setting style.backgroundColor on your HTMLElement rather than the bgColor property. The bgColor property matches with the attribute of the same name, and this attribute has been depreciated since HTML 4.01 and obsolete in HTML5.
elm.style.backgroundColor = '#CCCCFF';

Detect if browser supports contentEditable?

There's this question, but the solution posted is browser sniffing, which I'm trying to avoid.
I need to make my website compatible with the iPad and perhaps newer Androids. I've been using an old version of the FCKEditor (now CK Editor) for my WYSIWYG editors, but that doesn't work on mobile, so I want to swap it out for a simple textarea with something like markdown, if it's not supported.
Supposedly it won't work because mobile devices tend not to support this contentEditable property, which means the on-screen keyboard won't pop up when you click on it.
How can I detect if the browser supports contentEditable? It's been suggested that I just check the div in question with something like mydiv.contentElement === undefined or something like that, but the div (if it's using one) is all built into the FCK Editor and buried somewhere in an iframe.
Isn't there another way to detect if a browser supports contentEditable in general?
Just tried this:
var contentEditableSupport = typeof $('<div contenteditable="true">')[0].contentEditable !== 'undefined';
Says "true" on my iPad...... I don't think it should.
Edit: It's returning "string" because all attributes are strings.... it's just reading the attribute. How else am I supposed to do this?

You could create an anonymous editable div, check it for contentEditable, then remove the div.

Here is the test I use and is also used in Modernizr. It will give false positives in iOS 4 (and possibly earlier) but unfortunately it's impossible to detect in those environments.
var contentEditableSupport = "contentEditable" in document.documentElement;

I was able to accomplish this by checking the default value of the contentEditable property rather than the presence or type. The W3 spec indicates that the missing value default for contentEditable is "inherit", but in older browsers (e.g. Android/Gingerbread) the default value is "false". Thanks to fudgey for the comment on the OP that pointed me in the right direction!
This test works for me:
var contentEditableSupport = $('<div/>')[0].contentEditable == 'inherit';

Check for execCommand
if (document.execCommand) {
... browser supports contentEditable
} else {
... browser doesn't support contentEditable
}

To check if any propery exits for a element. You can do this
var element = document.createElement('__ELEMENT__');
if ('__PROPERTY__' in element ) {
// property supported in the browser
}
or
if ('__PROPERTY__' in document.createElement('__ELEMENT__') ) {
// property supported in the browser
}
The below link contains it all.
https://github.com/Modernizr/Modernizr/issues/570
http://diveintohtml5.info/everything.html#contenteditable

jQuery code working in Safari, but half in IE

I've got the following piece of code:
vote = $('input.vote', $($("ul#statement_forms li.statement")[current])).attr("value");
alert(vote);
Where the variable current is an integer. If i run this in Safari it works as expected (it alerts the value of vote), but not in IE, though, when i run this:
alert($('input.vote', $($("ul#statement_forms li.statement")[current])).attr("value"));
IE Also alerts the value, so i guess the problem is that it wont assign the value to the variable.
I tried using jQuery 1.5.1, 1.3.1 and 1.2.6 but no difference.
I'm hoping one of you guys can help me out..
Thanks!

Vote isnt a global variable, it's defined at this posted line
You're missing var before vote to actually declare the variable at this point. Safari apparently doesn't care, but IE doesn't like it.
On a side note: jQuery has .val() and .val("something") functions to retrieve and set the value of input and select elements.

Adding an input field to the dom and focusing it in IE

I am trying to make a div, that when you click it turns into an input box, and focuses it. I am using prototype to achieve this. This works in both Chrome and Firefox, but not in IE. IE refuses to focus the newly added input field, even if I set a 1 second timeout.
Basically the code works like this:
var viewElement = new Element("div").update("text");
var editElement = new Element("input", {"type":"text"});
root.update(viewElement);
// pseudo shortcut for the sake of information:
viewElementOnClick = function(event) {
root.update(editElement);
editElement.focus();
}
The above example is a shortened version of the actual code, the actual code works fine except the focus bit in IE.
Are there limitations on the focus function in IE? Do I need to place the input in a form?

My guess is that IE hasn't updated the DOM yet when you make the call to focus(). Sometimes browsers will wait until a script has finished executing before updating the DOM.
I would try doing the update, then doing
setTimeout("setFocus", 0);
function setFocus()
{
editElement.focus();
}
Your other option would be to have both items present in the DOM at all times and just swap the style.display on them depending on what you need hidden/shown at a given time.

What version IE? What's your DocType set to? is it strict, standards or quirks mode? Any javascript errors appearing (check the status bar bottom left for a little yellow warning sign) ? Enable error announcing for all errors via Tools > Options > Advanced.
Oisin

The question is already answered by 17 of 26. I just want to point out, that Prototype has native mechanism for this: Function.defer()