javascript - Laravel 5.2 : How to post and delete data Using Ajax? -
i want post data using ajax , want delete data using ajax. problem while inputting data, data posted in database. ui faces problem, after saving data, save button clicked. i'm using ajax, shouldn't load or previous data should automatically vanish. same deleting also, while deleting data deleted, it's redirecting page?
how solve problem?
here usercontroller code:
<?php namespace app\http\controllers; use illuminate\http\request; use app\http\requests; use illuminate\http\response; use app\user; use app\post; use illuminate\support\facades\storage; class usercontroller extends controller { public function postsignup(request $request) { $this->validate($request, [ 'name' => 'required|max:120', 'email' => 'required|email|unique:users', 'password' => 'required|min:4' ]); $user = new user(); $user->name = $request['name']; $user->email = $request['email']; $user->password = bcrypt($request['password']); $user->save(); if ($request->ajax()) { return response()->json(); } } public function delete(request $request, $id) { $user = user::find($id); $user->delete($request->all()); } } ?> here post data view page:
<!doctype html> <html> <head> <title>laravel</title> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin = "anonymous"> </head> <body> <script src = "https://code.jquery.com/jquery-1.12.0.min.js"></script> <div class="container"> <h2>register form</h2> <div class="row col-lg-5"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" id="name" placeholder="name"> </div> <div class="form-group"> <label for="email">email</label> <input type="email" class="form-control" id="email" placeholder="email"> </div> <div class="form-group"> <label for="password">password</label> <input type="password" class="form-control" id="password" placeholder="password"> </div> <button type="submit" onclick="send(event)" class="btn btn-default" >submit</button> </div> </div> <script type="text/javascript"> function send(event) { event.preventdefault(); $.ajax({ type: "post", url: "{{route('signup')}}", data: {name: $("#name").val(), email: $("#email").val(), password: $("#password").val(), _token: '{!! csrf_token() !!}' } }); } </script> </body> </html> here delete data view page:
<html> <head> <title> user details </title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <meta name="csrf-token" content="{{ csrf_token() }}"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> </head> <body> <div class="container"> <h3> user details </h3> <table class="table table-striped table-bordered" id="example"> <thead> <tr> <td>serial no</td> <td>user name</td> <td>user email</td> <td>action</td> </tr> </thead> <tbody> <?php $i = 1; ?> @foreach($user $row) <tr> <td>{{$i}}</td> <td>{{$row->name }}</td> <td>{{$row->email}}</td> <td> <a href="#" class="edit">edit</a> <div id="deletetheproduct"> {!! form::open([ 'method' => 'post', 'action' => ['usercontroller@delete',$row->id], 'style'=>'display:inline' ]) !!} {!! form::hidden('id',$row->id)!!} {!! form::submit('delete',['class'=>'btn btn-danger deleteuser','id' => 'btndeleteuser', 'data-id' => $row->id]) !!} {!!form::close()!!} </div> </td> </tr> <?php $i++; ?> @endforeach </tbody> </table> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $('.deleteuser').on('click', function (e) { var inputdata = $('#formdeleteuser').serialize(); var dataid = $(this).attr('data-id'); $.ajaxsetup({ headers: { 'x-csrf-token': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: '{{ url(' / delete') }}' + '/' + dataid, method: 'post', data: inputdata, success: function (data) { console.log(data); } }); }); </script> </body> </html>
to prevent redirect problem make .delete button button not submit, think fix problem, if not please inform me,
to delete row please make following changes on script code... first yours code
$('.deleteuser').on('click', function(e) { var inputdata = $('#formdeleteuser').serialize(); var dataid = $(this).attr('data-id'); $.ajaxsetup({ headers: { ' x-csrf-token': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: '{{ url('/delete') }}' + '/' + dataid, method: 'post', data: inputdata, success : function(data){ console.log(data); } }); }); have changes in above code
$('.deleteuser').on('click', function(e) { var inputdata = $('#formdeleteuser').serialize(); var dataid = $(this).attr('data-id'); // added code $object=$(this); $.ajaxsetup({ headers: { ' x-csrf-token': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: '{{ url('/delete') }}' + '/' + dataid, method: 'post', data: inputdata, success : function(data){ console.log(data); //if success status successful , below code removes parent row table $($object).parents('tr').remove(); } }); }); 
Comments
Post a Comment