ajax tutorial
This commit is contained in:
43
app/Http/Controllers/Ajax/LiveSearch.php
Normal file
43
app/Http/Controllers/Ajax/LiveSearch.php
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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.']);
|
||||
}
|
||||
}
|
||||
@@ -1,59 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ app()->getLocale() }}">
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="alert alert-success" style="display:none"></div>
|
||||
<form id="myForm">
|
||||
<div class="form-group">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" class="form-control" id="name">
|
||||
</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>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user