ajax attempt

This commit is contained in:
2019-07-13 03:21:48 -05:00
parent ed1355bb4f
commit 551cbf0049
4 changed files with 62 additions and 53 deletions

View File

@@ -13,37 +13,6 @@ class LiveSearch extends Controller
}
public function action(Request $request) {
if($request->ajax()) {
$query = $request->get('query');
if($query != '') {
$data = User::where('name', 'like', '%' . $query . '%')->get();
} else {
$data = User::all()->orderBy('name', 'desc')->get();
}
$total_row = $data->count();
if($total_row > 0) {
foreach($data as $row) {
$output .= '
<tr>
<td>' . $row->name . '</td>
</tr>
';
}
} else {
$output = '
<tr>
<td align="center" colspann="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_data,
);
echo json_encode($data);
}
return response()->json(['success' => 'Data has been successfully added.']);
}
}

View File

@@ -34,6 +34,7 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

View File

@@ -1,20 +1,59 @@
@extends('ajax.b4')
@section('content')
<div class="container">
<input type="text" name="search" id="search" class="form-control" placeholder="Search Users" />
</div>
<div class="table-responsive">
<h3 align="center"> Total Data : <span id="total_records"></span></h3>
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>User</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
@endsection
<!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="http://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>

View File

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