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") {
                    onShow: function (colpkr) {
                        return false;
                    onSubmit: function(hsb, hex, rgb, el) {
                        $(el).siblings('.colorpreview').css('background-color', '#' + hex);
                    onBeforeShow: function () {
                .bind('keyup', function(){

            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.

IE throws this error after every alert: 'Error: Object doesn't support this property or method.' is:


The input boxes are in a form that are brought in via the ajax but it doesn't work if they are native to the page either.

It works if the ajax is not involved and the input fields are on the page but because I need to test if the ajax was successful before I run the colorpicker stuff it needs to be inside the ajax.

Any help would be great! Cheers.