Internet explorer only executing function inside jQuery ajax success response once even though there
- by user249950
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
