Skip to content

Instantly share code, notes, and snippets.

@imamnurhy

imamnurhy/form-filter.blade.php

Last active December 30, 2024 06:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save imamnurhy/1734a8e81adbd00d800e1561d977cfe2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save imamnurhy/1734a8e81adbd00d800e1561d977cfe2 to your computer and use it in GitHub Desktop.
Download ZIP
Form with Jquery
Raw
form-filter.blade.php
<form id="form-filter" method="POST">
@csrf
@method('POST')
<div id="alert"></div>
<div class="row col-md-12 mt-1 mb-2">
<div class="col-md-1 p-1">
<div class="mt-3 ml-1 float-right">
<strong><i class="icon-filter"></i> FILTER </strong>
</div>
</div>
<div class="column col-md-9">
<div class="form-row m-2">
<div class="col-md-6">
<div class="form-group m-1">
<label for="filter-dari_tanggal" class="col-form-label s-12">
Dari Tanggal
</label>
<div class="input-group">
<input name="dari_tanggal" class="form-control date-time-picker"
id="filter-dari_tanggal" value="{{ date('Y-m-01') }}" />
<span class="input-group-append">
<span class="input-group-text add-on white">
<i class="icon-calendar"></i>
</span>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-1">
<label for="filter-sampai_tanggal" class="col-form-label s-12">
Sampai Tanggal
</label>
<div class="input-group">
<input name="sampai_tanggal" class="form-control date-time-picker"
id="filter-sampai_tanggal" value="{{ date('Y-m-d') }}" />
<span class="input-group-append">
<span class="input-group-text add-on white">
<i class="icon-calendar"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 p-1 mt-3">
<div class="row">
<div class="col-10 p-1 d-flex">
<button type="button" class="btn btn-primary btn-sm col-12"
title="Cari data" id="filter-btn">
<i class="icon-search mr-1"></i>Cari data
</button>
</div>
<div class="col-2 m-0 p-0 d-flex justify-content-center align-items-center">
<a id="filter-btn_reset" title="Reset Filter">
<i class="icon-history s-24"></i>
</a>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$('#filter-btn').on('click', function() {
table.api().ajax.reload();
});
$('#filter-btn_reset').on('click', function() {
$('#filter-form').trigger('reset');
table.api().ajax.reload();
});
$('#filter-dari_tanggal').datetimepicker({
format: 'Y-m-d',
timepicker: false,
datepicker: true,
onShow: function(ct) {
this.setOptions({
maxDate: $('#filter-sampai_tanggal').val() ? $('#filter-sampai_tanggal').val() :
false
})
},
});
$('#filter-sampai_tanggal').datetimepicker({
format: 'Y-m-d',
timepicker: false,
datepicker: true,
onShow: function(ct) {
this.setOptions({
minDate: $('#filter-dari_tanggal').val() ? $('#filter-dari_tanggal').val() : false
})
},
});
</script>
Raw
model-loader.blade.php
<style>
.modal-loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 38px;
height: 38px;
-webkit-animation: spin 1s linear infinite;
/* Safari */
animation: spin 1s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<!-- Modal Loader -->
<div class="modal show" id="modal-loader" tabindex="-1" role="dialog" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered d-flex justify-content-center" role="document">
<div class="card">
<div class="card-body p-2">
<div class="text-center">
<div class="modal-loader"></div>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
//=== FORM FILTER ===//
$('#form-filter button[type="submit"]').on('click', function () {
$('#form-filter').data('url', $(this).data('url'));
});
$('#form-filter').on('submit', function (e) {
if ($(this)[0].checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
} else {
$('#form-filter button[type="submit"]').attr('disabled', true);
$.ajax({
url: $(this).data('url'),
type: 'POST',
data: new FormData($(this)[0]),
contentType: false,
processData: false,
beforeSend: function () {
setTimeout(function () {
$('#modal-loader').modal('show');
}, 100);
},
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
return xhr;
},
success: function (response, status, xhr) {
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
// Mencari nama file dari header Content-Disposition
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
// Mendapatkan tipe konten dari respons
var contentType = xhr.getResponseHeader('Content-Type');
var blob = new Blob([response], { type: contentType });
// Penanganan berdasarkan jenis konten
if (contentType.toLowerCase().indexOf('application/pdf') !== -1) {
// Jika tipe konten adalah PDF, buka tab baru untuk melihat PDF
var fileUrl = window.URL ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
window.open(fileUrl, '_blank');
} else {
// Jika bukan PDF, lakukan proses unduhan
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// Internet Explorer
window.navigator.msSaveBlob(blob, filename);
} else {
// Bukan Internet Explorer
var downloadUrl = window.URL ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
if (filename) {
// Gunakan atribut HTML5 <a download> untuk menentukan nama file
var a = document.createElement("a");
if (typeof a.download === 'undefined') {
// Safari tidak mendukung atribut download, navigasi ke URL unduhan
window.location = downloadUrl;
} else {
// Mengatur atribute href dan download, dan melakukan klik pada elemen a
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
} else {
// Jika tidak ada nama file, gunakan URL untuk mengunduh file
window.location = downloadUrl;
}
// Membersihkan URL object setelah beberapa saat
setTimeout(function () {
if (window.URL) {
window.URL.revokeObjectURL(downloadUrl);
} else {
window.webkitURL.revokeObjectURL(downloadUrl);
}
}, 100);
}
}
},
error: function (error) {
alert('Kesalahan Saat Export Data');
}
}).done(function () {
$('#form-filter button[type="submit"]').removeAttr('disabled');
setTimeout(function () {
$('#modal-loader').modal('hide');
}, 1000);
}).fail(function () {
$('#form-filter button[type="submit"]').removeAttr('disabled');
$('#modal-loader').modal('hide');
})
return false;
}
$(this).addClass('was-validated');
});
//=== FORM SUBMIT ===//
$('#form').on('submit', function (e) {
event.preventDefault();
const form = $(this);
const submitButton = form.find('#btn-save');
const alert = form.find('#alert');
var url = form.data('url-store');
var method = $('input[name=_method]').val();
if (method === 'PATCH') {
url = $(this).data('url-update').replace(':id', $('#id').val());
}
if (form[0].checkValidity() === false) {
form.addClass('was-validated');
} else {
form.find('#alert').html('');
form.find('#btn-save').attr('disabled', true);
$.ajax({
url: url,
type: 'POST',
data: new FormData(form[0]),
contentType: false,
processData: false,
beforeSend: function () {
$('#modal-loader').modal('show');
form.find('#alert').html('');
form.find('#btn-save').attr('disabled', true);
},
success: function (data) {
form.find('#alert').html(successMessageFormat(data));
table.api().ajax.reload();
},
error: function (xhr) {
form.find('#alert').html(errorMessageFormat(xhr));
form.find('#btn-save').removeAttr('disabled');
}
}).done(function () {
$('#modal-loader').modal('hide');
form.find('#btn-save').removeAttr('disabled');
form.find('#btn-cancel').trigger('click');
}).fail(function () {
$('#modal-loader').modal('hide');
form.find('#btn-save').removeAttr('disabled');
})
return false;
}
form.addClass('was-validated');
});
function edit(e) {
$('#alert').html('');
$('#form-title').html("Mohon tunggu beberapa saat...");
$('#form-textAction').html(" Perubahan");
$('input[name=_method]').val('PATCH');
$('#btn-cancel').show();
$.ajax({
url: $(e).data('url'),
type: 'GET',
dataType: 'JSON',
success: function (data) {
$('#form-title').html('Edit');
$('#id').val(data.id);
$('#name').val(data.name).focus();
},
error: function () {
reload();
}
});
}
function remove(e) {
$.confirm({
title: '',
content: 'Apakah Anda yakin akan menghapus data ini?',
icon: 'icon icon-question amber-text',
theme: 'modern',
closeIcon: true,
animation: 'scale',
type: 'red',
buttons: {
ok: {
text: 'ok!',
btnClass: 'btn-primary',
keys: ['enter'],
action: function () {
$.ajax({
url: $(e).data('url'),
type: 'POST',
data: {
'_method': 'DELETE',
'_token': $('meta[name="csrf-token"]').attr('content')
},
success: function (data) {
table.api().ajax.reload();
},
error: function () {
reload();
}
});
}
},
cancel: function () {
console.log('the user clicked cancel');
}
}
});
}
function reset(e) {
const form = $(e).closest('form');
form[0].reset();
form.find('input[name=_method]').val('POST');
form.find('.select2').val('').trigger('change');
form.find('#form-title').html("Tambah");
form.find('#form-textAction').html('');
form.find('#btn-cancel').hide();
form.find('#btn-reset').show();
}
Raw
simple-form.blade.php
<form class="needs-validation" id="form" method="POST" novalidate data-url-store="{{ route($route . 'store') }}" data-url-update="{{ route($route . 'update', ':id') }}">
@csrf
@method('POST')
<input type="text" style="display: none" id="id" name="id" />
<div id="alert"></div>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-10">
<h6>
<strong>
<span id="form-title">Tambah </span>
</strong>
</h6>
</div>
<div class="col-md-2">
<a href='#' class='btn btn-outline-primary btn-xs float-right' style="display: none;" id="btn-cancel" onclick='reset(this)'>Batal</a>
</div>
</div>
</div>
<div class="card-body">
<div class="form-row form-inline">
<div class="col-md-12">
<div class="form-group m-1">
<label for="name" class="col-form-label s-12 col-md-4">
Nama <span class="text-danger"> *</span>
</label>
<input type="text" name="name" id="name" class="form-control r-0 light s-12 col-md-8" autocomplete="off" required />
</div>
</div>
</div>
<div class="float-right m-1">
<button type="submit" class="btn btn-primary btn-sm" id="btn-save">
<i class="icon-save mr-2"></i>
Simpan <span id="form-textAction"></span>
</button>
<input type="reset" value="Reset" class="btn-reset" id="btn-reset" />
</div>
</div>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment