jquery append automatically complete tag html

jika anda menggunakan fungsi append pada jquery , fungsi ini biasanya akan melengkapi tag anda secara otomatis, misalnya anda melakukan custom html untuk

<span>

dan ketika kita memakai fungsi append jquery maka tag html tersebut akan berubah menjadi

 <span> </span>

tidak cocok bagi yang sedang melakukan custom tag dimana kita harus melengkapi tag penutup atau closing tag setelah kita lakukan operasi kita

solusinya adalah jangan gunakan fungsi append tapi masukkan pada variabel javascript,baru ditampilkan menggunakan  perintah append


var tampung data =''

bla bla bla....

kemudian baru lakukan append jika dirasa tag sudah perlu ditampilkan
semoga berguna 🙂

referensi :

tombol reset data pada datagrid jeasyui from button

reset-datagrid

untuk melakukan load datagrid dari sebuah button , kita akan seditik tricky yaitu memberi button reset dengan query pencarian kosong sehinga sama dengan kita meload data awal

seperti select * where data =”

berikut tabel htmlnya datagridnya , kita akan meload data dari datagrid dengan


<table id="dg" title="Menu Data Kategori" class="easyui-datagrid" style="width:700px;height:250px"
url="alamatloaddata"
toolbar="#toolbar" pagination="true" loadMsg="Loading!..."
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" hidden='true' width="50">ID</th>
<th field="kat" width="50">Kategori</th>
</tr>
</thead>
</table>

<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Delete Kategori</a>
<span>Kategori:</span>
<input id="cari" style="line-height:26px;border:1px solid #ccc">

<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
<span style="float:right;padding:5px">
<a href="#" class="easyui-linkbutton" plain="true" onclick="reset()">Reset</a>
</span>
</div>
<!-- form save -->
<div id="dlg" class="easyui-dialog" style="width:500px;height:200px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">Isi untuk menambah kategori</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>Nama Kategori</label>
<input name="kat" class="easyui-textbox" type="text">
<input name="id" type="hidden">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">Simpan</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Batal</a>
</div>

 

file resetnya


function reset(){
$('#cari').val('');
$('#dg').datagrid('load',{
cari: $('#cari').val()

})

untuk mengkaitkan tombol reset dengan load datanya tulis onclick=”reset()” seperti pada kode dibawah ini

<a href=”#” class=”easyui-linkbutton” plain=”true” onclick=”reset()”>Reset</a>

$(‘#dg’).datagrid(‘load’,{
cari: $(‘#cari’).val()

})

adalah kode untuk meload data grid ke url yang telah dipasang dengan membawa variabel cari dengan metode post

semoga berguna 🙂

referensi

cek isi json obyek dengan javascript

untuk cek apakah obyek json berisi atau tidak  dengan javascript anda dapat menggunakan

jika pake jquery


jQuery.isEmptyObject({});
//jika kosong akan menghasilkan nilai true

jika pakai javascript

function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}

return true && JSON.stringify(obj) === JSON.stringify({});
}

semga berguna 🙂

referensi :

filter untuk input numerik dengan javascript

kode sederhana untuk filter dengan javascript untuk input numerik, kita gunakan regex dan fungsi javascript

<html>
<body>
<script>
function textCounter(f) {

f.value = f.value.replace(/\D/ig,'');

}</script>

<form>

<input type='textbox' onKeyDown="textCounter(this)"
onKeyUp="textCounter(this)" >

</form>

</body>
</html>

semoga berguna 🙂

Dasar Regex

regex biasa digunakan untuk filtering, mencari suatu pola dalam sebuah string dan menggantinya

kali ini kita gunakan dibawah ini html  untuk tesnya

<!DOCTYPE html>
<html>
<body>

<script>
var str = "ini string yang mau dicari";  // diganti dengan string anda
var regg = /s..i/g;    // diganti dengan regex anda
document.write(str.match(regg));

</script>

</body>
</html>
 

atau kalou mau coba online bisa disini http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_i

sintak regex terdiri dari delimiter,pattern,modifier

contoh /hallo/g

/ = delimiter (digunakan untuk menentukan dimana pattern berawal dan berakhir)
hallo = pattern (pola string yang ingin ditemukan atau dicocokan)
g = modifier (mode regex meng-handlehasil pencarian string atau teks)

Modifier

terdiri dari GlobalCase-insensitive dan Multiline.

jika tanpa modifier (modifier dikosongi) berarti ini mode standart artinya
akan dicari hanya satu kata yang sama saja, sisanya akan diabaikan pada mode standar berlaku case sensitiv (huruf besar / kecil)

contoh

<script> var str = "Ini ini ini yang mau dicari";
 var regg = /ini/;
 document.write(str.match(regg));
 </script>
hasilnya : ini
 

walaupun karakter ini ada banyak tetapi tertulis satu dan yang diambil karekter Ini
karena kita memakai mopdifier standart (modifier yang dikosongi dan sifatnya case sensitif)

modifier g bersifat semua yang sama

modifier i bersifat incasesensitif biasanya digabungkan dengan modifier g menjadi ig

Wilcard

titik (.) dalam regex adalah wilcard artinya dapat mempunyai kecocokan dengan apapun  kecuali baris baru(“\n”) , satu wilcard hanya cocok dengan satu charakter

contoh

<script> var str = "string";
 var regg = /s.r/;
 document.write(str.match(regg));
 </script>
hasilnya : str
//jika ingin lebih maka tambahkan karekter wilcardnya misal
var regg = /s...n/;
hasilnya :strin
 

Caping ^  digunakan untuk mengecek kesamaan padaawal kalimat

contoh

<script> var str = "adastring";
 var regg = /ada/;
 document.write(str.match(regg));
 </script>
hasilnya : ada

<script> var str = "stringada";
 var regg = /ada/;
 document.write(str.match(regg));
 </script>
hasilnya : null ( tidak ditemukan)
 

bersambung
referensi :

http://belajarwebdesign.com/web-programming/mengenal-regular-expression/

http://bisakomputer.com/tutorial-php-pengenalan-dasar-dasar-regex/

http://blog.haqqi.net/2011/07/pengenalan-regex-php/

http://www.w3schools.com/js/js_obj_regexp.asp

menghitung sisa karakter textarea dengan javascript

kali ini kita membuat script yang akan menghitung sisa / jatah karakter yang dapat di inputkan pada sebuah textarea

problem utamanya adalah karakter enter dimana karakter ini dibaca 2 oleh browser

ok terimaksih buat

http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute?lq=1

akire nemu buat ngatasin ketikan enternya,sebenarnya ada juga disini http://www.codefromjames.com/wordpress/?p=15

tapi susah dimengerti kodenya (sori agak noob gua hehehe)dan masih ada jeda / range

waktu untuk memunculkan hasilnya ketika diketik

file lengkapnya,simpan dengan nama sisakarakter.html disini saya memakai batas 148 jika ingin lebih / kurang nilai ganti semua nilai 148

dengan nilai yang anda inginkan

<html>

<head>
<script Language="JavaScript">
function textCounter(field,cntfield,maxlimit,f) {

var addition = 0;
 var newLines=f.value.match(/(\r\n|\n|\r)/g);
 if (newLines != null) {
 addition = newLines.length;
 }
 cntfield.value = (maxlimit - field.value.length) - addition;

}
</script>
</head>

<body>

<form id="sms_id" method="post" name="sms" >

<textarea style="display:inline;font-size: 14pt;" name="pesan" wrap="off"
 rows="10" maxlength="148" cols="40"
onKeyDown="textCounter(document.sms.pesan,document.sms.maks,148,this)"
onKeyUp="textCounter(document.sms.pesan,document.sms.maks,148,this)" ></textarea>
<input name="maks" type="text" id="batas" size="4" value="148" readonly/> Char
</form>
</body>
</html>

semoga berguna 🙂

referensi

http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute?lq=1

error checkbox undefined javascript

pernahkah ketika membuat checkbox javascript  anda mendapat nilai undefined pada checkbox,

cek

cek box yang tinggal satu yaitu cek box angga (cek box “semua” beda nama dengan cekbox angga )

hal ini terjadi pada saya ketika saya membuat select dan unselect all checkbox nah ketika hanya ada satu  checkbox yang ada, ketika dilakukan select all nilainya menjadi undefined, saya menggunakan hp[] sebagai nama pada checkbox penmggunaan tanda[] adalah ketika di proses di php akan menjadi array

masalahnya  dari sini http://objectmix.com/javascript/209082-number-checkboxes-array-length-returned-undefined.html

The length was returned as ‘undefined’ because a single checkbox is
not an array. It only becomes an array when at least two checkboxes
have the same name (this change may occur when we create the
checkboxes dynamically and we may not know the number in advance). So
before looping for checked/unchecked, etc. we must first see if
there’s a single checkbox or there’s a number of checkboxes (array)
whose length is returned as a number.

tips nya kita buat filter


chkvaluer=document.sms.elements['hp[]'];  //pengambilan cek box

if(chkvaluer.length ===undefined) {
//jika   undefined lakukan ini
}

else {

//jika tidak undefined lakukan ini

}

bebrapa referensi : http://objectmix.com/javascript/209082-number-checkboxes-array-length-returned-undefined.html

semoga berguna 🙂