-> Default select option onclik button :
$(".addMahasiswa").click(function(){
//akan otomatis pilih option yang valuenya 0
$('.mahasiswaSr').val('0').trigger('change');
});
-> pengambilan data value/attribut dari select option
html :
<option namaSr="{{ $mahasiswa->nama }}" value="{{ $mahasiswa->id }}">{{ $mahasiswa->nama }}</option>
js :
$(".pilihSr").click(function(){
var mahasiswaNama = $('.mahasiswaSr option:selected').attr('namaSr');
});
-> auto add jquery select2
- buat function terlebih dahulu
function initializeSelect2() {
$(document).ready(function() {
$('.formProgram').select2();
console.log('cela');
});
}
- kemudian panggil setiap penambahan data/rows/form untuk refresh class dan pemasangan style:
initializeSelect2();
var idRow = +$row.find('.permohonan-disetujui-laki-laki').data('permohonan');
var permohonanDisetujuiLakilaki = +$row.find('.permohonan-disetujui-laki-laki').val();
view : <td><input class="width-input permohonan-disetujui-laki-laki" type="number" name="permohonan-disetujui-laki-laki[]" data-permohonan = "1" value="<?php echo set_value('permohonan_disetujui_laki',($lalin_izinkunjungan) ? $lalin_izinkunjungan[0]['permohonan_disetujui_laki'] : '0'); ?>"></td>
-> sum per class yang sama => var permohonanDisetujuiPerempuanAll = 0;
$('.permohonan-disetujui-perempuan').each(function(){
permohonanDisetujuiPerempuanAll += parseFloat($(this).val());
});
-> sum param => $('.jumlah-permohonan-all').val(
parseInt(permohonanDisetujuiPerempuanAll) +
parseInt(permohonanDitolakPerempuanAll)
);
-> pemanggilan value berdasarkan class/id => $( "#jadwal_kegiatan" ).val();
-> pemanggilan value berdasarkan class/id part II => var total = 0;
$('input#sidik-laki').each(function() {
var num = parseInt(this.value, 10);
if (!isNaN(num)) {
total += num;
}
});
-> request data per 5 detik sekali => setInterval(function(){
// masukan fungsi
})
}, 5000);
-> memberi waktu tampil => setTimeout(function() {
your_func();
}, 5000);
-> public static void createSubmitChatPaket(Long id_chat, String pesan, Long paket_id, Boolean checkChat, String file) throws IOException {
-> dropdown berantai -> view : <select name="prov" id="prov" class="form-control prov">
<option value="0">- Pilih Provinsi -</option>
@foreach($provs as $i=>$prov)
<option value="{{ $prov->kota_id }}">{{ $prov->nama }}</option>
@endforeach
</select>
<div class="col-md-4">
<select name="kab" id="kab" class="form-control kab">
</select>
</div>
-> jquery : $('.prov').on('change',function(e){
var prov = e.target.value;
$.get('/ajax-prov-kab?id='+prov, function(data){
$('.kab').empty();
$('.kab').append('<option value="0">Pilih Kota/Kab.</option>');
$.each(data,function(index,subcatObj){
$('.kab').append('<option value="'+subcatObj.id_kab+'">'+subcatObj.nama+'</option>');
});
});
-> get data berdasarkan data yang di select -> var idProv = $(".prov option:selected").text();
-> kondisi if di jquery -> if ($(".prov option:selected").val() != 0 && typeof $(".prov option:selected").val() != 'undefined') {
$("#wilayah-1").val($(".prov option:selected").text());
}else{
$("#wilayah-1").val("Pilih Wilayah");
}
-> memanggil hanya bulan dan hari di jquery -> var datePeriodeVal = parseInt($( ".date-periode-val" ).val());
$('.date-periode').datepicker({
format: "yyyy-mm-dd",
autoclose: true,
startDate: new Date(new Date().getFullYear(), datePeriodeVal, 1),
endDate: new Date(new Date().getFullYear(), datePeriodeVal + 1, 0),
});
-> auto action class js baris row : $('.row-permohonan :input').change();
-> cara mengambil data url form : var formAction = $('.save').attr("action");
-> replace form action url : $('.save').attr('action', formAction+"/edit");
-> refresh page function : location.reload();
-> redirect page : var url = window.location.href+'?val='+valueDate;
console.log(url);
window.location.href = url;
-> pemotongan string => var exists = http://localhost/log/lbim/doklanintalkim/form/lalin_paspor48/4?val=2019-12-14;
exists.replace(exists.slice(-15), "?val=2019-12-14"); ----ganti url;
-> animasi sebelum succes get data ajax : beforeSend: function () {
$('.loading').show();
},
success: function(getData){
$('.loading').fadeOut("slow");
projustitia = getData;
}
-> blink text di jquery : $('.validation').fadeOut(500);
$('.validation').fadeIn(500);
-> input form hanya number dan tidak bisa awal dengan angka 0 : function allowNumbersOnly(e) {
var code = (e.which) ? e.which : e.keyCode;
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
}
}
$('#jumlah').on('input', function(e) {
$("#jumlah").val($("#jumlah").val().replace(/^0/g,''));
});
view : <td><input id="jumlah" type="text" name="jumlah" class="form-control input-sm" onkeypress="allowNumbersOnly(event)" value="1"/></td>
-> validasi size dan file type untuk file upload :
$('.attachment').bind('change', function() {
var countError = 0;
$('.error-image').fadeOut(500);
$('.error-image-extention').fadeOut(500);
var fileSize = document.getElementById("attachment").files[0];
var sizeInMb = (fileSize.size/1024)/1024;
var sizeLimit= 5;
if (sizeInMb > sizeLimit) {
countError = 1;
$('.error-image').fadeIn(500);
$('.error-image-extention').fadeOut();
}
var filename = $("#attachment").val();
var extension = filename.replace(/^.*\./, '');
if (extension == filename) {
extension = '';
} else {
extension = extension.toLowerCase();
}
switch (extension) {
case 'pdf':
case 'doc':
case 'docx':
break;
default:
countError = 1;
$('.error-image').fadeOut(500);
$('.error-image-extention').fadeIn(500);
}
if (countError){
$('.attachment').val('');
}
});
-> replace semua string menjadi strip :
var result = replaceSpace.replace(/ /g, ";");-> replace satu string :var result = replaceSpace.replace('kata yang mau di replace', "di replace menjadi");
-> mengambil value string dari tag span :
var jumlahDiKeranjang = document.getElementsByClassName("totalProdukKeranjang")[0].innerHTML;
-> Saat klik otomatis langsung scroll ke atas :
onclick="$('html, body').animate({scrollTop: $('#web-all-komoditas').offset().top}, 200);"
-> hanya string yang dikirimkan saat onclick :
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'-> datatable dengan download excel, pdf, print :
<script src="<?=base_url();?>assets/plugins/export_datatable/jquery-3.3.1.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/jquery.dataTables.min.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/dataTables.buttons.min.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/jszip.min.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/pdfmake.min.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/vfs_fonts.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/buttons.html5.min.js"></script>
<script src="<?=base_url();?>assets/plugins/export_datatable/buttons.print.min.js"></script>
<script type="text/javascript">
<link rel="stylesheet" href="<?=base_url();?>assets/plugins/export_datatable/jquery.dataTables.min.css" />
<link rel="stylesheet" href="<?=base_url();?>assets/plugins/export_datatable/buttons.dataTables.min.css" />
$('#data_table').DataTable({
"searching": true,
"processing": true,
"serverSide": false,
"order": [], //Initial no order.
"ajax": {
"url": "<?php echo site_url('tata_usaha/datatable/'.$page)?>",
"type": "POST",
complete: function(){
$('.loading').hide();
}
},
"dom": 'Bfrtip',
"lengthMenu": [
[ 10, 50, 100 ], // -1 : Show All
[ '10 rows', '50 rows', '100 rows' ]
],
// "buttons": ['pageLength','excel','pdf','print'],
buttons: [
{
extend: 'pageLength',
},
{
extend: 'excelHtml5', orientation: 'landscape', pageSize: 'A4'
},
{
extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'A4'
},
{
extend: 'print', orientation: 'landscape', pageSize: 'A4'
}
]
});
</script>
=> replace image menggunakan jquery (harus memakai id) :
$('#icon-image').attr('src', '/public/files/image/komoditas/'+data.icon);
=> link menggunakan a href ke fungsi js :
<a href="javascript:cekTotalMhs(666);">'.$counting_universitases->count_total_mhs.'</a>
=> onclick js ketika di klik :
$("#cari").click(function(){
$('.loading').show();
var prov = $( ".prov" ).val();
});
=> membuat getaran di perangkat dengan jquery :
https://googlechrome.github.io/samples/vibration/?fbclid=IwAR3QN59WacUcKQhxTIAMCIrEO0xq4wI8yP9X-d7ApupgzF-uGD5GWN2wrjE
=> cara membuat count / jumlah dari name yang sama :
var totalProduk = $('[name=button-delete]').length;
=> menghapus id chart untuk replace dengan chart baru :
<html><div id="graph"></div></html>
<script>$('#graph').empty();</script>
=> mengambil data berdasarkan name form :
$('input[name=phone_number]').val();
=> replace data dengan enkrip saat sebelum post data :
jQuery('.save').submit(function(){
var isiKonten = tinymce.get('isi_konten').getContent();
var isiKontenE = htmlEscape(isiKonten);//ini fungsi encode
tinymce.get('isi_konten').setContent(isiKontenE);
});
=> validasi sebelum submit data :
$(function() {
$('.btnLogin').click(function(e) {
$('.notifSalahEmail').hide();
e.preventDefault();
var email = $('.email').val();
$.get('/cek-email-user?email='+email, function(data){
console.log("ada email : "+data);
if (data) {
$(".login").submit();
}else{
$('.notifSalahEmail').show();
}
});
});
});
=> fokus class jika ada validasi :
$( ".validate")[0].scrollIntoView();
OR
$('html, body').animate({
scrollTop: $(".nama_template").offset().top
}, 0);
=> deteksi jika tekan tombol enter aksi jquery (press enter key on jquery)
$(document).on('keypress',function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});=> cek email benar atau salah dengan jquery :$('.email').blur(function() {
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
console.log("baca 1");
if (testEmail.test(this.value)){
$('.cekDataEmailValid').hide();
countFailedEmail = 0;
}else{
countFailedEmail = 1;
$('.cekDataEmailValid').show();
}
});=> memotong 4 karakter string
setTimeout(function() {mystring = "9862 ....... -pack size 1 - SST Unspun Label (Roll) CAT#: 9862"; mystring = mystring.substring(0, 4); alert(mystring.trim());=> alert konfirmasi sebelum menghapus data :<a onclick="confirmApprove()" class="badge bg-green"><i class="fa fa-check"></i> Setujui</a>function confirmApprove($data) { var result = confirm("Want to delete?"); console.log(result) if (result) { //Logic to delete the item } }=> memanggil hanya tahun menggunakan datepicker :$(document).ready(function(){ $(".date-picker").datepicker({ autoclose : true, format: 'yyyy', viewMode: "years", minViewMode: "years" }); });=> memanggil hanya tahun menggunakan datetimepicker :$(".date-picker").datetimepicker( { format: 'YYYY' });=> memanggil function dari functionfunction someFunction() { //do stuff } $(document).ready(function(){ //Load City by State $('#billing_state_id').live('change', someFunction); $('#click_me').live('click', function() { //do something someFunction(); }); });=> cara reload datatable dengan waktu :
=> cara memanggil datatable dengan waktu :
1. hapus dulu class datatable, terus tambahkan baris2nya, dan pasang lagi datatable
$('#dataTable1').dataTable().fnDestroy();
var rows ="<tr>"+
"<td class='text-center'>456787654678</td>"+
"<td class='text-center'>Indra WR</td>"+
"<td class='text-center'>Uninus</td>"+
"<td class='text-center'>Informatika</td>"+
"<td class='text-center'>Anggota</td>"+
"</tr>";
$('.tableAnggota').append(rows);
$('#dataTable1').dataTable();
}, 2000);
- kondisi untuk memunculkan memanggil modal box dengan on click :
$('#myModal').modal('show');
- otomatis scroll dan fokus ke view validasi :
$("#click").click(function (){
$('html, body').animate({
scrollTop: $('.'+className).offset().top - 50
}, 2000);
});
- push data json new record atau hapus record :
https://stackoverflow.com/questions/4538269/adding-removing-items-from-a-javascript-object-with-jquery
var data = {items: [
{id: "1", name: "Snatch", type: "crime"},
{id: "2", name: "Witches of Eastwick", type: "comedy"},
{id: "3", name: "X-Men", type: "action"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
]};
adding data :
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
removing data :
- grouping data json di jquery :data.items.splice(1, 3); // Removes three items starting with the 2nd, // ("Witches of Eastwick", "X-Men", "Ordinary People")
const input = dataAnggotaAngkatan; //dataAnggotaAngkatan harus json ([{id: "1", angkatan: '2013'}, {id: "1", angkatan: '2016'}];)
console.log(
Object.values(input.reduce((a, { angkatan, data }) => {
if (!a[angkatan]) a[angkatan] = { angkatan, data: [] };
a[angkatan].data.push(data);
return a;
}, {}))
);
- Looping data json di javascript atau jquery :
- cara menghapus data array json dengan looping dan delete :var data = [ {"Id": 10004, "PageName": "club"}, {"Id": 10040, "PageName": "qaz"}, {"Id": 10059, "PageName": "jjjjjjj"} ]; $.each(data, function(i, item) { alert(data[i].PageName); }); $.each(data, function(i, item) { alert(item.PageName); });
https://stackoverflow.com/questions/36127429/search-and-remove-object-from-json-arrayvar data = [ {id: "1", name: "Snatch", type: "crime"}, {id: "2", name: "Witches of Eastwick", type: "comedy"}, {id: "3", name: "X-Men", type: "action"}, {id: "4", name: "Ordinary People", type: "drama"}, {id: "5", name: "Billy Elliot", type: "drama"}, {id: "6", name: "Toy Story", type: "children"} ]; function RemoveNode(id) { return data.filter(function(emp) { if (emp.id == id) { return false; } return true; }); } var newData = RemoveNode("1"); document.write(JSON.stringify(newData, 0, 4));- disable order by, lenght, search, info datatable :- klik checkbox get value atau menjalankan function :$('#dataTable1').dataTable({ "bFilter": false, "ordering": false, "info": false, "bLengthChange": false });
$("body").on("click", ".idProduks", function () { var jumlahCek = $('[name="idProduk"]:checked').length;var idChecked = []; $('td input:checked').each(function () { idChecked.push($(this).val()); }) });
- disable atau hide tombol dengan kondisi :
$("#idtablebutton").removeAttr('disabled');
-ketika pilih option dari select dan otomatis redirect atau link ke halaman lain dengan new tab :
<select class="form-control form-control-sm filePendukung" onchange="(this.options[this.selectedIndex].value? window.open(this.options[this.selectedIndex].value,'_blank'):'')">
-> load url untuk refresh style css :
var url = window.location.href;
console.log(url);
$('.rowsSyaratCheck').load(url + ' .rowsSyaratCheck');
-> split menggunakan koma (,);
console.log(($('#id_buka_edit_produk').val()).split(','));
-> post data laravel menggunakan jquery:
dihalaman view header harus ada crsf token :
<meta name="csrf-token" content="{{ csrf_token() }}" />
dan di jquery / javascript di replace headernya :
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
dan fungsi jquery post :
function saveClickOnShow(id) {
console.log(id);
$.ajax({
type:'POST',
url:'save-click-faq',
data:{data1 : 'test data 1', data2 : 'test data 2'},
success:function(data){
alert(data.success);
}
});
}
-> validasi form required penambahan class attribute di form berdasarkan id :
$("#file").attr("required",true);
-> replace date format :
var date = new Date($('.valTanggalAwal-'+id).val().replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));var tanggalAwal = date.getFullYear() + '-' + ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '-' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate()));
-> cara hide modal box atau pop up :
$('#modalNotifVefifTolak').modal('toggle');-> fungsi memunculkan otomatis datetimepicker :
$('#jam').data("DateTimePicker").show();
-> load function jquery atau javascript ketika load page :
window.onload = function() {
console.log('test');
};
- cara mengambil data onclick atau onchange dengan value di attribut untuk fungsi select :
<select class="skor-{{ $komponen_penilaian->id }}" name="skor" onchange="countInput({{ $komponen_penilaian->id }}, this.options[this.selectedIndex].getAttribute('skorVal'))">
@foreach($skors as $i=>$skor)
<option skorVal="{{ $skor->skor }}" value="{{ $skor->id }}"> {{ $skor->info_skor }} - {{ $skor->skor }}</option>
@endforeach
</select>
- membuat format rupiah uang dengan titik koma setiap 3 tiga angka
<div class="kotak"><p>Ketik jumlah nominal pada form di bawah ini.</p><span>Nominal Rupiah. :</span><input type="text" id="rupiah"/></div><script type="text/javascript">var rupiah = document.getElementById('rupiah');rupiah.addEventListener('keyup', function(e){// tambahkan 'Rp.' pada saat form di ketik// gunakan fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angkarupiah.value = formatRupiah(this.value, 'Rp. ');});/* Fungsi formatRupiah */function formatRupiah(angka, prefix){var number_string = angka.replace(/[^,\d]/g, '').toString(),split = number_string.split(','),sisa = split[0].length % 3,rupiah = split[0].substr(0, sisa),ribuan = split[0].substr(sisa).match(/\d{3}/gi);// tambahkan titik jika yang di input sudah menjadi angka ribuanif(ribuan){separator = sisa ? '.' : '';rupiah += separator + ribuan.join('.');}rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');}</script>-> cara replace label :html :<label class='custom-file-label col-md-12' id='dokumen-file-label-1"'>js :var filenames = "cek";document.getElementById('dokumen-file-label-1').innerHTML = filenames;
-> cara menampilkan align text center atau rata kiri kana text :
$(function() {
CKEDITOR.config.extraPlugins = 'justify';
});
-> ambil dan hapus data dari textarea ckeditor :
/* ambil data dari text area */
var tanggapan = CKEDITOR.instances['ckeditorEmail'].getData();
/* hapus data dari text area */
var tanggapan = CKEDITOR.instances['ckeditorEmail'].setData("");
-> fokus tampilan ke class saat load page :
<textarea cols="80" id="ckeditorEmail" name="ckeditor1" class="tanggapan" rows="5" autofocus></textarea>
-> Fungsi replace dan reset CKEDITOR :
<textarea cols="80" id="lihat_data" class="lihat_data" name="lihat_data" rows="10" disabled></textarea>
function lihat(proposal_log_book_id) { for(lihat_data in CKEDITOR.instances) { CKEDITOR.instances[lihat_data].destroy(true); }
$.get('/ajax-get-logbook?proposal_log_book_id='+proposal_log_book_id, function(data){ $('.lihatTanggal').val(data.tanggal); $('.lihat_data').text(data.kegiatan); CKEDITOR.replace( 'lihat_data' ); }); }
-> fungsi ketika di klik select option langsung redirect link ke url lain :
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
-> solusi string ada spesial karakter tanda kutip atau petik, harus menggunakan
decode (btoa) dan endcode (atob), contoh :
decode :
sendParam(\'' + btoa(item.nama_produk)+ '\')
encode :
$('#namaProduk').val(atob(nama_produk));
-> // parsing object to array untuk kebutuhan cek data yang dikirim json ke controller
var dataIdMahasiswaFromDb = [{id: 1, mahasiswa_id: "163"},{id: 2, mahasiswa_id: "167"},{id: 3, mahasiswa_id: "164"},{id: 4, mahasiswa_id: "168"},{id: 5, mahasiswa_id: "169"},{id: 6, mahasiswa_id: "170"},{id: 7, mahasiswa_id: "172"}] var dataIdMahasiswaFromDbArr = dataIdMahasiswaFromDb.map(function(v) { return [v.mahasiswa_id]; });
-> cara pemanggilan modal menggunakan class :
JS :$('[name="addToBasketBtn"]').click(function(e) {
e.preventDefault();
$('#addToBasketModal').modal('show').find('.modal-body').load($(this).attr('href'));
});
VIEW :<!-- Modal -->
<div class="modal fade" id="addToBasketModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">&{'tambah.label'} &{'ke.label'} &{'keranjang_belanja.label'}</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Tidak ada komentar:
Posting Komentar