I've got an ajax form submission working well but I'd like to add a "success" class to indicate to the user that the request was completed when the user checked or unchecked a box. I've tried a few things so far:
$(".box").change(function() {
var id=$(this).val();
var dataString = "id=" + id + "&crudtype=myapp";
var clickedObj = $(this).parent().parent();
$.ajax( {
type: "POST",
url: "/myphppage",
data: dataString,
cache: false,
success: function() {
var oldClass = clickedObj.attr("class");
clickedObj.fadeIn(1400, function() {
clickedObj.removeClass(oldClass);
clickedObj.addClass("updated");
});
clickedObj.fadeOut(1400, function() {
clickedObj.removeClass("updated");
clickedObj.addClass(oldClass);
});
}
});
});
That one does indeed apply the "updated" class but the fadeOut actually removes the entire row of data (parent().parent() is the tag that I'm targeting.)
$(".box").change(function() {
var id=$(this).val();
var dataString = "id=" + id + "&crudtype=myapp";
var clickedObj = $(this).parent().parent();
$.ajax( {
type: "POST",
url: "/myphppage",
data: dataString,
cache: false,
success: function() {
var oldClass = clickedObj.attr("class");
clickedObj.removeClass(oldClass);
clickedObj.addClass("updated", 1000);
clickedObj.removeClass("updated", 1000);
clickedObj.addClass("updated");
}
});
});
I also tried this, but all that happens is that it (evidently) removes the existing class, adds the new one, and then does the same thing in reverse immediately so the new class is never seen. It appears that the 1000 delay is ignored despite the fact that I'm running jQueryUI on this site.
Thanks to anyone who can help!
EDIT: Adding in HTML code: