We Keep Coding

Having trouble getting elements in internet explorer -- works with Chrome, Firefox

I have a <textarea> defined like this:
<textarea class="form-control notetext" id="{{this._id}}-notetext" name="notetext">{{this.text}}</textarea>
I use ajax to send data and load a partial webpage.
Then I try to find the <textarea> and list the results to the console.
The problem is that elements[0] is returning undefined in Internet Explorer 11 (haven't tried any other versions), but works fine in Chrome and Firefox. I have tried 3 variations which all give the same result. Is there a solution?
$.get('/page/' + Id + '/partial/', function(res) {
$('#sectional').html(res);
//variation 1
var elements = document.getElementsByClassName('notetext');
//variation 2
var elements = document.querySelectorAll('.notetext');
//variation 3
var elements = document.getElementsByTagName("textarea");
});
Also, please note that id is dynamically created, so I can't .getElementById (which would only return 1 result instead of an array). I saw a post somewhere that had a method to use regex on .getElementById, but it returned null as well.

...and it turned out that it was working in IE11 after all. I was originally using getElementsbyName which doesn't work properly in IE11 (it gets ID instead). So I changed it to the variations listed above, which all gave the same incorrect result. But after I quit and restarted the browser, the code worked fine. I'm not sure if I can change a setting somewhere in IE so this doesn't happen again?

substring or slice without the wanted results in Chrome, Firefox and Opera

var keuzekaart = unescape(document.cookie);
var string = (keuzekaart.slice(0,6));
This gives the wanted results in Safari and IE.
In FF the result is: 'keuzek'.
In Opera and Chrome the console.log stays empty. I don't know if thats because of the slice function or because console.log doesn't work properly in those browsers.

Could you explain what exactly the code should do? If you are trying to modify or read cookies then you should take a look at a javascript library which handles this for you, like:
https://github.com/carhartl/jquery-cookie
https://github.com/ScottHamper/Cookies

javascript options.length = 0 not working in IE9

I have a page that sets the length of a select list to 0 before it adds new options. This worked fine in all browsers until IE9. In IE9 I get the error: DOM Exception: NOT_FOUND_ERR (8). This is all I'm trying to do:
var typebox = document.sForm.ePosition;
typebox.options.length = 0;
Works fine in compatibility mode.

Try executing each piece in your console, and see where your exception is:
document.sForm
document.sForm.ePosition
document.sForm.ePosition.options
document.sForm.ePosition.options.length
I tried setting the length of options to 0, and was pretty surprised that it worked (in Chrome). Array.length should be a read-only property, in my opinion. I would use DOM code to remove the elements, something like this:
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
}

I was just struck by the same issue and found a convenient solution for those of us using jQuery:
$(selectObject).empty();
I've tested this in IE 7-9, FF 10.0 and Chrome 18 using jQuery 1.4.4.

Question was in pure javascript, please supply first a pure javascript reply. The users could not be interested in jquery since many embedded solutions can't use jquery.

Equivalent of "parentNode" in internet explorer

I wrote some code that modifies the images on a webpage. Works with firefox and safari. But tryingto get it to work with Internet explorer has got me stumped. What is the equivalent of "parentNode" in explorer? Or how does one trick it into working?
images = document.getElementsByTagName('img')
parms = {};
for (a=0;a < images.length;a++){
parent = images[a].parentNode; // <-- What to substitute for explorer?
parms[a] = {};
parms[a].bigsrc=parent.getAttribute("href");
parms[a].w_o = images[a].width;
parms[a].h_o = images[a].height;
parms[a].IsBig = false;
parms[a].loaded = false;
images[a].border=0;
parent.setAttribute("href","javascript:MakeBig('"+a+"')");
}

The problem is with the assignment of the parentNode to a var called "parent." This seems to be a reserved word in IE that breaks the code. Change the var name and it should work.

parentNode works fine in IE (except in certain cases, very likely irrelevant here). The error is almost certainly elsewhere in your code.

Are you expecting the parentNode to be an anchor? It looks like you're trying to just wrap the image in a link. If that's correct, what might work as an alternative is adding an onclick to the image itself, and setting a hand cursor. That could create the appearance of the image being a link without you having to care what the parentNode is.

ext js - el.ownerDocument.createRange() errors in IE 8

HI,
I am trying to dynamically add a form to a tab in Ext-js. (the tab has already been rendered). fyi, i am using I am using Ext 2.2.
the error occurs when during the tab.add function:
ie:
function tabactivate(tab) {
var newItem= new Ext.FormPanel(.....);
**tab.add(newItem)**; //ERRORS HERE
tab.doLayout();
}
I get this error on line 247 of ext-all-debug.js
which is
range = el.ownerDocument.createRange();
the error is (Object doesn't support this property or method.)
This works fine in Firefox but breaks in IE8.
Does anyone know a workaround for this ?
Thanks

This sounds very similar to an issue I had with ExtJS 2.2 and IE.
It seems like a lot of places in the Ext code that you see code like this:
var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[index]);
When in fact that doesn't work on IE because "this.tr.childNodes([0])" does not yet exist.
My workaround was to override the prototype (in my case insertButton() in Ext.Toolbar) to check for the existence of this.tr.childNodes([0]), using a different function or creating it if it didn't exist.
I hope that I'm correct that this is the problem you are running into.

So i found an old string that had the solution for me.
http://www.extjs.com/forum/showthread.php?t=7912&highlight=createRange
Essentially, when i was instantiating empty tabs, i had my html property set to this:
html: ' ',
once i either took the property out completely or i changed to
html: '<span></span>'
it stopped breaking.
Thanks

IE (even 8) doesn't support the document.createRange() method.
You can try var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0"); to see whether a browser supports DOM ranges per the standard.