سلام دوستان
من یک دیتالیست تعریف کردم در صفحه فروش محصولات وب سایتم ، حالا میخوام کاربر هر کلمه ای در این فیلد وارد کرد با ajax این درخواست به سرور ارسال بشه و نام های محصول که مشابه کلمه کلیدی هستش براش تو لیست نمایش داده بشه. ولی در زمان وارد کردن کلمه در فیلد با خطای 500 در کنسول مواجه میشم!! لطفا راهنمایی کنید.
بخش html:
<div class="form-group">
<input type="text" name="country_name" id="country_name" class="form-control input-lg" placeholder="Enter Country Name" />
<div id="countryList">
</div>
</div>
@csrf
کد ajax در همان صفحه :
<script type="text/javascript">
$(document).ready(function(){
$('#country_name').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetch') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#countryList').fadeIn();
$('#countryList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#country_name').val($(this).text());
$('#countryList').fadeOut();
});
});
</script>
روت ها :
Route::get('/autocomplete', [GetProductsListController::class, 'index']);
Route::post('/autocomplete/fetch', [GetProductsListController::class, 'fetch'])->name('autocomplete.fetch');
کنترلر :
class GetProductsListController extends Controller
{
function index()
{
return view('autocomplete');
}
function fetch(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('products')
->where('name', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->country_name.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
}
و یه راه بهت یاد میدم که باعث میشه کدات تمیزتر باشه. میتونی متد fetch رو به اینصورت بنویسی و به جای اینکه یه رشته برگردونی یه ویو رو با ایجکس برگردونی.
متد fetch رو اینطور بنویس.
function fetch(Request $request)
{
$data = [];
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('products')
->where('name', 'LIKE', "%{$query}%")
->get();
}
return view('country-list', ['data' => $data]);
}
و اینم میشه از ویو
<ul class="dropdown-menu" style="display:block; position:relative">
@foreach($data as $row)
<li><a href="#">{{$row->country_name}}</a></li>
@endforeach
</ul>
سلام داخل متد fetch از return به جای echo استفاده کن.
خطای 500 یعنی اینکه شما در کدهای سمت سرور خطا داری.
دربرگه network کنسول توضیحات خطا رو میتونی بخونی و نسبت به رفعش اقدام کنی.
و یه راه بهت یاد میدم که باعث میشه کدات تمیزتر باشه. میتونی متد fetch رو به اینصورت بنویسی و به جای اینکه یه رشته برگردونی یه ویو رو با ایجکس برگردونی.
متد fetch رو اینطور بنویس.
function fetch(Request $request)
{
$data = [];
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('products')
->where('name', 'LIKE', "%{$query}%")
->get();
}
return view('country-list', ['data' => $data]);
}
و اینم میشه از ویو
<ul class="dropdown-menu" style="display:block; position:relative">
@foreach($data as $row)
<li><a href="#">{{$row->country_name}}</a></li>
@endforeach
</ul>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟