Is there any way to reset an application STATE after every invoking of JQuery Ajax function?
I am developing a small app: users click on a button to invoke a function. But afterwards, when users want to click other buttons to invoke the same function, the dynamic ID of the first clicked button still persisting, so other buttons cannot be addressed anymore.
Code:
$('#submitComment').on('click', function(){
var id = $(this).data('id');
var thiselement = $(this);
$.ajax({
url: 'includes/updateicon.php',
type: 'POST',
data: {id:id},
dataType: 'html',
success: function(data){
if (data) {
$('#submitComment').attr("disabled", true);
$('#customComment').val("");
$('#updatedicon-'+id).html("DONE").removeClass('badge-danger').addClass('badge badge-success');
# CODE HERE TO RESET THE STATE OF THE APP
}
else {
$('#customContent').load("custom/static/error.html");
}
},
error: function(jqXHR, textStatus, errorThrown){
$('#customContent').html("There was an Error about getting the Content:" + errorThrown);
}
});
});You are searching for elements based on ID and IDs need to be unique (this is most likely causing your bug).
A simple fix of this would be:
$('.submitComment').on('click', function(){
var id=$(this).attr('id');
$.ajax({data:{id:id}});
})