jQuery/AJAX in IE : Object doesn't support this property or method

Question

Ok, I'm stumped. Basically, this script works fine in FF, but not in IE (6,7 or 8) - in which it returns an "Object doesn't support this property or method" error. Any ideas?:

function portfolioAjaxLoader(page){
$("div#portfolio_container").load("include/DCK_portfolio_gallery.inc.php?cat=" + page);
}

$(document).ready(function(){

  $('a.portfolio_subnav').livequery('click',function(){
    portfolioAjaxLoader(this.title);
    return false;
    });

//modify page DOM if Javascript is switched on
$('div#gallery_frame').livequery(function(){
    //assign portfolioAjaxLoader to sub navigation links

    gallery_frame = $('div#gallery_frame');
    //set gallery_strip width to the number of entries multiplied by width of gallery entry element
    gallery_strip = $('div#gallery_strip');
    gallery_entries = $('div#gallery_strip a');
    elementWidth = 235;
    gallery_strip_width = elementWidth*gallery_entries.length+'px';
    gallery_strip.css({'width':gallery_strip_width});

    //add portfolio navigation buttons
    if(gallery_entries.length>4){
        $('div#portfolio_nav').before('<p id="portfolio_nav_prev"></p><p id="portfolio_nav_next"></p>');
        }

    //assign event triggers to inserted portfolio nav elements
    prev = $("p#portfolio_nav_prev");
    next = $("p#portfolio_nav_next");

    scrollPrevMax = (((gallery_entries.length - 4) * elementWidth)+20);//tolerance
    scrollMax = ((gallery_entries.length - 5) * elementWidth);
    scrollMin = ((gallery_entries.length - 6) * elementWidth);
    });


    function nextAnim(){
        //remove handler
        next.unbind();

        var currentScrollPos = gallery_frame.scrollLeft();
        var targetPos = currentScrollPos + elementWidth;

        if(currentScrollPos > scrollMin){
           next.fadeOut("fast");
           }

        if(currentScrollPos >= 0){
           prev.fadeIn("fast");
           }


        gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',function(){next.bind('click',nextAnim)});
        return false;
        }


    function prevAnim(){
        //remove handler
        prev.unbind();

        var currentScrollPos = gallery_frame.scrollLeft();
        var targetPos = currentScrollPos - elementWidth;

        if(currentScrollPos < scrollPrevMax){
            next.fadeIn("fast");
            }

        if((currentScrollPos == 0)||(currentScrollPos < elementWidth*2)){
            prev.fadeOut("fast");
            }

        gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',function(){prev.bind('click',prevAnim)});
        //prev.bind('click',prevAnim);
        return false;
        }

    next.click(nextAnim);
    prev.click(prevAnim);

});

I've purposefully left some elements in the global scope (by omitting var in their declaration).

Just for the record, it reports the error here:

gallery_frame = $('div#gallery_frame');

Character 9, line 16.

Answer 1

You'll want to use the debugger to step through it if you don't already know which line is causing the problem. If you can't easily attach the debugger in time, put this in the right spot.

debugger;

Then, check to see which statement is triggering this. Most likely, you're using a method or property that is browser-specific. You'll want to avoid those. If JQuery provides its own version of that property or method, then use JQuery's version.

Answer 2

When you include the script in your HTML, what type arttribute do you have set? I have bumped into situations where I set type="application/javascript" where it must be set as type="text/javascript". If you're a Dreamweaver user, application/javascript is listed first, and it's the "correct" selection... except that IE browsers (at least 6/7, possibly 8) don't understand this setting. You have to use text/javascript.

When I hear of happy FF scripts and absent IE scripts, this is what I think of first. I was traumatized this way once. :)

Answer 3

Since it fails on IE8 I would suggest that you use the Web Developer Toolkit, for me I press F12, and then you can start debugging, which will reload your page, and you should see the line where the error is.

Answer 4

OK, I appear to have cracked it. First - I needed to initialise the variables in the opening document.ready function i.e.

var gallery_frame,gallery_strip,gallery_entries,elementWidth,gallery_strip_width, prev, next, scrollPrevMax,scrollMax,scrollMin;

Then, I had to move the event handler assignments inside the livequery function that detects the gallery frame.

Thanks for the help folks.