for the admin panel I'm building I can make posts appear as visible or invisible if you check or uncheck a checkbox, when the checkbox is clicked a POST request is send to the /posts-update-visibility method which updates the isVisble property of the Post model.
For some reason the isVisible is not being updated and isVisible ALWAYS returns 1 no matter what.
First the posts are retrieved from database with AJAX GET call:
$.ajax({
async: true,
url: '/posts',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$('.row[data-link=' + linked_entry + ']').remove();
$.each(data.posts, function (index, item) {
var posts_row = '<tr class="row" data-link="posts">';
posts_row += '<td>' + item.title + '</td>';
posts_row += '<td>' + item.body + '</td>';
posts_row += '<td><div style="width:110px; height:60px; background-image:url(' + item.image + '); background-size:cover;"></div></td>';
posts_row += '<td style="text-align:center;"><input type="checkbox" class="entry_checkbox" data-link="posts" data-id="' + item.id + '" data-isVisible="' + item.isVisible + '" name="isVisible" '+(item.isVisible ? 'checked' : '')+'></td>';
posts_row += '</tr>';
$('.entry_table_container[data-link=' + linked_entry + ']').append(posts_row);
});
},
error: function (data){
var errors = data.responseJSON;
console.log(errors);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then when checkbox state is detected I send POST request:
$(document).on('change', '.entry_checkbox', function() {
console.log('Checkbox state changed');
linked_entry = $(this).attr("data-link");
console.log(linked_entry);
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
});
switch(linked_entry) {
case "posts":
var formData = new FormData();
formData.append('id', $(this).attr("data-id"));
formData.append('isVisible', $('.entry_checkbox[data-link=' + linked_entry + ']').is(':checked') ? 1 : 0);
$.ajax({
async: true,
cache: false,
url: '/posts-update-visibility',
type: 'POST',
data: formData,
dataType: 'JSON',
processData: false,
contentType: false,
success: function (data) {
console.log(data.success);
console.log(data.visibility);
},
error: function (data){
var errors = data.responseJSON;
console.log(errors);
}
});
break;
default:
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My controller method where I update isVisible (it doesn't actually updates anything and always returns 1, always, both $visibility and isVisible).
public function updateVisibility(Request $request)
{
$id = $request->id;
$post = Post::findOrFail($id);
$post->isVisible = $request->isVisible;
$post->save();
$visibility = $post->isVisible;
return response()->json([
'success' => 'Publicación actualizada correctamente',
'post' => $post,
'visibility' => $visibility,
]);
}
This is js console feed: Checkbox state changed posts Publicación actualizada correctamente 1
JSON Response post {…} id 2 title Titulo del segundo post body Descripcion del segundo post image img/posts/2.jpg isVisible 1 created_at null updated_at null visibility 1
</div>