แก้ไขข้อความแบบทันที ด้วย jQuery

04 February 2009 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ข้อความ jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ jquery

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
if(count($_POST)>0){
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";	
	exit;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html{
		
}
body{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css สำหรับปุ่ม */
.okButton{
	border:1px groove #CCC;
	background-color:#390;
	color:#FFF;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.cancelButton{
	border:1px groove #CCC;
	background-color:#FF0;
	color:#000;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.editable_textarea{
	width:350px;
	height:100px;
}
</style>
<title>แก้ไขข้อความแบบทันที ด้วย jQuery</title>
</head>

<body>

<div style="margin:auto;width:550px;">
<p class="editable" id="data1">
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1<br />
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 
</p>
<p class="editable" id="data2">
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2<br />
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 <br />
test
</p>


<div id="consoleD" style="border:1px solid #CCC;background-color:#FFFFF0;color:#333;">

</div>
</div>


<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var tempVal=[];
$(function(){
	$(".editable").click(function(){
		var indexThis=$(".editable").index(this);
		tempVal[indexThis]=$(".editable").eq(indexThis).html(); 
		editalbeThis(indexThis);
	});	
	$(document).on('click','.cancelButton',function(){		
		var indexThis=$(this).parent(".editable").index();		
		$(this).parent(".editable").html(tempVal[indexThis]);
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});
	$(document).on('click','.okButton',function(){
		var indexThis=$(this).parent(".editable").index();		
		var newValue=$(this).siblings("textarea").val();
		var field=$(this).siblings("textarea").attr("id");
		$(this).parent(".editable").html(newValue);
		tempVal[indexThis]=newValue; 		
		$.post("swap_textarea.php",{
			"field":field,
			"value":newValue
		},function(data){
			$("#consoleD").html(data);
		});
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});	
});
function editalbeThis(index){
	var curThis=index;
	var gData=$(".editable").eq(curThis).text();
	var data=$("<textarea/>",{
		"name":$(".editable").eq(curThis).attr("id"),
		"class":"editable_textarea",
		"id":$(".editable").eq(curThis).attr("id"),
		"text":gData
	});
	var buttonUpdate="<br><button class="okButton">Update</button>";
	var buttonCancel="<button class="cancelButton">Cancel</button>";
	$(".editable").eq(curThis).unbind("click");
	$(".editable").eq(curThis).html(data).append(buttonUpdate).append(buttonCancel);	
}
</script>

</body>
</html>