I have a bunch of different buttons to switch the status of various projects:
<div class="btn-group btn-toggle project_status" data-project-id="1" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
<div class="btn-group btn-toggle project_status" data-project-id="2" data-form="project_status" data-value="1">
<button class="btn btn-default active">ACTIVE</button>
<button class="btn btn-primary">CLOSED</button>
</div>
After successfully posting via ajax, I need to toggle the data-value back and forth between 1 and 2.
I've attempted the following approach but haven't had any success:
$('.project_status').click(function(){
var project_id = $(this).attr('data-project-id');
var project_status_val = $(this).attr('data-value');
var toggle_status = function(){
$(this).find('.btn').toggleClass('active').toggleClass('btn-primary');
if (project_status_val == '1'){
alert(project_status_val);
$(this).attr('data-value','2');
} else {
alert(project_status_val);
$(this).attr('data-value','1');
}
return false;
};
var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: toggle_status
});
$('#sidebar-wrapper').load('sidebar.php');
return false;
});
I'm able to display the correct data value in the alert. The sidebar reloads with the updated value after the first click. However, I'm struggling to change the attribute value so that the next click sends the toggled value.
If you can assist, thank you!