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.']);
}
}

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

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