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

Refresh content halaman secara ajax dengan fungsi load

untuk meload atau menambahkan isi dari suatu halaman lain kedalam halaman kita secara ajax dapat digunakan fungsi load pada jquery

misal kita punya 2 halaman a.php dan b.php

kita akan meload/memasukkan  isi halaman b.php kedalam a.php secara ajax

save sebagai a.php

  <!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="../jquery-1.4.1.min.js"></script>
</head>
<body>
  
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
  
<script>
$("#success").load("http://localhost/jquery/load/not-heire.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

</body>
</html>

save sebagai b.php

<?php
echo "hasil loading";
//echo site_url();
?>