英文:
Laravel Drop dowm menu filter
问题
使用PHP Laravel和JavaScript,我正在创建一个下拉菜单作为筛选或搜索功能。结果将显示在下拉菜单下方。位置筛选正常工作,但其他两个下拉菜单,用于类型和项目名称,不起作用。您能帮助我解决这个问题吗?谢谢。
我已尝试修改JavaScript和模型以查看是否有任何改进。
这是.blade.php文件的一部分:
@extends('pages.main-content')
@section('css')
<style>
.main-f {
height: 85vh;
}
.bg-sidebar {
background-color: #313A46;
}
</style>
@endsection
@section('content')
<div class="container-fluid shadow py-3 px-5 main-f for_label">
<div class="row p-1">
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Location</label>
<select name="irlocation" id="irlocation" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($location as $loc)
<option value='{{ $loc->loc_name }}'>{{ $loc->loc_name }}</option>
@endforeach
</select>
</div>
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Type</label>
<select name="irtype" id="irtype" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($incidenttype as $incident)
<option value='{{ $incident->incidenttype }}'>{{ $incident->type_name }}</option>
@endforeach
</select>
</div>
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Project Name</label>
<select name="irtype" id="irtype" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($systemapps as $system)
<option value='{{ $system->systemapps }}'>{{ $system->syst_xname }}</option>
@endforeach
</select>
</div>
</div>
<div class="row p-2">
<div class="col-12 col-md-4 col-lg-4">
<button type="submit" id="submitBtn" class="btn btn-allcard">SUBMIT</button>
</div>
</div>
<table id="dataTable" class="table" style="display: none;">
<thead>
<tr>
<th>IR Number/ID</th>
<th>Location</th>
<th>Type</th>
<th>Project Name</th>
</tr>
</thead>
<tbody id="tableData">
@forelse($incidentReports as $incident)
<tr>
<td>{{ $incident->incident_id }}</td>
<td>{{ $incident->incident_type }}</td>
<td>{{ $incident->incident_type }}</td>
<td>{{ $incident->incident_affected }}</td>
</tr>
@empty
<tr>
<td colspan="4">No data available</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#header-toggle').click();
$('#irlocation, #irtype').on('change', function() {
var location = $('#irlocation').val();
var type = $('#irtype').val();
$.ajax({
url: "{{ route('ir.reports') }}",
type: "POST",
data: {
_token: "{{ csrf_token() }}",
location: location,
type: type
},
success: function(response) {
var tableBody = $('#dataTable tbody');
tableBody.empty(); // Clear previous table rows
if (response.length > 0) {
var rows = $.map(response, function(incident) {
return `<tr>
<td>${incident.incident_id}</td>
<td>${incident.incident_location}</td>
<td>${incident.incident_type}</td>
<td>${incident.incident_affected}</td>
</tr>`;
});
tableBody.html(rows.join(''));
} else {
var emptyRow = `<tr>
<td colspan="4">No data available</td>
</tr>`;
tableBody.html(emptyRow);
}
$('#dataTable').show();
}
});
});
$('#submitBtn').click(function(e) {
e.preventDefault();
$('#irlocation, #irtype').trigger('change');
});
});
</script>
@endsection
这是Web控制器:
public function index(Request $request)
{
session(['message' => 'Incident Management Report', 'icon' => 'bi bi-exclamation-triangle-fill', 'icon-code' => '']);
$incidenttype = SystemIncidentType::orderBy('type_name', 'asc')->get();
$systemapps = SystemApps::orderBy('syst_xname', 'asc')->get();
$location = ModLocation::orderBy('loc_name', 'asc')->get();
$incidentReports = IncidentReports::with('userbasic', 'useremp')->get();
return view('pages.incident_management_report.reports', compact('incidenttype', 'systemapps', 'location', 'incidentReports'));
}
这是API控制器:
public function irReports(Request $request)
{
if ($request->ajax()) {
$location = $request->input('location');
$type = $request->input('type');
$project = $request->input('project');
$query = IncidentReports::query();
if ($location) {
$query->where('incident_location', $location);
}
if ($type) {
$query->where('incident_type', $type);
}
if ($project) {
$query->where('incident_affected', $project);
}
$data = $query->get();
return response()->json($data);
}
}
这是API路由:
Route::post('ir/reports', [IncidentReportsController::class, 'irReports'])->name('ir.reports');
英文:
Using PHP Laravel and JavaScript, I am creating a dropdown menu as a filter or search feature. The results will be displayed below the dropdown menu. The filter for location is working, but the other two dropdowns, which are for type and project name, are not functioning. Can you please assist me with this issue? Thank you.
I have attempted to modify the JavaScript and model to see if there are any improvements.
this is the .blade.php
@extends('pages.main-content')
@section('css')
<style>
.main-f {
height: 85vh;
}
.bg-sidebar {
background-color: #313A46;
}
</style>
@endsection
@section('content')
<div class="container-fluid shadow py-3 px-5 main-f for_label">
<div class="row p-1">
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Location</label>
<select name="irlocation" id="irlocation" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($location as $loc)
<option value='{{ $loc->loc_name }}'>{{ $loc->loc_name }}</option>
@endforeach
</select>
</div>
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Type</label>
<select name="irtype" id="irtype" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($incidenttype as $incident)
<option value='{{ $incident->incidenttype }}'>{{ $incident->type_name }}</option>
@endforeach
</select>
</div>
<div class="col-12 col-md-4 col-lg-4">
<label for="form" class="p-1">Project Name</label>
<select name="irtype" id="irtype" class="form-select for_label">
<option disabled selected>--Select--</option>
@foreach($systemapps as $system)
<option value='{{ $system->systemapps }}'>{{ $system->syst_xname }}</option>
@endforeach
</select>
</div>
</div>
<div class="row p-2">
<div class="col-12 col-md-4 col-lg-4">
<button type="submit" id="submitBtn" class="btn btn-allcard">SUBMIT</button>
</div>
</div>
<table id="dataTable" class="table" style="display: none;">
<thead>
<tr>
<th>IR Number/ID</th>
<th>Location</th>
<th>Type</th>
<th>Project Name</th>
</tr>
</thead>
<tbody id = "tableData">
@forelse($incidentReports as $incident)
<tr>
<td>{{ $incident->incident_id }}</td>
<td>{{ $incident->incident_type }}</td>
<td>{{ $incident->incident_type }}</td>
<td>{{ $incident->incident_affected }}</td>
</tr>
@empty
<tr>
<td colspan="4">No data available</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#header-toggle').click();
$('#irlocation, #irtype').on('change', function() {
var location = $('#irlocation').val();
var type = $('#irtype').val();
$.ajax({
url: "{{ route('ir.reports') }}",
type: "POST",
data: {
_token: "{{ csrf_token() }}",
location: location,
type: type
},
success: function(response) {
var tableBody = $('#dataTable tbody');
tableBody.empty(); // Clear previous table rows
if (response.length > 0) {
var rows = $.map(response, function(incident) {
return `<tr>
<td>${incident.incident_id}</td>
<td>${incident.incident_location}</td>
<td>${incident.incident_type}</td>
<td>${incident.incident_affected}</td>
</tr>`;
});
tableBody.html(rows.join(''));
} else {
var emptyRow = `<tr>
<td colspan="4">No data available</td>
</tr>`;
tableBody.html(emptyRow);
}
$('#dataTable').show();
}
});
});
$('#submitBtn').click(function(e) {
e.preventDefault();
$('#irlocation, #irtype').trigger('change');
});
});
</script>
@endsection
this is the web controller
public function index(Request $request)
{
session(['message' => 'Incident Management Report', 'icon' => 'bi bi-exclamation-triangle-fill', 'icon-code' => '']);
$incidenttype = SystemIncidentType::orderBy('type_name', 'asc')->get();
$systemapps = SystemApps::orderBy('syst_xname', 'asc')->get();
$location = ModLocation::orderBy('loc_name', 'asc')->get();
$incidentReports = IncidentReports::with('userbasic', 'useremp')->get();
return view('pages.incident_management_report.reports', compact('incidenttype', 'systemapps', 'location', 'incidentReports'));
}
this is the api controller
public function irReports(Request $request)
{
if ($request->ajax()) {
$location = $request->input('location');
$type = $request->input('type');
$project = $request->input('project');
$query = IncidentReports::query();
if ($location) {
$query->where('incident_location', $location);
}
if ($type) {
$query->where('incident_type', $type);
}
if ($project) {
$query->where('incident_affected', $project);
}
$data = $query->get();
return response()->json($data);
}
}
this the api routes
Route::post('ir/reports', [IncidentReportsController::class, 'irReports'])->name('ir.reports');
答案1
得分: 0
你在选择框中使用了相同的名称项目名称和类型,并且都使用了"irtype"
,因此它会获取最后一个选择框即项目名称的值,并使用项目名称输入值搜索类型。因此可能没有与搜索值匹配的记录。
更新你的选择框名称和ID,然后尝试。
英文:
You're using same name for select box Project Name and Type with "irtype"
, so it would fetch the value of last select box i.e,
project name value and search for type with project name input value. So there may no records with search value.
Update your selectbox name and id, then try
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论