jquery error in IEs (7 and 8)

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

0

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.

Taywin

Posting Maven

2,633 posts since Apr 2010

Reputation Points: 275

Solved Threads: 375

Skill Endorsements: 17

0

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

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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).

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

0

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

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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).

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

0

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

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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.

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

0

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

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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?

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

0

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.

Master Poster

778 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

0

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