How to make this code compatible with IE7? - javascript

This code works in all browsers except for older IE versions. It'll be accessed by users, some of whom are still using IE7. I'm not a coder and the author isn't available until next week so I'm at loss how to refactor it so that all browsers show only the options defined in chk.
for (var x=1;x<5;x++){
var st='select[name="Score_'+x+'e"] option';
$(st).each(function(){
var chk=',0,1,2,3,4,5,,,,,,--,';
var sn=','+$.trim(this.innerHTML)+',';
if (chk.indexOf(sn)==-1){$(this).hide();}
});
st='#tableScoringInfoBox'+x+' strong';
$(st).html('1-10 Ratings explained');
}

A quick fix would be to simply replace .hide() with .remove(), though there's no way of knowing without seeing more code if that will impact something else.

Related

jQuery & IE7+ unexpected behaviour with cached $objects

I have just noticed an issue that appears to be affecting all versions of IE (tested 7-10) but not Chrome or FF (Windows 7). The issue occurs when I cache a jquery object and then remove its original target.
The code below is essentially rearranging some images in divs in such a way that the selected image comes first, but I am not using a holder div so it is all being done in situ. I would rather not complicate matters by resorting to converting the html to a string, I suspect this may be a well known issue that I just don't know the search terms for so if that is the case please enlighten me!
$lightbox_gallery = $('.gallery-lightbox .lightbox-gallery');
$image = $lightbox_gallery.find('img[data-id=' + image.id + ']').parent();
$image_after = $image.nextAll();
$image_before = $lightbox_gallery.find('> div:first').nextUntil($image);
console.log($image.html()); //returns a string
$lightbox_gallery.html('');
console.log($image.html()); //returns ''
// this works fine in almost anything but IE. Maybe also safari on mac?
$lightbox_gallery.append($image).append($image_after).append($image_before);
Edit: Solved it using the clone function http://jsfiddle.net/27DKZ/4/
What does your HTML look like? I've never seen a problem like this.. Keep in mind that IE cannot handle the console.log() function..

Old JavaScript Function Crashes Browser

I'm integrating a mootools script onto a page which has very old JavaScript functions which run a navigation vertical menu. This old script will be hard to change now.
The line breaking is:
function stgobj(id) {
with(document) return nIE && nVER < 5 ? all[id] : nNN4 ? layers[id] : getElementById(id);
}
Not sure exactly what's it's purpose, but it looks like it's rendering some elements. If commented the menu will disappear.
FF, Chrome, IE(doesn't crash, but menu does not render)
Any quick patch to resolve the browsers crashing?
Looks like its purpose is to return the element corresponding to the given ID. The code simply uses some different methods based on the browser - document.all for IE5 and earlier, and document.layers for Netscape 4. Unless you need to support those ancient browsers, you could alter the function to return just document.getElementById(id). Or better yet, ditch this function altogether and call document.getElementById directly.
However, if it's crashing modern browsers like Firefox and Chrome, then you should also look at the browser detection logic (the code that populates the nIE, nVER and nNN4 variables), otherwise it might just end up crashing elsewhere.
It's a "compatibility" function for document.getElementById. I think you should be able to equal it:
stgobj = document.getElementById.bind(document);

IE Object doesn't support this property or method

This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com
In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.
Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.
Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.

Does IE7 not fully support javascript's insertBefore method?

I have the following code which works perfect in Chrome, IE8, and FF. However, I get an error when I'm testing it with IE7. Does anyone have a clue what's happening here?
function do_replace(s, p1,p2,p3,child_node,syn_text) {
reg = new RegExp('[h\|H][1-7]');
if(p1.length>0){ //this might not be necessary
//create textnode
var text_node = document.createTextNode(p1);
child_node.parentNode.insertBefore(text_node,child_node); //errors out here in IE7
}
The code errors out at the last line- IE7 give an "htmlfile: Invalid argument." error when I look at the code through a debugger. child_node, parentNode, and text_node appear to be formed identical to Firefox and Chrome when running this script.
Any ideas? Or does IE7 just not support this method as well as other browsers?
Thanks
Rather than leave this problem unsolved, I figured out what was wrong with my code:
I was using an extensive frameset(yuck!!) and when I made the text_node = document.createTextNode() call, I was not doing this in the frame that my application was in.
I fixed this by explicitly calling out the frame to create the object in:
var text_node = MainFrame.child_frame.WhySoManyFrames.document.createTextNode(p1);
After doing this, the insertBefore method works perfect!
Hopefully this helps anyone looking at this question- I know this took me a long time and lots of frustration to figure out!
JavaScript 'InsertBefore' function is supported by IE7. Remember that you have to use this function only when page is fully loaded!
Details

IE won't split string with Javascript

I have the following code:
$('#smallcart .plusone').live('click',function(){
var id = $(this).attr('id');
articlenr = id.split('_')[1];
});
this works fine in FF, safari, Chrome, however in IE (7 and 8) it throws an error on the split-function (this property or method is not supported by this object).
if I alert the 'id'-variable I get something like plus_5751. (so I want to get the '5751' part)
if I do alert(typeof(id)) I get String as an answer...
Maybe somebody can point me to the right answer?
Thx
The split works pretty well in IE. The problem is the part left of the equal-sign. It's an object with all input-fields having the name articlenr and therefor IE quits with 'this property or method is not supported by this object' when you're trying to assign a string to it.
Your code works just fine for me in Internet Explorer - as it should be expected to. The problem must lie elsewhere, perhaps something is overriding String.prototype.split?. You can see a working example of your code at http://jsfiddle.net/AndyE/6K77Y/. The first thing to check for is any Internet Explorer specific code in your scripts.
I would make one small improvement for efficiency. $(this).attr('id'); is pretty much the long winded way of writing this.id. It's slower, because a new jQuery object has to be created and then the attr function has to run. Without it, your code can be compressed more, whilst still remaining very readable, if you like:
$('#smallcart .plusone').live('click',function(){
articlenr = this.id.split('_')[1];
});
Try renaming your variable 'id' to something else. IE doesn't like it when you name things in your scripts the same as items in the DOM.
Never mind, that seems to have not been the issue in this case. I have, however, had issues in the past with IE specific bugs caused by variable names.

Categories

Resources