jquery error in IEs (7 and 8)

[Violet_82]

Hi I run into something peculiar. I have an html file linking to a local file jquery-1.4.4.js.
Now, everything works ok in every browser but when I test the page in IE7 and 8 it fires the following error:

SCRIPT87: Invalid argument. 
jquery-1.4.4.js, line 18 character 20135 

and everything falls apart.
So with the IE debuggers open I click on the message and it sends me to the jquery-1.4.4.js line where the error allegedly sits (I understand this doesn't necessarily mean that the error is in that file, more likely somewhere in my own script instead). ANyway I copy and paste the whole jquery-1.4.4.js from the IE debugger into notepad, and I do the same for the jquery-1.4.4.js file in the firefox debugger. I compare the 2 (that should be the same) and notice that there are differences: the same version of the same file is different in IE and Firefox...Needless to say the line where the error is in (a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit) doesn't appear in the version taken from firefox.
A solution to this problem - I have already checked - is to move up to the latest jquery version (it still throws the error but at least everything works as it should). Probelm is I can't upgrade, becasue there are some compatibility problems.
From what I gathered from the error and some tests I have performed on the page and on my own script, a possible error seems to be coming from a list of jquery objects I have created (there is already a post on these here http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/437800/selecting-ticked-checkboxes-with-jquery) but the syntax appears correct. ANybody has a good advice?
thanks

[stbuchok]

Have you tried putting breakpoints and stepping through the code to see where the error is happening?

[Taywin]

To explain why the script portion doesn't appear in Firefox, you need to briefly understand how the JQuery internally works. The script will detect which browser is being viewed by the client, and then create a proper object which should be compatible (functionalities) with the current viewing browser. The issue you have right now should be a bug inside JQuery. There could be certain situation that JQuery does not know and has not implemented a way to handle it because there are so many differences among IE versions. As a result, you are getting errors from IE 7 and 8.

You should file a bug report to JQuery project. Try to give them as much information as you can and see if they could find the cause of the error.

[Violet_82]

thanks for this, so you reckon it is a bug and not something I could have caused myself?

[stbuchok]

No, don't assume that. Step through your code. Verify where the error is and why it is happening. I think it is more likely that there is something wrong in your code than there is something wrong with jQuery (not impossible, just less likely).

[Violet_82]

well, I went through that alreay, but happy to do it again. The error comes up in the jquery file in the internet explorer version, and is this line as said above (a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit)
At first I thought it was the selectors I was using but I have modified them, to no avail, and then my attention focussed on the event handler that called the main function: thinking that could be the problem I removed the function call from the HTML and deal with everything in the main function

[stbuchok]

I'm glad you've stepped through the code, but you haven't said what the error is or expressed why the error happens. If you know what line it is happening on, you should be easily able to say why the error happens, from there it is a matter of determining how to best fix the error.

I also don't see any of your own code, it's hard to say if you are doing something wrong without seeing your code.

With that said, there is still the possiblity that it is jQuery, however without knowing why it is happening, you can't say for sure.

The other thing I just noticed is that you are using an old version of jQuery, I'd suggest upgrading temporarily to see if the issue goes away (this would also verify that it is a problem with jQuery and the version you are using).

[Violet_82]

Hi stbuchok, basically here's the thing. I had used diferent debugging tools, firebug - remember the code is ok in firefox - and the script debugger
in IE7 and 8 where the error is occurring. Unfortunately, as it usually happens with IEs, I was misled into believing that
the error occurred at a specific line. As I said above, I thought it had something to do with the selectors (because that's where the error seemed to have
occurred in the debugger and it was returning an error in the jquery 1.4.4 file in IEs.) Not entirely satisfied with that, I debugged the script line by line, commenting out and uncommenting.
Anyway, after hours, I got to the root of the problem.
This is the relevant bit of code:

...
myBestValue;
...
if(myBestValue == null || presentValue < myBestValue){
                                    myBestValue = presentValue;
                                    //console.log(myBestValue);
                                }
                            }
                            else {
                                if(myBestValue == null || presentValue > myBestValue){
                                    myBestValue = presentValue;
                                }
...
if(newDOM){                 
                    HTMLcode += '<div class="main_row"><a href="javascript:void(0)"><img src="thumbnail_images' + image_details[index1][index2].thumbnails + '"data-val="' + myBestValue + '"data-lowestValue="' + lowestValue + '"data-generalName="' + generalName + '"data-highestValue="' + highestValue + '"data-nameOfObjects="' + nameOfObjects + '"alt="" >'+ HTMLtoINCLUDE +'</a></div>';
                    HTMLtoINCLUDE = "";
                }
                else{                           
                            $currentTHUMBNAILimage = $allTheImages.filter('[src$="' + image_details[index1][index2].thumbnails + '"]');                                                     

                            $currentTHUMBNAILimage.attr("data-val", myBestValue);//this line is causing IEs to misbehave and get the errors                         

                            console.log("Best val is " + myBestValue);//to test that it's not myBestValue causing the issue
                            var currentCarPos = $currentTHUMBNAILimage.css('left');
                            console.log("Position is " + currentCarPos);
                            //console.log($currentTHUMBNAILimage);                  
                            if(revealImage){
                                $currentTHUMBNAILimage.fadeTo(250,1).css("cursor", "pointer");

                              }
                              else{
                                $currentTHUMBNAILimage.fadeTo(250,0.5).css("cursor", "default");//makes objects invisible

                              } 
                    } 

                    myBestValue = null; 

Now, let me explain. The value that myBestValue holds will be used as you can see in the code as a data attribute of a thumbnail image, that will be picked p somewhere else in the script.That value is really important
because it determines the new position of the thumbnail in question.
The error is caused by this line $currentTHUMBNAILimage.attr("data-val", myBestValue);
I have done a few tests and from what I understand IE7 and 8 cannot cope with myBestValue be assigned a value of null. In fact if I assign it a value of 0 when I declare it and again when I reset it (and also changing the value
of it when I test it in the if statement) the script works fine and there are no errors. Unfortunately the value can't be 0 otherwise the cars will be moved to the 0 position and so myBestValue has to be reset to null.
I have tried to use an empty string in place of null - and changed the code appropriately - but, alas, IE7 and 8 still come back with the same error.

@heronote: sorry how's your post relevant to the issue? maybe I missed something

[stbuchok]

The following is a test using jquery-1.4.4 and shows no errors (tested against IE7, 8 and 9).

<!DOCTYPE html>

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

$(function(){
    $('#test').attr('data-val', 'this is a test');

    alert($('#test').attr('data-val'));

    $('#test').attr('data-val', null);

    alert($('#test').attr('data-val'));

});

</script>

</head>
<body>

<div id="test"></div>

</body>
</html>

So my next question would be, is $currentTHUMBNAILimage a jquery object? There must be something else happening that is causing an error.

[Violet_82]

thanks for the code. Yes it should be a jquery object, if it wasn't other browsers will complain too. I tested it using

console.log("test for valid  $currentTHUMBNAILimage " +  $currentTHUMBNAILimage.length); 

which returned 1. I am thinking more on the lines of "do IE7 and 8 support the attribute ends with selector http://api.jquery.com/attribute-ends-with-selector/"? IE9 as said is fine it's just 7 and 8, so perhaps it is a question of support? I also need to mention that upgrading jquery version, from 1.4.4 to the latest, works fine: the error in the IE7 and 8 console still appears but the script works

[stbuchok]

Yes the end with works cross browser:

<!DOCTYPE html>

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

$(function(){
    alert($('[id$=1]').html());
    alert($('[id$=2]').html());
});

</script>

</head>
<body>

<div id="test1">test 1</div>

<div id="test2">test 2</div>

</body>
</html>

Is there an version that is online that I can look at, that way I can debug it?

[Violet_82]

thanks for ttesting it. Unfortunately not stbuchok, there is no online version and I can't even post the code as it is, I have to edit it before posting it. The script is quite long, not sure if I will be able to edit the whole thing and post it. I know it is difficult without seeing the whole thing, sorry for that.
The reason why I was saying the error was in that particular line above, is because the moment I comment it out the error disappear (even if the script doestn' work of course). But, even if I remove the $ from

console.log("test for valid  $currentTHUMBNAILimage " +  $currentTHUMBNAILimage.length); 

the script doesnt' work anymore but the error goes away.

[Violet_82]

thinking of it, is there an alternative to this selector http://api.jquery.com/attribute-ends-with-selector/?
thanks