Why does Internet Explorer not like this jQuery? - javascript

While debugging some jQuery that is not working in IE, I found this error message:
var item = $("#item_"+ itemArray[itemIndex]).find('a').text().trim();
Object doesn't support this property or method (script.js, line 100, character 2)
The character 2 doesn't make sense to me. Based on the text displayed character 2 would be the letter a in var but of course that doesn't make any sense.
(Should I not use var?)
I know that jQuery is working to some extent or the script would not have been able to get this far on my page.

IE doesn't have String.trim(), you'll need $.trim() (which uses native trim if available, emulates it in IE), like this:
var item = $.trim($("#item_"+ itemArray[itemIndex]).find('a').text());

IE doesn't have a trim method.
Instead, you can call jQuery.trim(...).

Related

Does this kind of value setting work in Javascript?

I'm trying to create code that requires the least number of bytes and that works for all browsers including IE 7.
In this example, the program calls dosomething('x1') and dosomething('x2').
If I have code like this:
var items,item,index,count;
items=Array('x1','x2');
count=items.length;
for (index=0;index<count;index++){
item=items[index];
dosomething(item);
}
Could I reduce it to this and have it still function exactly the same in all browsers:
var a=Array('x1','x2'),c=a.length,i;
for (i=0;i<c;i++){
f(a[i]);
}
I understand I changed the variable names and calling function name but my goal is to use the least number of bytes possible in the code to make the code execute.
I'm just not sure if declaring a variable equal to a property of a value from a previous variable in the same list of declarations would actually return correct results.
In other words, does var a=Array('x1','x2'),c=a.length... work, or do I have to specifically do var a=Array('x1','x2');var c=a.length; to make it work in all browsers including IE 7?
This is what the Google Closure Compiler service returned:
var a,b,c,d;a=["x1","x2"];d=a.length;for(c=0​;c<d;c++)b=a[c],dosomething(b);
You can find many different Javascript compressors online to automate the process you are hand coding now. Yet, it's always good to understand how they work as it helps to write code that is better compressed.
As for IE, you can test your code by changing the emulations settings in the IE debugger panel. Just press F12, click the Emulation tab, and adjust the document mode to 7 (IE7).
Hope this is enough to get you started in the right direction.
You can use Array.map from IE 9
var items = Array('x1','x2');
items.map(dosomething(item));

Isn't the jQuery text() function cross browser?

I want to get the text that contains the element inside a td. Even not knowing what's inside this td using the jQuery mytd.text() returns the text successfully in IE8.
However I noticed that this function text() may be not cross browser since it returns me diferent values in Chrome and FF than in IE8. In both Chrome and FF the string result is much longer than in IE8. It's preceded and appended with empty values " "
As of I have a variable mytd that has the td object how could I retrieve the text that contains in a cross browser manner?
// Does not work
var text = mytd.text()
thank you.
It is cross-browser, but different browsers handle white space in text node differently, and jQuery doesn't abstract that.
It does provide the $.trim method to help you out though.
To strip the white space when you retrieve the text, just do this:
var text = mytd.text().trim();
... this assumes mytd refers to an existing jQuery variable of course. You could do this:
var text = $('.mytd').text().trim();
EDIT:
Sorry, I tested that in Safari which implements the native String.trim() method; to have it work in all browsers you should do this:
var text = $.trim( mytd.text() );
You can use jQuery.trim(str) that removes empty spaces from the start/end of a string.
Eventually, you don't even need jQuery to trim a string, since all strings share a trim method on String.prototype.

Safari Array indexOf fails to find anything

When I evaluate the following javascript in Safari 6.0:
Array.indexOf([1,2,3],3)
It returns -1, essentially saying that 3 is not in the array!
But in Firefox it correctly returns 2.
I know that Array.indexOf is a relatively new function so I have code that tests if it is present and if not defines it. However it appears this function is built in to Safari.
Is this a bug, or am I doing something wrong?
Edit: This is actually a simplified version of the problem. What I am actually doing is trying to locate the index of a TD cell in a TR:
var tr = td.parentNode
var col = Array.indexOf(tr.cells,td)
tr.cells does not have an indexOf. But, using Array.indexOf I can treat it as such, at least in Firefox. In Safari this does not work.
I guess in this case I could actually use cellindex, but if that was not defined, how would I go about getting the index?
I'm wondering why you don't use it like intended:
[1,2,3].indexOf( 3 );
Unless it's an academic question. In that case it's actually a bug special Firefox implementation. If you want to use the Array.prototype version directly, you should go like
Array.prototype.indexOf.call([1,2,3], 3);

Jquery special character handling for IE

This is a bit embarrassing scenario but I need solution.
I am using some names as an ID for li HTML element. These names are having special characters in it. using JQuery to grab an Id.
lets say my id usage is
var abc = li[id="someCompany=\"Some Term\""]
if I am calling this as
alert($(abc).parent()[0]); or
alert($(abc).html());
I am getting data and everything is working fine in firefox but not in IE.
My actual id display in application is
<li id="someCompany="Some Term""> xyz </li>
I am replacing it with .replace(/"/gi, "\"")
Please let me know, How to get it work in IE, Thanks in advance
Sorry guys, I need to give more information in my question...
Firstly, I get ID as
var aaa = "someCompany="some Data"";
I am replacing it as
aaa = aaa.replace(/"/gi, "\"").replace(/'/gi, "\'").replace(/&/gi, "\&");
Then,
var abc = aaa.replace(/"/gi, "\\\"").replace(/\:/gi, "\:").replace(/'/gi,"\\\'");
and then my question follows....
When I tried changing the above line to
var abc = aaa.replace(/"/gi, "\"").replace(/\:/gi, "\:").replace(/'/gi,"\'");
everything is fine but I have some names like
var aaa = "someCompany="some's Data""; //In this case I need to handle more special chanracters
Here, .replace(/"/gi, "\\\"") is working fine in Firefox but not in IE. How can I make it work in IE as well, please suggest
try using browser validation, like single quotes and slash in IE and double in FF.
Which version of IE are you using? I'm on IE9, and on jsFiddle, that works in IE for me (in IE7/8/9 standards mode as well). The only difference I have between your code and mine is that I put quotes around abc, i.e. var abc = 'li[id="someCompany=\"Some Term\""]' ... I'd assume you already had that there though?
http://jsfiddle.net/benno_007/mhHJh/2/
Although .parent()[0] returns an object, not xyz. If you're just needing to access xyz, just use $(abc).html()
Edit:
An alternative to using those awkward IDs could be:
<li id="someCompany" term="Some Term">test</li>
$('#someCompany[term="Some Term"]').html();
Here: http://jsfiddle.net/benno_007/mhHJh/3/
var abc = $("[id='someCompany=\"Some Term\"']");
alert($(abc).html()); //returns xyz
works for me in IE7 and 8, only difference is the single quotes around the whole attribute value instead of the doubles you have

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.

Categories