I make conditional filtering using ajax in laravel 5. The filtering is working fine only when the 'kategori' field is selected.
I am using request in if statement for filtering:
$query = DB::table('itemregistrations')
->join('sections', 'itemregistrations.SectionID', '=', 'sections.SectionID')
->join('categories', 'itemregistrations.CategoryID', '=', 'categories.CategoryID')
->join('operasi', 'itemregistrations.OperasiID', '=', 'operasi.OperasiID')
->select('itemregistrations.name', 'itemregistrations.SectionID', 'itemregistrations.CategoryID', 'itemregistrations.OperasiID', 'itemregistrations.BangsaID', 'itemregistrations.statusProID', 'sections.sectionname', 'categories.categoryname', 'operasi.operasiname', 'itemregistrations.Nobadan', 'itemregistrations.ItemRegistrationID');
// if(request()->has('section')) {
if($request->input('section') != ''){
$query->where('itemregistrations.SectionID', $request->input('section'));
}
if($request->input('statuspro') != '') {
$query->where('itemregistrations.statusProID', $request->input('statuspro'));
}
if($request->input('bangsa') != '') {
$query->where('itemregistrations.BangsaID', $request->input('bangsa'));
}
if($request->input('agama') != '') {
$query->where('itemregistrations.AgamaID', $request->input('agama'));
}
if($request->input('jantina') != '') {
$query->where('itemregistrations.JantinaID', $request->input('jantina'));
}
if($request->input('negeri') != '') {
$query->where('itemregistrations.NegeriID', $request->input('negeri'));
}
if($request->input('status_kahwin') != '') {
$query->where('itemregistrations.KahwinID', $request->input('status_kahwin'));
}
if($request->input('kategori') != '') {
$query->where('itemregistrations.CategoryID', $request->input('kategori'));
}
if($request->input('pangkat') != '') {
$query->where('itemregistrations.OperasiID', $request->input('pangkat'));
}
$newitem = $query->get();
return response::json($newitem);
This is the html code for the selection fields:
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('Seksyen', 'Seksyen') }}
</div>
<div class="col-lg-2">
{{ Form::select('section', $sections, '', ['id' => 'section','class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
</div>
</div>
</div>
<!-- Carian mengikut status -->
<div class="form-group">
<div class="row">
.....like so........
</div>
</div>
</div>
<!-- Carian mengikut kategori dan pangkat -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<label for="kategori">Kategori:</label>
</div>
<div class="col-lg-3">
<select name="kategori" id="kategori" class="form-control select2" style="width:250px">
<option value="">-- pilih --</option>
@foreach ($categories as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<label for="pang">Pangkat:</label>
</div>
<div class="col-lg-6">
<select name="pangkat" id="pangkat" class="form-control select2"style="width:500px">
<option>-- pilih --</option>
</select>
</div>
</div>
</div>
<!-- Carian mengikut bangsa -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('Bangsa', 'Bangsa') }}
</div>
.....like so.....
</div>
</div>
<!-- Carian mengikut agama -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('Agama', 'Agama') }}
</div>
....like so.....
</div>
</div>
<!-- Carian mengikut jantina -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('Jantina', 'Jantina') }}
</div>
....like so....
</div>
</div>
<!-- Carian mengikut negeri lahir -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('negeri_lahir_peg', 'Negeri Lahir Pegawai') }}
</div>
....like so.....
</div>
</div>
<!-- Carian mengikut status perkahwinan -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
{{ Form::label('Status_kahwin', 'Status Perkahwinan') }}
</div>
...like so...
</div>
</div>
Ajax call script to get the data:
<script type="text/javascript">
$( "#cari" ).click(function() {
// alert($('#kategori').val());
var seksyen = $("#section").val();
var status_pro= $("#statuspro").val();
var kategori_id= $("#kategori").val();
var pangkat_id= $("#pangkat").val();
var bangsa_id= $("#bangsa").val();
var agama_id= $("#agama").val();
var jantina_id= $("#jantina").val();
var negeri_id= $("#negeri").val();
var kahwin_id= $("#status_kahwin").val();
$.ajax({
url: '{{ url('kakitangan') }}?'+ $.param({'section': seksyen,'statuspro': status_pro,'bangsa': bangsa_id,'agama': agama_id,'jantina': jantina_id,'negeri': negeri_id,'status_kahwin': kahwin_id,'kategori': kategori_id,'pangkat': pangkat_id}),
dataType: 'json',
success: function (data) {
console.log(data);
$('#datatable tr').not(':first').remove();
var html = '';
for(var i = 0; i < data.length; i++){
html += '<tr>'+
'<td>' + data[i].name + '</td>' +
'<td>' + data[i].sectionname + '</td>' +
'<td>' + data[i].categoryname + '</td>' +
'<td>' + data[i].operasiname + '</td>' +
'<td>' + data[i].Nobadan + '</td>' +
'<td class="text-center">' + '<a href="{{ url('/view_profil')}}/'+ data[i].ItemRegistrationID +'">' + '<i class="fa fa-folder fa-fw" rel="tooltip" title="view profil">'+'</i>'+'</a>' + '</td>' +
'</tr>';
}
$('#datatable tr').first().after(html);
},
error: function (data) {
}
});
});
</script>
Why the filtering not working if the kategori field is not selected? There is no error in console log but it doesn't have any data in the array result.
The value takes empty value id as a string. The solution is to delete the value element and empty the option element as follows:
<select name="kategori" id="kategori" class="form-control select2" style="width:250px">
<option></option>