PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

04 February 2009 By 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>




อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: jquery ข้อความ







URL สำหรับอ้างอิง