[英]ajax search function in laravel -page load
我是Laravel的新手。 我正在使用ajax進行搜索。 腳本和函數運行良好,但是在顯示搜索結果時會重新加載整個頁面,並且不顯示div。 它將重新加載整個頁面。
我只給出了要顯示的表ID,但它會加載整個頁面。 為什么會這樣呢? 錯誤在哪里做? 誰能找到它並提供解決此問題的方法。
我的頁面加載如下:
<script>
$(document).ready(function(){
$("button").on('click',function(e){
e.preventDefault();
var str= $("#search").val();
if(str == "") {
$( "#tabledata" ).html( data );
} else {
$.get( "{{ url('create?id=') }}"+str,
function( data ) {
$( "#tabledata" ).html( data );
});
}
});
});
</script>
搜索功能:
<div class="panel">
<br>
<div>
<h2 style="font-family:Garamond;color:black;font-weight:bold;margin-left:5%; font-size:40px;">
</div>
<div class="col-lg-12" >
<form class="navbar-form navbar-right" method="get">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Here.." value="{{ request('search') }}">
</div>
<button type="submit" id="search" class="btn btn-default">Submit</button>
</form>
</div>
<div class="container" style=" max-width: 1150px;" >
<table class="table table-bordered" style=" margin-top: 60px; font-family:timesnewroman">
<thead class="text-justify">
<tbody class="table-striped" id="tabledata">
<tr class="table-info" style="font-weight:bold;font-size:20px;">
<th class="text-justify"><strong> Name </strong></th>
<th class="text-justify"><strong> Email</strong></th>
<th class="text-justify"><strong> PhoneNumber</strong></th>
<th class="text-justify"><strong> Action </strong></th>
</tr>
@foreach($users as $user)
<tr class="table-info" style="font-weight: bold ;font-size:15;font-family:timesnewroman;background-color:#f9f9f9">
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->phno}}</td>
<td>
<a href="{{ route('show',$user->id) }}">
<span class="glyphicon glyphicon-eye-open" style=" color:#00a0df"></span>
</a>
<a href="{{ route('edit',$user->id)}}">
<span class="glyphicon glyphicon-pencil" style=" color:green">
</a>
<a href="{{ route('delete',$user->id) }}" onclick="return confirm('Are you sure to delete?')">
<span class="glyphicon glyphicon-trash" style=" color:red"></span>
</a>
</td>
</form>
</tr>
@endforeach
</tbody>
</thead>
</table>
控制器搜索功能:
public function search(Request $request)
{
$search = $request->id;
if (is_null($search)) {
return view('admin.datas.create');
} else {
$users = data::where('name','LIKE',"%{$search}%")
->get();
return view('admin.datas.create',compact('users'));
// return view('demos.livesearchajax')->withPosts($posts);
}
}
好。 所以問題出在你的jQuery
解決方案1:
首先將id添加到您的表單中:
<form id="search-form" class="navbar-form navbar-right" method="get">
// id is added on above line
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Here.."
value="{{ request('search') }}">
</div>
<button type="submit" id="search" class="btn btn-default">Submit</button>
</form>
對於jquery使用:
<script>
$(document).ready(function(){
$("#search-form").on('submit',function(e){ // Use form submit event
e.preventDefault();
var str= $("#search").val();
if(str == "") {
$( "#tabledata" ).html( data );
} else {
$.get( "{{ url('create?id=') }}"+str,
function( data ) {
$( "#tabledata" ).html( data );
});
}
});
});
</script>
解決方案2:
將按鈕類型從“ submit
更改為“ button
以便不提交表單
<form class="navbar-form navbar-right" method="get">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Here.."
value="{{ request('search') }}">
</div>
<button type="button" id="search" class="btn btn-default">Submit</button>
// type changed on above line
並且不要在button
元素上使用點擊事件,它會綁定到當前頁面上的所有按鈕,並使用“ #search” ID來綁定點擊事件
<script>
$(document).ready(function(){
$("#search").on('click',function(e){ // Use button id to bind event
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.