PHP MySQL Inline Editing menggunakan jQuery Ajax

0 254

Dalam tutorial ini, kita akan melihat tentang PHP inline editing menggunakan jQuery AJAX. Penyuntingan inline akan mempermudah usaha pengguna dengan memungkinkan pengeditan dalam tampilan daftar itu sendiri. Kita tidak perlu membiarkan pengguna menavigasi ke halaman terpisah yang menampilkan formulir edit.

Dalam contoh ini, kita menggunakan tabel HTML untuk menampilkan hasil database. Kami menambahkan atribut contentEditable ke sel tabel untuk memungkinkan pengeditan inline dengan mengklik tampilan sel. Sebelumnya di tutorial AJAX Add Edit Delete, kita sudah melakukan hal yang sama dengan menggunakan jQuery show / hide.

Konten yang Dapat Diedit HTML

Kode HTML berikut digunakan untuk menampilkan tabel yang dapat diedit ke pengguna. Kami memanggil jQuery pada acara blur dari sel yang bisa diedit dengan melewatkan data sel.

<table class="tbl-qa">
  <thead>
	  <tr>
		<th class="table-header" width="10%">Q.No.</th>
		<th class="table-header">Question</th>
		<th class="table-header">Answer</th>
	  </tr>
  </thead>
  <tbody>
  <?php
  foreach($faq as $k=>$v) {
  ?>
	  <tr class="table-row">
		<td><?php echo $k+1; ?></td>
		<td contenteditable="true" onBlur="saveToDatabase(this,'question','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["question"]; ?></td>
		<td contenteditable="true" onBlur="saveToDatabase(this,'answer','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["answer"]; ?></td>
	  </tr>
<?php
}
?>
  </tbody>
</table>

Hubungi Update via jQuery AJAX

Skrip berikut menerima referensi sel tabel yang dapat diedit, nama kolom dan nilai kolom disunting secara inline. Ini mempersiapkan permintaan posting AJAX menggunakan data ini dan mengirimkannya ke sisi server melalui jQuery AJAX. Pada skrip PHP, kami mengupdate database dengan data posting ini dan mengirim respon ke panggilan AJAX dengan konten yang dimodifikasi.

<script>
function saveToDatabase(editableObj,column,id) {
	$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
	$.ajax({
		url: "saveedit.php",
		type: "POST",
		data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
		success: function(data){
			$(editableObj).css("background","#FDFDFD");
		}        
   });
}
</script>

PHP MySQL Update

File PHP ini dipanggil via AJAX untuk menjalankan query update MySQL untuk konten yang telah diedit.

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$result = $db_handle->executeUpdate("UPDATE php_interview_questions set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);
?>
Demo

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.