this script is working in firefox or chrome but only gets half way in IE9 which is the top browser for our websites.

the problem im getting is its throwing this error.

SCRIPT438: Object doesn't support property or method 'append' calc_ajax.js, line 26 character 21

on this line: item.append(link);

and im stuck why. any help would be appreciated.

$(document).ready(function(){
$('.first a.btn').click(function(){
    $('.first a.active').removeClass('active');
    $(this).addClass('active');
    $('.second .title').addClass('active');

    var id = $(this).data('cat-id');

    var wrap = $('<div>');

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"cat": id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $.each(result.data, function(i, elem){
                item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
                link = $("<a href='#results' class='btn'>");
                link.text(elem.name);
                link.data('subcat-id', elem.id);
                item.append(link);

                wrap.append(item);

            });
            $('.second .body').html(wrap).slideDown('fast');
        }
    });
});

$('.second a.btn').live('click', function(){
    $('.second .body-area.active').removeClass('active');
    $(this).parent().addClass('active');

    var sub_id = $(this).data('subcat-id');        

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"subcat": sub_id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $('.third .title').text(result.data.title);
            $('.third .body').html(result.data.body);
            $('.third').slideDown('fast'); 
        }
    });        
});

});

this script is working in firefox or chrome but only gets half way in IE9 which is the top browser for our websites.

the problem im getting is its throwing this error.

SCRIPT438: Object doesn't support property or method 'append' calc_ajax.js, line 26 character 21

on this line: item.append(link);

and im stuck why. any help would be appreciated.

$(document).ready(function(){
$('.first a.btn').click(function(){
    $('.first a.active').removeClass('active');
    $(this).addClass('active');
    $('.second .title').addClass('active');

    var id = $(this).data('cat-id');

    var wrap = $('<div>');

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"cat": id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $.each(result.data, function(i, elem){
                item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
                link = $("<a href='#results' class='btn'>");
                link.text(elem.name);
                link.data('subcat-id', elem.id);
                item.append(link);

                wrap.append(item);

            });
            $('.second .body').html(wrap).slideDown('fast');
        }
    });
});

$('.second a.btn').live('click', function(){
    $('.second .body-area.active').removeClass('active');
    $(this).parent().addClass('active');

    var sub_id = $(this).data('subcat-id');        

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"subcat": sub_id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $('.third .title').text(result.data.title);
            $('.third .body').html(result.data.body);
            $('.third').slideDown('fast'); 
        }
    });        
});

});

• javascript
• jquery
• internet-explorer-9

• You're not declaring item nor link, so they're global, that might cause problems, IE is very special, but not sure if that's the problem... – elclanrs Commented Mar 14, 2013 at 9:51
• Any more information on how to do this as this code wasn't written by me and my knowledge on js is very few unfortunately, sorry to sound like a dumb ass. – JoeLee Commented Mar 14, 2013 at 9:53
• @JoeLee the person who wrote it should be asking these questions – Lightness Races in Orbit Commented Mar 14, 2013 at 10:03
• true but im the one thats got to fix it, but thanks to sudhir for the snipped of code its all working now – JoeLee Commented Mar 14, 2013 at 10:11

3 Answers 3

I got the same error on IE11 when using the native function document.body.append.

You can either use document.body.appendChild or insert the polyfill from MDN (npm).

window.item is a special method in Internet Explorer and since the code you pasted wasn't declaring a local variable item it was trying to reassign a native method in IE. IE didn't allows the reassignment to happen so you didn't really get the jQuery object you were expecting in the item variable and therefore the append method isn't available.

The easiest way to fix the code is to add a var right before you use the item variable. I've thrown together a jsFiddle showing how it fixes the issue in IE http://jsfiddle.net/httyY/

$.ajax({
    url:    script_url,
    type:   "post",
    data: {"cat": id},
    dataType: "json"
}).success(function(result){
    if(result.status == "ok"){
        $.each(result.data, function(i, elem){
            var item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
            var link = $("<a href='#results' class='btn'>");
            link.text(elem.name);
            link.data('subcat-id', elem.id);
            item.append(link);

            wrap.append(item);

        });
        $('.second .body').html(wrap).slideDown('fast');
    }
});

try:

$.each(result.data, function(i, elem){
   var item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
   var link = $("<a />", {"href" :"#results", "class": "btn"});
   link.text(elem.name);
   link.data('subcat-id', elem.id);
   item.append(link);
   wrap.append(item);    
});