We Keep Coding

document.all[test].innerHTML not working in Firefox

I am trying
function ddtip(thetest, thetext)
var Test = document.all[thetest].innerHTML;
var str = document.all[thetext].value;
var MyArray = str.split(",");
but it is not working in Firefox but the same is working in IE. thetest and thetext are the ID of the Server Controls.
I also tried with document.getElementById[thetest].innerHTML; but it is throwing error.
Please Help.
Thanks,
Rahul

If "thetest" is a variable then getElementById should work. If it is the id of the element you are looking for then it should be like this: document.getElementById('thetest')

find() Function return null in IE8 and IE7

I work on XMLResponse and try to find count value from xmlresponse.For that i write this code
this is my response in alert box
cnt = Math.ceil($(xmlResponse1).find("count").text()/250);
alert(cnt);
it works in IE9 but return null ni IE8 and IE7.
Please help me.
What Should have to do for solve this problem.
Thanks and Regards

The $() function is not suited for parsing XML. Use $.parseXML before wrapping the elements inside a jQuery object.
var cnt = Math.ceil($($.parseXML(xmlResponse1)).find("count").text()/250);
alert(cnt);
You can see it working in IE8 in this Fiddle
Or in easier to read way, caching the parsed XML document:
var xmlDOM = $.parseXML(xmlResponse1);
var cnt = Math.ceil( $(xmlDOM).find("count").text()/250 );
Updated demo

I think that text() does not work in ie7-8, try html():
cnt = Math.ceil($(xmlResponse1).find("count").html()/250);
Take a look at this question: jquery ie8 get text value = Object doesn't support this property or method

Get onclick string with jQuery

I had to extract the 2nd parameter (array) from an onclick attribute on an image, but jQuery just returned a function onclick and not its string value as expected. So I had to use a native method.
A quick search says it may work some browsers like FF, but not IE. I use Chrome.
<img src="path/pic.png" onclick="funcName(123456,[12,34,56,78,890]);" />
I thought this would work, but it does not:
var div = $('div_id');
var onclick_string = $(div).find('img').eq(0).attr('onclick');
var onclick_part = $(onclick_string).match(/funcName\([0-9]+,(\[.*\])/)[1]; // for some reason \d doesnt work (digit)
This works
var div = $('div_id');
var onclick_string = $(div).find('img')[0].getAttributeNode('onclick').value;
var onclick_part = $(onclick_string).match(/funcName\([0-9]+,(\[.*\])/)[1]; // for some reason \d doesnt work (digit)
Is there another way of getting the 2nd parameter ?

Why not store it in the data property?
<img src="path/pic.png" onclick="funcName(123456);" data-mydata='12,34,56,78,890' />
var div_data = $('div_id').data('mydata').split(',');

UPDATE
I used the following code to loop through a collection of span tags and output their onclick strings. it's hacky but it works (firefox 7, JQuery 1.5.1). You can even override the string value.
$("span").each(function(index)
{
alert( $(this)[0].attributes.onclick.nodeValue );
});

JavaScript/JQuery: use $(this) in a variable-name

I'm writing a jquery-plugin, that changes a css-value of certain elements on certain user-actions.
On other actions the css-value should be reseted to their initial value.
As I found no way to get the initial css-values back, I just created an array that stores all initial values in the beginning.
I did this with:
var initialCSSValue = new Array()
quite in the beginning of my plugin and later, in some kind of setup-loop where all my elements get accessed I used
initialCSSValue[$(this)] = parseInt($(this).css('<CSS-attribute>'));
This works very fine in Firefox.
However, I just found out, that IE (even v8) has problems with accessing the certain value again using
initialCSSValue[$(this)]
somewhere else in the code. I think this is due to the fact, that I use an object ($(this)) as a variable-name.
Is there a way arround this problem?
Thank you

Use $(this).data()
At first I was going to suggest using a combination of the ID and the attribute name, but every object might not have an ID. Instead, use the jQuery Data functions to attach the information directly to the element for easy, unique, access.
Do something like this (Where <CSS-attribute> is replaced with the css attribute name):
$(this).data('initial-<CSS-attribute>', parseInt( $(this).css('<CSS-attribute>') ) );
Then you can access it again like this:
$(this).data('initial-<CSS-attribute>');
Alternate way using data:
In your plugin, you could make a little helper function like this, if you wanted to avoid too much data usage:
var saveCSS = function (el, css_attribute ) {
var data = $(el).data('initial-css');
if(!data) data = {};
data[css_attribute] = $(el).css(css_attribute);
$(el).data('initial-css', data);
}
var readCSS = function (el, css_attribute) {
var data = $(el).data('initial-css');
if(data && data[css_attribute])
return data[css_attribute];
else
return "";
}

Indexing an array with a jQuery object seems fishy. I'd use the ID of the object to key the array.
initialCSSValue[$(this).attr("id")] = parseInt...

Oh please, don't do that... :)
Write some CSS and use the addClass and removeClass - it leaves the styles untouched afterwards.

if anybody wants to see the plugin in action, see it here:
http://www.sj-wien.at/leopoldstadt/zeug/marcel/slidlabel/jsproblem.html

Why does IE give unexpected errors when setting innerHTML

I tried to set innerHTML on an element in firefox and it worked fine, tried it in IE and got unexpected errors with no obvious reason why.
For example if you try and set the innerHTML of a table to " hi from stu " it will fail, because the table must be followed by a sequence.

You're seeing that behaviour because innerHTML is read-only for table elements in IE. From MSDN's innerHTML Property documentation:
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Don't know why you're being down-modded for the question Stu, as this is something I solved quite recently. The trick is to 'squirt' the HTML into a DOM element that is not currently attached to the document tree. Here's the code snippet that does it:
// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");
// IE is stricter on malformed HTML injecting direct into DOM. By injecting into
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
var tempElement = document.createElement("DIV");
tempElement.innerHTML = cleaned;
cleaned = tempElement.innerHTML;
tempElement = null;
}
// now 'cleaned' is ready to use...
Note we're using only using jQuery in this snippet here to test for whether the browser is IE, there's no hard dependency on jQuery.

check the scope of the element you are trying to set the innerHTML. since FF and IE handle this in a different way

http://www.ericvasilik.com/2006/07/code-karma.html

I have been battling with the problem of replacing a list of links in a table with a different list of links. As above, the problem comes with IE and its readonly property of table elements.
Append for me wasn't an option so I have (finally) worked out this (which works for Ch, FF and IE 8.0 (yet to try others - but I am hopeful)).
replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>");
function replaceInReadOnly(element, content){
var newNode = document.createElement();
newNode.innerHTML = content;
var oldNode = element.firstChild;
var output = element.replaceChild(newNode, oldNode);
}
Works for me - I hope it works for you

"Apparently firefox isn't this picky" ==> Apparently FireFox is so buggy, that it doesn't register this obvious violation of basic html-nesting rules ...
As someone pointed out in another forum, FireFox will accept, that you append an entire html-document as a child of a form-field or even an image ,-(

Have you tried setting innerText and/or textContent? Some nodes (like SCRIPT tags) won't behave as expected when you try to change their innerHTML in IE. More here about innerText versus textContent:
http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

Are you setting a completely different innerHTML or replacing a pattern in the innerHTML? I ask because if you're trying to do a trivial search/replace via the 'power' of innerHTML, you will find some types of element not playing in IE.
This can be cautiously remedied by surrounding your attempt in a try/catch and bubbling up the DOM via parentNode until you successfully manage to do it.
But this is not going to be suitable if you're inserting brand-new content.

You can modify the behavior. Here is some code that prevents garbage collection of otherwise-referenced elements in IE:
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
http://jsfiddle.net/DLLbc/9/

I just figured out that if you try to set innerHTML on an element in IE that isn't logically correct it will throw this error.
For example if you try and set the innerHTML of a table to " hi from stu " it will fail, because the table must be followed by a sequence.
Apparently firefox isn't this picky.
Hope it helps.