drkthunder02/w4rpservices
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajax tutorial

Browse Source
This commit is contained in:
drkthunder02
2019-10-28 05:42:02 -05:00
parent 2d683bfcd2
commit 087fe8e50f
4 changed files with 109 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/Http/Controllers/Ajax/LiveSearch.php Normal file
View File

@@ -0,0 +1,43 @@
<?php
namespace App\Http\Controllers\Ajax;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use DB;
use App\Models\User\User;
class LiveSearch extends Controller
{
public function index() {
return view('ajax.live_search');
}
public function action(Request $request) {
if($request->ajax()) {
$output = '';
$query = $request->get('query');
if($query != null) {
$data = User::where('name', 'like', '%'.$query.'%')->get();
} else {
$data = User::all();
}
$total_row = $data->count();
if($total_row > 0 ) {
foreach($data as $row) {
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>'.$row->character_id.'</td>
</tr>';
}
} else {
$output = '<tr><td align="center" colspan="5">No Data Found</td></tr>';
}
$data = array('table_data' => $output, 'total_data' => $total_row);
echo json_encode($data);
}
}
}

18
app/Http/Controllers/LiveSearch.php
View File

@@ -1,18 +0,0 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use DB;
class LiveSearch extends Controller
{
public function index() {
return view('ajax.live_search');
}
public function action(Request $request) {
return response()->json(['success' => 'Data has been successfully added.']);
}
}

123
resources/views/ajax/live_search.blade.php
View File

@@ -1,59 +1,64 @@
<!doctype html> <!DOCTYPE html>
<html lang="{{ app()->getLocale() }}"> <html>
<head> <head>
<meta charset="utf-8"/> <title>Live search in laravel using AJAX</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<meta name="_token" content="{{csrf_token()}}" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Grocery Store</title> </head>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/> <body>
</head> <br />
<body> <div class="container box">
<div class="container"> <h3 align="center">Live search in laravel using AJAX</h3><br />
<div class="alert alert-success" style="display:none"></div> <div class="panel panel-default">
<form id="myForm"> <div class="panel-heading">Search Customer Data</div>
<div class="form-group"> <div class="panel-body">
<label for="name">Name:</label> <div class="form-group">
<input type="text" class="form-control" id="name"> <input type="text" name="search" id="search" class="form-control" placeholder="Search Customer Data" />
</div> </div>
<div class="form-group"> <div class="table-responsive">
<label for="type">Type:</label> <h3 align="center">Total Data : <span id="total_records"></span></h3>
<input type="text" class="form-control" id="type"> <table class="table table-striped table-bordered">
</div> <thead>
<div class="form-group"> <tr>
<label for="price">Price:</label> <th>Name</th>
<input type="text" class="form-control" id="price"> <th>Character Id</th>
</div> </tr>
<button class="btn btn-primary" id="ajaxSubmit">Submit</button> </thead>
</form> <tbody>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" </tbody>
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" </table>
crossorigin="anonymous"> </div>
</script> </div>
<script> </div>
jQuery(document).ready(function(){ </div>
jQuery('#ajaxSubmit').click(function(e){ </body>
e.preventDefault(); </html>
$.ajaxSetup({
headers: { <script>
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') $(document).ready(function(){
}
}); fetch_customer_data();
jQuery.ajax({
url: "{{ url('/ajax/store') }}", function fetch_customer_data(query = '')
method: 'post', {
data: { $.ajax({
name: jQuery('#name').val(), url:"{{ route('live_search.action') }}",
type: jQuery('#type').val(), method:'GET',
price: jQuery('#price').val() data:{query:query},
}, dataType:'json',
success: function(result){ success:function(data)
jQuery('.alert').show(); {
jQuery('.alert').html(result.success); $('tbody').html(data.table_data);
}}); $('#total_records').text(data.total_data);
}); }
}); })
</script> }
</body>
</html> $(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
</script>

4
routes/web.php
View File

@@ -30,8 +30,8 @@ Route::group(['middleware' => ['auth']], function(){
/** /**
* AJAX Test pages * AJAX Test pages
*/ */
Route::get('/ajax', 'LiveSearch@index'); Route::get('/ajax', 'Ajax\LiveSearch@index');
Route::post('/ajax/store', 'LiveSearch@action'); Route::post('/ajax/action', 'Ajax\LiveSearch@action')->name('live_search.action');
/** /**
* Moon Controller display pages * Moon Controller display pages