Internet explorer only executing function inside jQuery ajax success response once even though there

Posted by user249950 on Stack Overflow See other posts from Stack Overflow or by user249950
Published on 2010-02-16T17:14:51Z Indexed on 2010/05/21 5:00 UTC
Read the original article Hit count: 513

Hi,

I have a function that uses jQuery.load() to call in 3 snippets of forms from different pages and then on the success text status it tries to load a colour picker:

$(document).ready(function() {

    function ajax_form(putloadingboxhere, putsnippethere, snippeturl) {

        $(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest, ) {
            if (textStatus == "success") {
                alert('One')
                $("input.pickcolor").ColorPicker({
                    onShow: function (colpkr) {
                        $(colpkr).fadeIn(500);
                        return false;
                    },
                    onSubmit: function(hsb, hex, rgb, el) {
                        $(el).val(hex);
                        $(el).ColorPickerHide();
                        $(el).siblings('.colorpreview').css('background-color', '#' + hex);
                    },
                    onBeforeShow: function () {
                        $(this).ColorPickerSetColor(this.value);
                    }
                })
                .bind('keyup', function(){
                    $(this).ColorPickerSetColor(this.value);
                });  

                alert('Two')
            }
            if (textStatus == "error") {
                // Show error message
            }
        });
    }

    ajax_form('tab_box', '#formone', 'snippet_one.htm #snippet');
    ajax_form('tab_box', '#formtwo', 'snippet_two_copy.htm #snippet');
    ajax_form('tab_box', '#formthree', 'snippet_three.htm #snippet');
});

It works fine in Firefox and Safari but (surprise, surprise) IE has a problem with it. I have added an alert to see what is going on before and after one of the functions.

FF & Safari & IE8: Alert 'one' and Alert 'two' appear three times as expected and colour picker appears. IE6 & 7: Alert 'one' shows three times and colour picker does not appear.

Any help would be great! Cheers.

EDIT

The line IE is referring to when it throws this error: 'Error: Object doesn't support this property or method.' is:

$('input.pickcolor').ColorPicker

Anyone got any insights? Thanks

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript