jQuery - IE removing half the content

Question

Hi, I really need help with this one! this works perfectly in firefox and apart from google chrome not getting the textarea content perfect there too.

What the below code does is simply when a user see's a post that they want to comment on, they simply enter data into the textarea next to the post nd click submit. Once submitted it adds the comment onto the other comments.

In IE however ( all versions ) it adds the comment in the correct place perfectly but removes some html tags from around the first comment and then removes every other post below the post a user has commented on!

Here is my code;

function add_comment( token, loader, internal_error, internal_error_fbs ){
$('textarea.n-c-i').focus(function(){
    if( $(this).html() == 'write a comment...' ) {
        $(this).html('');   
    }
});
$('textarea.n-c-i').blur(function(){
    if( $(this).html() == '' ) {
        $(this).html('write a comment...'); 
    }                                 
});
$(".add-comment").bind("click", function() {
    try{
        var but = $(this);
        var rel = $(this).parents(".n-w").attr("rel");
        var comment_input_box = $('[rel=box-' + rel + ']');
        var comments_div = $('[rel=box-w-' + rel + ']');
        var comments_ul = $('[rel=cb-' + rel + ']');

        var new_comment = comment_input_box.val();
        var comments_div_data = comments_div.html();
        var comments_ul_data = comments_ul.html();

        var results = $('[rel=' + rel + ']').find('.com-result');
        results.html(loader);

        comment_input_box.attr("disabled", "disabled");
        but.attr("disabled", "disabled");

        //alert(comments_ul.length);

        $.ajax({ 
            type: 'POST', url: './', data: 'add-comment=true&ref=' + encodeURIComponent(rel) + '&com=' + encodeURIComponent(new_comment) + '&token=' + token + '&aj=true', cache: false, timeout: 7000, 
            error: function(){ $.fancybox(internal_error, internal_error_fbs); results.html(''); comment_input_box.removeAttr("disabled"); but.removeAttr("disabled"); }, 
            success: function(html){ 
                auth(html);
                if( html != '<span class="error-msg">Error, message could not be posted at this time</span>' ) {
                    if( comments_ul.length == 0 ) {
                        // if first comment to be made
                        comments_div.html('<ul class="com-box" rel="cb-' + rel + '">' + html + '</ul>' + comments_div_data);
                        comments_div.find('li:last').fadeIn();
                        retrieve_comments( token, loader, internal_error, internal_error_fbs );
                        add_comment( token, loader );
                    }else{
                        // if not, just add another li to the ul list
                        comments_ul.html(comments_ul_data + html);
                        comments_ul.find('li:last').fadeIn();
                        retrieve_comments( token, loader, internal_error, internal_error_fbs );
                    }
                }
                results.html('');
                comment_input_box.removeAttr("disabled");
                but.removeAttr("disabled");
            }                           
        });
    }catch(err){alert(err);}
    return false;
});
}

ANY ANY HELP MUCH APPRECIATED!

Answer 1

Is HTML code removed, or just put as disabled? Examining the DOM should clarify the difference.

It would be good to see the HTML code that you're operating on. My guess is that IE has different behavior when you disable the comment_input_box and but element(s)... or remove that disabled attribute later on.

There have been some reports that IE has different behavior in the removeAttr() function. You could try using attr(attribute, "") to clear the attribute. Does that show different behavior?