Vivek Titwal Vivek Titwal - 4 months ago 40
Ajax Question

unprocessable entity error (ajax) (laravel 5.2)

I am working on laravel 5.2. I want to edit my group name using ajax request but i am getting an error:"Unprocessable entity error". I am able to fetch the group name using jquery in my textarea but when i click on the save button, i am getting an error each time which is shown below:enter image description here

My controller:

public function groupEditGroup(Request $request){
$this->validate($request,[
'groupname' => 'required|min:5'
]);
$group=Grouptable::find($request['postId']);
$group->name=$request['groupname'];
$group->update();
return response()->json(['new_name' => $group->name],200);
}


My view:

<section class="col-md-offset-1 col-md-9 special"
data-groupid="{{ $group->id }}">
<a id="hash" href="" style="font-size:20px;text-decoration:none;">
{{$group->name}}</a>
<button type="button" style="margin-top:5px;" class="btn btn-warning
dropdown-toggle" data-toggle="dropdown"><span id="removesign"
class="glyphicon glyphicon-chevron-down"></span></button>

<ul class="dropdown-menu" role="menu">
<li role="presentation"><a id="edit" style="font-weight:bold;
color:black;"role="menuitem" tabindex="-1">Edit Group Name</a></li>
<li role="presentation"><a style="font-weight:bold; color:black;"
role="menuitem" tabindex="-1" href="{{ URL('/groups/'.$group->id)
}}">Leave This Group</a></li>

</ul>


<!-- Modal -->
<div id="edit-modal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title" style="font-weight:bold; color:black;">
Edit Group Name</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<textarea class="form-control" name="edit-group" id="edit-group">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg"
data-dismiss="modal" id="modal-save">Save</button>
</div>
</div>

</div>
</div>
</section>

<script>
var token='{{ Session::token() }}';
var url='{{ route('edit') }}';
</script>


My Javascript:

var groupId= 0;
var postBodyElement=null;
$('.row').find('.special').find('.dropdown-
menu').find('li').find('#edit').on('click', function(event){
event.preventDefault();
postBodyElement=event.target.parentNode.parentNode.
parentNode.childNodes[1];
var groupName=postBodyElement.textContent;
groupId=event.target.parentNode.parentNode.parentNode
.dataset['groupid'];
$('#edit-group').val(groupName);

$('#edit-modal').modal();
});

$(function () {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
});

$('#modal-save').on('click',function(){
$.ajax({
method:'POST',
url:url,
data:{ body: $('#edit-group').val(), groupId: groupId ,
_token: token }

})
.done(function(msg){
$(postBodyElement).text(msg['new_name']);
$('#edit-modal').modal('hide');
});

});

Answer
$.ajax({
        method:'POST',
        url:url, //Changed the 'body' index to 'groupname' in data 
        data:{ groupname: $('#edit-group').val(), groupId: groupId , 
       _token: token }

        })
        .done(function(msg){
         $(postBodyElement).text(msg['new_name']);
         $('#edit-modal').modal('hide');
         })
         .fail(function(msg) { 
          console.log(msg); 
         )};
Comments