I was struggling to find the right words for my question --
My issue involves a basic ajax request triggered by a checkbox that sends data to a database.
I want to prevent the checkbox from changing if the ajax request fails. Currently, when the request fails, it doesn't change upon the first click. However, if clicked again, it changes even though the request failed.
Below is the code snippet:
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").change(function() {
if($(this).is(":checked")) {
$.ajax({
url: 'favorite.php',
type: 'POST',
data: { file_id:$(this).attr("name"), strState:"1" },
success: function() { // action after successful request
$("#favWrap").empty();
$("#favWrap").html("<input id='favorite' name='165' type='checkbox' checked/><label></label>");
},
error:function(){
$("#favWrap").empty();
$("#favWrap").html("<input id='favorite' name='165' type='checkbox' /><label></label>")
}
});
} else {
$.ajax({
url: 'favorite.php',
type: 'POST',
data: { file_id:$(this).attr("name"), strState:"0" },
success: function() { // action after successful request
$("#favWrap").empty();
$("#favWrap").html("<input id='favorite' name='165' type='checkbox' /><label></label>");
},
error:function(){
$("#favWrap").empty();
$("#favWrap").html("<input id='favorite' name='165' type='checkbox' checked/><label></label>")
}
});
}
});
});
</script>
Your assistance would be greatly appreciated!