Hi there, I'm regua.
I've written a plugin for the WordPress blogging platform that uses
Ajax to post comments (and display them after posting) + does a simple
validation, and it's based on jQuery.
It works well in all major browser, except Internet Explorer 7 (not
sure about IE6). I'm running a Linux so it's impossible for me to test
it (I've tried emulating IE7, but the plugin surprisingly works on the
emulated browser...), and so I'm asking you if I'd made any mistakes
in my code. Here it is:
jQuery(document).ready(function(){
jQuery.noConflict();
jQuery('#commentform').after('<div id="error"></div>');
jQuery('#submit').after('<img src="wp-content/plugins/ajax-comment-
posting/loading.gif" id="loading" alt="Loading..." />');
jQuery('#loading').hide();
var form = jQuery('#commentform');
var err = jQuery('#error');
form.submit(function() {
if(form.find('#author')[0]) {
if(form.find('#author').val() == '') {
err.html('<span class="error">Please enter your
name.</span>');
return false;
} // end if
if(form.find('#email').val() == '') {
err.html('<span class="error">Please enter your email
address.</
span>');
return false;
} // end if
var filter =
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-
Z0-9]{2,4})+$/;
if(!filter.test(form.find('#email').val())) {
err.html('<span class="error" id="errd">Please enter a
valid email
address.</span>');
return false;
} // end if
} // end if
if(form.find('#comment').val() == '') {
err.html('<span class="error">Please enter your
comment.</span>');
return false;
} // end if
jQuery(this).ajaxSubmit({
beforeSubmit: function() {
jQuery('#loading').show();
jQuery('#submit').attr('disabled','disabled');
}, // end beforeSubmit
error: function(request){
err.empty();
if
(request.responseText.search(/<title>WordPress › Error<\/
title>/) != -1) {
var data =
request.responseText.match(/<p>(.*)<\/p>/);
err.html('<span class="error">'+
data[1] +'</span>');
} else {
var data = request.responseText;
err.html('<span class="error">'+
data[1] +'</span>');
}
jQuery('#loading').hide();
jQuery('#submit').removeAttr("disabled");
return false;
}, // end error()
success: function(data) {
try {
var response = jQuery(data);
if (response.find('.commentlist')[0]) {
if
(jQuery(document).find('.commentlist')[0]) {
jQuery('.commentlist').html(response.find('.commentlist'));
} else {
jQuery('#respond').before(response.find('.commentlist'));
} // end if
if
(jQuery(document).find('#comments')[0]) {
jQuery('#comments').html(response.find('#comments'));
} else {
jQuery('.commentlist').before(response.find('#comments'));
} // end if
err.empty();
form.remove();
jQuery('#respond').hide();
err.html('<span
class="success">Your comment has been added.</
span>');
jQuery('#submit').removeAttr("disabled");
jQuery('#loading').hide();
} // end if
} catch (e) {
jQuery('#loading').hide();
jQuery('#submit').removeAttr("disabled");
alert('"An error does not become truth by reason of
multiplied propagation, nor does truth become error because nobody
sees it."\n\tMahatma Gandhi\n\n'+e);
} // end try
} // end success()
}); // end ajaxSubmit()
return false;
}); // end form.submit()
}); // end document.ready()
It works like this: when user posts a comment using the #commentform
form, it submits the form using Ajax and (if the returned data
contains no errors), substitutes the .commentlist's content with the
new one that was returned by Ajax.
The problem is that when using IE7, the comment is posted but the
comment list isn't updated. I used to get some [object Object] or
[object Error] errors before, but I managed to get rid of them, and
this is the only problem I'm now encountering with the plugin.
Strangely, this problem doesn't occur always; I have a demo page set
up for testing the plugin (http://demo.regua.biz), and there
everything is okay, but on one of the plugin user's blog (http://
baiganchoka.com/blog) this is surely happening, and a few other people
have reported similar plugin behaviour to me.
Do you know what can be the cause of this?
Thanks.
