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.
Related
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..
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);
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.
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
I have just received and bypassed a problem with LightWindow and IE7 where, on page load, it throws a JavaScript error on line 444 of lightwindow.js, claiming that the object does not support this property or method. Despite finding various postings on various forums, no Google result I could find had a solution, so I am posting this here in the hopes that it will help someone / myself later.
Many suggested a specific order of the script files but I was already using this order (prototype, scriptaculous, lightwindow).
These are the steps I took that seemed to finally work, I write them here only as a record as I do not know nor have time to test which ones specifically "fixed" the issue:
Moved the call to lightwindow.js to the bottom of the page.
Changed line 444 to: if (this._getGalleryInfo(link.rel)) {
Changed line 1157 to: if (this._getGalleryInfo(this.element.rel)) {
Finally, I enclosed (and this is dirty, my apologies) lines 1417 to 1474 with a try/catch block, swallowing the exception.
EDIT:
I realised that this broke Firefox. Adding the following as line 445 now makes it work - try { gallery = this._getGalleryInfo(link.rel); } catch (e) { }
It's not a very nice fix, but my page (which contains a lightwindow link with no "rel" tag, several lightwindow links which do have "rel" tags, and one "inline" link) works just fine in IE7 now. Please comment if you have anything to add about this issue or problems with / improvements to my given solution.
Instead of the try..catch maybe you could try using
if( this && this._getGalleryInfo )
{
//use the function
}
you could also check in the same way this.element.rel ( if(this && this.element && this.element.rel) ... ) before using it.
It looks like there's a case that the _getGalleryInfo or this.element.rel has not yet been initialized so it wouldn't exist yet. Check if it exists then if I does use it.
of course i could be completely wrong, the only way to know is by testing it out.
I fixed this by changing line 444 to:
var gallery = this._getGalleryInfo(link.rel)
Then changing the subsequent comparison statement to:
if(gallery.length > 0)
{
// Rest of code here...
...which seems to have sorted it in IE6+ and kept it working in Firefox etc.
I didn't change line 1157 at all, but I haven't read the code to see what I actually does so I can't comment on its relevance?
I suspect the ? used in the example rel attribute (Evoution?[man]) may be causing the problem with IE but without spending some time testing a few things, I can't be sure?
HTH.
I had the same problem with Lightwindow 2.0, IE6, IE7, IE8 (beta); I resolved in the following way for IE6, IE7, IE8 (beta).
Instead of:
if(gallery = this._getGalleryInfo(link.rel))
I put on lines 443 and 1157:
gallery = this._getGalleryInfo(link.rel)
if(gallery)
Hope this will help!