• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Jquery Inline Edit (Yerinde Düzenleme)

Konuyu Okuyan Kişiler (0)

kralmermi

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
93
Beğeniler
0
Konum
<?php ?>
#1
Bazılarımızın çok olarak kullandığı bazılarımızın ise kullanmak istediği ancak yapmadığı yapamadığı fakat çok kolay olan bir konu inline edit. Bugün sizlere Jquery ile Inline Edit anlatacağım.

Inline Edit yapmamız için gereken malzemeler ; 1 Jquery Tanımlama Dosyası , 1 Hazırlayacağımız özel jquery komut dizimi, 1 php dosyası, 1 veritabanı, 1 html dizimi

Inline Edit'in Yapılışı ;

Datebase:
PHP:
CREATE TABLE `mesajlar` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`konu` VARCHAR( 255 ) NOT NULL ,
`mesaj` TEXT NOT NULL
) ENGINE = MYISAM ;

INSERT INTO `mesajlar` VALUES (1, 'Deneme', 'Deneme Yazı 1');
INSERT INTO `mesajlar` VALUES (2, 'Deneme 2', 'Deneme Yazı 2');
INSERT INTO `mesajlar` VALUES (3, 'Denem 3', 'Deneme Yazı 3');
INSERT INTO `mesajlar` VALUES (4, 'Deneme 4', 'Deneme Yazı 4');
Özel Jquery Komuz Dizimi
function YerindeEdit(ID){
//Bu kısımda test.php ye veri göndererek text alanımızın gelmesini sağlıyoruz.
$("#mesaj"+ID).load("test.php", {'islem':'yerindeduzenle', 'id': ID});
}

function JSIptalEdit(ID){
//Bu kısımda test.php ye veri göndererek eğer işlemi iptal etmek istiyoruz iptal işlemini gerçekleştiriyoruz
$("#mesaj"+ID).load("test.php", {'islem':'yerindeiptal', 'id': ID});
}

function JSYerindeSend(ID){
//Bu kısımda test.php ye veri göndererek düzenleme işlemimizi yapmamızı sağlıyoruz.
var mesajname = $("#textname"+ID).val();
$("#mesaj"+ID).load("test.php", {'islem':'yerindekaydet', 'id': ID, 'textname':mesajname});
}

Html Komut Dizimi
PHP:
  <table cellpadding="2" cellspacing="2" border="0" width="100%">
  <tr>
    <td width="5%">#</td>
    <td width="40%">Konu</td>
    <td width="55%">Mesaj</td>
  </tr>
  <?php
    $Sorgu=mysql_query("SELECT * FROM mesajlar ORDER BY id DESC");
	while($Sonuc = mysql_fetch_assoc($Sorgu)){
  ?>
  <tr>
    <td><?php echo $Sonuc[id]; ?></td>
    <td id="konu<?php echo $Sonuc[id]; ?>"><span onclick="YerindeEdit(<?php echo $Sonuc[id]; ?>)" ><?php echo $Sonuc[konu]; ?></span></td>
    <td><?php echo $Sonuc[mesaj]; ?></td>
  </tr>
  <?php		
	}
  ?>
  </table>
Bu kısımda php sorgu kullanarak databasedeki verilerimizi ekrana çektiriyoruz. onclick yöntemini kullanarak Jquery Komut Dizimize işlem yapmak istediğimizi belirtiyoruz. Oda bize işlemimizin sonuçlarını veriyor.

Php İşlem sayfamız test.php
PHP:
//Bu kısım bize text alanımızı getiriyor.
  if($_POST[islem] == "yerindeduzenle"){
	$Sorgu=mysql_query("SELECT * FROM mesajlar WHERE id='".$_POST[id]."'");
	$Sonuc=mysql_fetch_assoc($Sorgu);  
	echo "
	  <form id="frmyerindeedit".$_POST[id].""  name="frmyerindeedit".$_POST[id]."">
	    <input type="text" name="textname".$_POST[id]."" id="textname".$_POST[id]."" value="".$Sonuc[konu]."" size="40" /><input type="button" name="button" value="Kaydet" onclick="JSYerindeSend('".$_POST[id]."')" /><input type="button" name="iptal" value="İptal" onclick="JSIptalEdit('".$_POST[id]."')">
	  </form>
	";		  
  }
//Bu kısımda inline editi iptal ediyoruz.
if(isset($_POST) && $_POST[islem] == "yerindeiptal"){
	$Sorgu=mysql_query("SELECT * FROM mesajlar WHERE id='".$_POST[id]."'");
	$Sonuc=mysql_fetch_assoc($Sorgu);	
	echo '<span onclick="YerindeEdit(''.$_POST[action].'', ''.$_POST[id].'')">'.$Sonuc[konu].'</span>';
}
 //Bu kısımda işlemimizi kaydediyoruz.
if(isset($_POST) && $_POST[islem] == "yerindekaydet"){
	$Sorgu=mysql_query("SELECT * FROM mesajlar WHERE id='".$_POST[id]."'");
	$Sonuc=mysql_fetch_assoc($Sorgu);				
	@mysql_query("UPDATE mesajlar SET konu='".$_POST[textname]."' WHERE id='".$_POST[id]."'");
	if(!mysql_error()){
		$islemsonuc = $_POST[textname];
	}else{
		$islemsonuc = $Sonuc[konu];
	} 
	echo '<span onclick="YerindeEdit(''.$_POST[id].'')">'.$islemsonuc.'</span>';	
}
Evet arkadaşlar bir konumuzun daha sonuna geldik. Sizlerin daha iyi anlayabilmesi ve test edebilmesi amacıyla çalışma dosyasını buraya koyucam. Umarım işinize yarayacak bir çalışma olmuştur.

Not : Scriptin Çalışır Halini phpogreniyorum.com dan temin edebilirsiniz.

Bol Php'li Günler Dilerim.

Hasan RUŞANOĞLU