Indra WR: Maret 2019

-> menjalankan auto load untuk fungsi input => $('.row-permohonan :input').change();

-> 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();

-> auto count per baris => jquery : var $row = $(this).closest('tr.row-permohonan');
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


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 function
function someFunction() {
    //do stuff
}

$(document).ready(function(){
    //Load City by State
    $('#billing_state_id').live('change', someFunction);   
    $('#click_me').live('click', function() {
       //do something
       someFunction();
    });
  });

-> solusi select2 tidak muncul di modal box :

-hilang tabindex="-1" di class modal box (https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/33884094#33884094)

=> cara reload datatable dengan waktu :

setTimeout(function() {

=> 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 :

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")
- grouping data json di jquery :

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 :

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);
});
- cara menghapus data array json dengan looping dan delete :

https://stackoverflow.com/questions/36127429/search-and-remove-object-from-json-array
var 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 :
$('#dataTable1').dataTable({
          "bFilter": false,
          "ordering": false,
          "info":     false,
          "bLengthChange": false
        });
- klik checkbox get value atau menjalankan function :

$("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 angka

   rupiah.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 ribuan

   if(ribuan){

    separator = sisa ? '.' : '';

    rupiah += separator + ribuan.join('.');

   }

 

   rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

   return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');

  }

 </script>

// sumber : https://www.malasngoding.com/membuat-format-rupiah-dengan-javascript/


-> 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">&times;</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>

Indra WR

Jumat, 29 Maret 2019

database

Senin, 11 Maret 2019

jquery javascript