มีเรื่องถามการอับเดทข้อลมูลของ Jquery โค๊ตเอามาจากเว็บนี้

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา มีเรื่องถามการอับเดทข้อลมูลของ Jquery โค๊ตเอามาจากเว็บนี้

มีเรื่องถามการอับเดทข้อลมูลของ Jquery โค๊ตเอามาจากเว็บนี้

ตามหน้านี้ครับ

 

https://www.ninenik.com/แก้ไขข้อความแบบทันที_ด้วย_jQuery-160.html

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

แล้วผมจะทำให้มันส่งข้อมูลไปอับเดท ยังไงครับ ต้องส่งค่าไรออกไปครับ  แล้วฝั่ง รับข้อมูลต้องเขียนคร่าวๆยังไงช่วยทีนะครับผม

 



Teayzad31 06-10-2010 03:52:03

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

 https://www.ninenik.com/demo/swap_textarea.php  ลองดูจากโค้ด  ไปก่อน เนื้อหาคำอธิบาย จะนำไปอัพเดท ในหัวข้างต้นภายหลัง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>swap textarea editable</title>
<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="http://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);
    });
    $(".cancelButton").live("click",function(){
        var indexThis=$(this).parent(".editable").index();     
        $(this).parent(".editable").html(tempVal[indexThis]);
        $(".editable").eq(indexThis).click(function(){
            editalbeThis(indexThis);
        });
    });
    $(".okButton").live("click",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>

 



Ninenik 06-10-2010






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ