Laravel 5.4: In-Place Editing with Ajax - ajax

The page I currently have shows a table that dynamically generates rows showing user information. Each row has an Edit button that, when clicked, turns the respective cells into inputs, and turns the Edit button into a Save button. When that button's clicked, the input values for that user's row should be stored into the database.
I admittedly don't have a lot of experience with Ajax, but I've been looking online and I do believe I'm following the general procedure for calling a Controller function through an Ajax call properly. However, I'm still getting a 500 error when I try to test it. I believe it may be in how I am obtaining the request and sending back the response, but I'm unsure of the specific error.
My code contains as follows:
home.blade.php
....
#foreach($users as $user)
<tr id="row{{ loop->iteration }}>
<input type='text' id='first_name_input_row{{ loop->iteration }}'>
<input type='text' id='last_name_input_row{{ loop->iteration }}'>
<input type="button" id="save_button_row{{ $loop->iteration }}" class="btn btn-btn-submit" value="Save" class="save" onclick="save_row('{{ $loop->iteration }}', {{ $user }})">
</tr>
#endforeach
....
<script>
function save_row(num, user)
{
var id = 'row' + num;
$.ajax({
method: 'post',
url: '/update-table',
data: {
'_token': $('input[name=_token]').val(),
'first_name': $('input[id=first_name_input_' + id + ']').val(),
'last_name': $('input[id=last_name_input_' + id + ']').val(),
'user': user
},
success: function(response){
console.log("It worked!");
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("It failed!");
console.log(jqXHR);
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
}
</script>
HomeController.php
public function updateTable(Users $users){
$user = request()->input('employee');
$first_name = request()->input('first_name');
$last_name = request()->input('last_name');
$users->editUser($user, $first_name, $last_name);
return response()->json($user);
}
Users.php
public function editUser($user, $first_name, $last_name) {
$user->first_name = $first_name;
$user->last_name = $last_name;
$user->save();
}

Use laravel resource controllers to simply create a CRUD. If you are updating you need method PUT not post. I don't know if your Ajax url is ok but you can use {{ route('user.update') }} where user.update should be the name of the route to the update function of the controller. Using resources by default is that one.
Then you can do everything inside the controller
public function update(Request $request, $id){
$user = User::find($id);
$user->first_name = $request->input('first_name');
$user->last_name = $request->input('last_name');
$user->save();
return response()->json({'success' : 'message'});
}

Your question is not very clear. Did you add <input name="_token" type="hidden" value="{{ csrf_token() }}"> to your form for example?
Angus Simons is right about the PUT, and you may have forgotten preventDefault().
function save_row(num, user)
{
var id = 'row' + num;
$.preventDefault();
$.ajax({
method: 'put',
url: '{{ route('user.update') }},
data: {
'_token': $('input[name=_token]').val(),
'first_name': $('input[id=first_name_input_' + id + ']').val(),
'last_name': $('input[id=last_name_input_' + id + ']').val(),
'user': user
},
success: function(response){
console.log("It worked!");
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("It failed!");
console.log(jqXHR);
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
}
And your route:
Route::put('user/update', 'homeController#updateTable')->route('user.update');
The HomeController.php looks fine.

I eventually managed to figure out the issue with this, which was due to simple typos in some of my variables. I somewhat regret making this question as hastily as I did, and I do apologize for basically letting this sit as long as I did:
If anyone's interested, a sort of "follow-up" question to this piece can be found here

Related

Laravel Controller/Ajax not saving in my database

It seems like my save(); in my categories does not function as intended below. I will show the necessary codes first:
my table name is hms_bbr_category which is also connectec to my .env locally:
DB_CONNECTION=pgsql
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=jhs
DB_USERNAME=postgres
DB_PASSWORD=pa55wor0
my model: HmsBbrCategory
class HmsBbrCategory extends Model
{
protected $table = 'hms_bbr_category';
protected $fillable = [
"category_name", "category_description"
];
}
my controller: BBRCategoryConfigurationController
class BBRCategoryConfigurationController extends Controller
{
public function index(){
return view('frontend.bbr-settings.bbr-category-configuration');
}
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'category_name'=>'required|max:191',
'category_description'=>'required|max:191',
]);
if($validator->fails())
{
return response()->json([
'status'=>400,
'errors'=>$validator->messages(),
]);
}
else {
$category = new HmsBbrCategory;
$category->category_name = $request->input('category_name');
$category->category_description = $request->input('category_description');
$category->save();
return response()->json([
'status'=>200,
'message'=>'Category Added!',
]);
}
}
The ajax and modal fields
<div class="form-group">
<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name">
</div>
<div class="form-group">
<textarea class="form-control w-100 category_description" placeholder="Category Description" cols="50" rows="10"></textarea>
</div>
<script>
$(document).ready(function (){
$(document).on('click', '.add_category', function(e){
e.preventDefault();
var category_data = {
'category_name': $('.category_name').val(),
'category_description': $('.category_description').val(),
}
//token taken from laravel documentation
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
console.log(category_data);
$.ajax({
type: "POST",
url: "/clinical/bbr-category-configuration",
data: "category_data",
dataType: "json",
success: function (response){
// console.log(response);
if(response.status == 400)
{
$('#saveform_errList').html("");
$('#saveform_errList').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values) {
$('#saveform_errList').append('<li>'+err_values+'</li>');
});
}
else
{
$('#saveform_errList').html("");
$('#success_message').addClass('alert alert-success');
$('#success_message').text(response.message);
$.('#createCategory').modal('hide');
$.('#createCategory').find('input').val("");
console.log(category_data);
}
}
});
});
});
</script>
my routes at web.php
Route::get('/bbr-category-configuration', [BBRCategoryConfigurationController::class,'index']);
Route::post('/bbr-category-configuration', [BBRCategoryConfigurationController::class,'store']);
Things to note:
my hunch is that my store function does not connect properly at $category = new HmsBbrCategory; However I have checked that my table name and the fields taken are the same, as seen at $category->category_name = $request->input('category_name');
I have also tested in ajax with the values by simply adding console.log(response) as seen in the screenshot, I cannot get past my validator to get to the save(). I am not sure how but There should not be an error since my text fields are filled.
I can elaborate more if needed, I am asking what can I change to fix my validation/save. thanks for any help.
As the error shows, The validation is failing (empty value i guess) and returning the code you programmed (400).
i'm guessing it is because you are using a string instead of the variable at the attribute data: "category_data",
update the code to send the variable instead
$.ajax({
type: "POST",
url: "/clinical/bbr-category-configuration",
data: category_data, //change here
dataType: "json",
success: function (response){
//...

Laravel: Ajax update to database

i just want to update my data via ajax i am getting error.
Error Console:
POST http://abc.local/teachers/users/1 404 (Not Found)
here is my controller:
public function policyupdate(Request $request, $id)
{
$user = DB::table('users')->find($id);
$user->update($request->all());
return response()->json([
'status' => 'success',
'msg' => 'has been updated'
]);
}
web.php:
Route::post('users/{user}','TeachersController#policyupdate') ;
js:
jQuery(document).ready(function(e) {
alert(1);
$('#update-policy').on('click', function(e) {
console.log('Update policy clicked!')
e.preventDefault(e);
$.ajax({
type: "POST",
url: "users/" + $('#update-policy').attr("value"),
data: $(this).serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data) {
alert(updated);
},
});
});
});
I only notice a couple of issues.
url: "users/" + $('#update-policy').attr("value"),
In the url of the ajax call you don't have a slash at the beginning, so the url will be relative to the url of the page where the function is located, instead of the base url. to solve it just add that slash at the beginning
url: "/users/" + $('#update-policy').attr("value"),
The other one is that you have an input with the put method,
<input type="hidden" name="_method" value="put" />
so the Laravel route should be put (it makes sense if it takes into account that it is a route to update)
Route::put('users/{user}','TeachersController#policyupdate') ;
Well, and as you yourself discovered, with query builder, the update() method works if you query with where() instead of find()
$user = DB::table('users')->where('id', $id)->update( $request->all() );

Ajax in Laravel Search function is not working

right now it is not showing any data;
console:finished loading: GET "http://todolist.local/teachers/search?text=a".
i am trying to show result in tbody, when user types something in search.
Ajax code:
<script>
$(document).ready(function(){
$('#searchname').on('keyup', function(){
var text = $('#searchname').val();
$.ajax({
type:"GET",
url: 'teachers/search',
data: {text: $('#searchname').val()},
success:function(data){
$('tbody').html(data);
}
});
});
});
</script>
web.php:
Route::get('/search', 'TeachersController#ajaxsearch');
Search Controller:
public function ajaxsearch(){
$searchname = Input::get ( 'searchname' );
if($searchname != ""){
$teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname . '%' )->paginate(10);
return response()->json($teacher);
}
}
view:
<div class="input-group stylish-input-group">
<input type="text" id="searchname" name="searchname" class="form-control" placeholder="Search..." >
<span class="input-group-addon">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search">Search</span>
</button>
</span>
</div>
This should do the trick.
HTML:
<div id="datasearch"></div>
JS:
$(function(){
$('#searchname').on('keyup', function(){
$.get('/teachers/search/'+$(this).val(), function(response){
$('#datasearch').html(response);
});
});
});
Controller:
public function ajaxsearch(string $value = null){
return $value ? Teacher::whereRaw("UPPER(efirst) LIKE '%".strtoupper($value)."%'")->paginate(10) : [];
}
Route:
Route::get('/teachers/search/{value?}', 'TeachersController#ajaxsearch');
VERSION AFTER CHAT
HTML:
<ul id="datasearch"></ul>
JS:
$(function(){
var $datasearch=$('#datasearch');
$('#searchname').on('keyup', function(){
$.get('/teachers/search/'+$(this).val(), function(teachers){
$datasearch.empty();
for (var i=0; i<teachers.length; i++){
$datasearch.append('<li>'+teachers[i].efirst+' edit</li>');
}
});
});
});
Controller:
public function ajaxsearch(string $value = null){
return $value ? Teacher::select('id','efirst')->whereRaw("UPPER(efirst) LIKE '".strtoupper($value)."%'")->offset(0)->limit(10)->get() : [];
}
Route:
Route::get('/teachers/search/{value?}', 'TeachersController#ajaxsearch');
do you know about error function in jquery ajax?
$(document).ready(function(){
$('#searchname').on('keyup', function(){
var text = $('#searchname').val();
$.ajax({
type:"GET",
url: 'teachers/search',
data: {text: $('#searchname').val()},
success:function(data){$('tbody').html(data);},
error:function(jqXHR){alert(jqXHR.status);}
});
});
});
You can try this,it will show error if there is some and text should be in inverted commas as it is a key value pair.
In your search controller you are accessing wrong input name. It should be like this
public function ajaxsearch(){
$searchname = Input::get ( 'text' );
if($searchname != ""){
$teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname . '%' )->paginate(10);
return response()->json($teacher);
}
}
First of all, just go to the URL manually and enter parameters.
http://todolist.local/teachers/search?text=a
If you get any response. It's mean your PHP working good.
If you get an error, you are using the GET method. Please pass the variable argument in Route
Route::get('/search/{searchName}', 'TeachersController#ajaxsearch');
and please correct your controller
public function ajaxsearch($searchname){
if($searchname != ""){
$teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname.'%' )->paginate(10);
return response()->json($teacher);
}
}
Second, Please $.get method in Jquery for GET Method AJAX
<script>
$(document).ready(function(){
$('#searchname').on('keyup', function(){
var text = $('#searchname').val();
$.get(urlHere, function(response){
console.log(response);
});
});
});
</script>
See your console tab, If you get response

How to increment a model attribute count?

I'm trying to make a very simple blog using Laravel and Ajax, each blog post has likes so i want to increment the likes by clicking and updating the DB also in console there is no errors.
this is my schema :
Schema::create('blogs', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->longText('blogContent');
$table->timestamps();
$table->integer('likes')->default(8);
});
here's my blade template and script :
#section('content')
<div class="myFeedContainer col-lg-9 col-md-12 col-sm-12">
#foreach ($blogs as $blog)
<div class='blogContainer'>
<h5 class='blogTitle'>{{$blog->title}}</h5>
<h6 class='blogDate'>{{$blog->created_at}}</h6>
<p class='blogContent1' >{{$blog->blogContent}}</p>
<hr>
<h6 class='blogLikes' class="clickforlikes" data-id='{{$blog->id}}'>
{{$blog->likes}}
<ion-icon name="heart" ></ion-icon>
</h6>
<br>
</div>
#endforeach
<div id='pagina'>{{ $blogs->render() }}</div>
<script>
$('.clickforlikes').on("click", function(){
$.ajax({
url:'updateLikes',
type: 'POST',
data: {
blog_id: $(this).attr('data-id')
},
success: function (data){
console.log(data);
},
error: function(request, stqtus, error){
console.log('code: ' + request.status + '\n' + 'msg: '+request.responseText+'\n'+'error: ' + error);
}
});
});
</script>
</div>
#endsection
And this is the function from my controller
public function updateLikes()
{
$blog_Id = $_POST['blog_id'];
$blog = Blog::find($blog_Id)->increment('likes');
$blog->save();
}
This is the router :
Route::post('/updateLikes', 'BlogsController#updateLikes');
You are trying to accomplish this the PHP way. Since you are using a framework, you should take advantage of its cool features. In Laravel, you would have to do something like this:
Router:
Route::put('updateLikes/{id}', 'BlogsController#updateLikes');
Controller:
public function updateLikes($id) { $blog = Blog::find($id)->increment('likes'); $blog->save(); }
Ajax call:
<script> $('.clickforlikes').on("click", function(){ $.ajax({ url:'updateLikes/'+$(this).attr('data-id'), type: 'PUT', success: function (data){ console.log(data); }, error: function(request, stqtus, error){ console.log('code: ' + request.status + '\n' + 'msg: '+request.responseText+'\n'+'error: ' + error); } }); }); </script>
The HTTP method is different because a POST request is meant to be used to create a new resource in the database. On the other hand, PUT is used to update a resource. Your ajax request will call the route with the id of the blog appended to it, and the controller will get the id as a parameter and perform the update.
You are using POST method. You can receive these data by Request Service Container in updateLikes() method.
public function updateLikes(Request $request)
{
$blog_Id = $request->get('blog_id');
$blog = Blog::find($blog_Id)->increment('likes');
// other codes if needed
}

Symfony ajax form need reload page to show results

I have a product page where users can write comments, this works fine but i would like to implement ajax form with no page refresh.
The code call ajax and persist, but need press f5 to show new comment.
what am I doing wrong?
Thanks, and sorry for my english.
In product view, render a controller that call the form:
<div class="comments">
{{ render(controller('AppBundle:Comment:newComment',{'media': selected.id})) }}
</div>
Controller:
class CommentController extends Controller
{
/**
* #Route("/media/{media}/", name="create_comment", options={"expose"=true})
* #Method("POST")
* #ParamConverter("media", class="AppBundle:Media")
*/
public function newCommentAction(Request $request, $media)
{
$comment = new Comment();
$form = $this->createForm(CommentType::class, $comment);
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid()){
$data = $form->getData();
$data->setUser($this->getUser());
$data->setMedia($media);
$em = $this->getDoctrine()->getManager();
$em->persist($data);
$em->flush();
return new JsonResponse('Success!');
}
return $this->render('comment/newComment.html.twig', array(
'media' => $media,
'form' => $form->createView()
));
}
}
newComment.html.twig
<form method="POST" id="commentForm" action="{{path('create_comment', {'media': media.id})}}">
{{ form_row(form.comment) }}
<button type="submit" id="submitButton" class="btn btn-xs btn-danger">{{ 'btn.send' |trans }}</button>
app.js
$('body').on('click','#submitButton', function(e){
e.preventDefault();
var $form = $('#commentForm');
$.ajax({
type: "POST",
dataType: "json",
url: 'http://demo/app_dev.php/media/16/',
data: $form.serialize(),
cache: false,
success: function(response){
$(".ajaxResponse").html(response);
console.log(response);
},
error: function (response) {
console.log(response);
}
});
});
This should work for you to reload the element with class="comments" after your POST:
$('#submitButton').on('click', function (e) {
e.preventDefault();
var $form = $('#commentForm');
$.ajax({
type: "POST",
dataType: "json",
url: 'http://demo/app_dev.php/media/16/',
data: $form.serialize(),
cache: false,
success: function (response) {
$('.comments').load(window.location + ' .comments > *');
console.log(response);
},
error: function (response) {
console.log(response);
}
});
});
Edit:
As far as your second question regarding $request->isXmlHttpRequest() -- this method just looks for the X-Requested-With header with value of XMLHttpRequest. Are you testing for it on the first request or on the second request or on both requests? Can you take a look in Firebug or Chrome Tools and see if the header is on both requests?

Resources