เมื่อหลายวันก่อนมีสมาชิก ท่านหนึ่ง.. ถามผมว่ามีคอมเม้นแบบไม่ต้อง Refresh หรือเปล่า ผมตอบว่าไม่มีแต่ก็ได้ สัญญาไว้ว่าจะมาเขียนให้ได้อ่านกัน วันนี้ก็เลยเขียนบทความคั่นรายการ Listbox ด้วย Comments box สักบทความก็แล้วกัน...
บทความนี้มีไฟล์ 3 ไฟล์ ดังนี้
jquery.js
newcomment.php
commentajax.php
ผมจะเริ่มด้วยการเขียน form ก่อน
ไฟล์ newcomment.php
<div class="main"> <div class="formcomment"> <form action="#" method="post"> <input name="title" id="name" type="text"> Name<span class="star">*</span> <input name="email" id="email" type="text"> Email<span class="star">*</span><br> <br> <textarea name="comment" id="comment"></textarea><br> <input class="submit" value="Submit" type="submit"> </form> </div> </div>จากนั้นผมก็สร้าง div สำหรับโชว์คอมเม้น อยู่ภายในคลาสเมน
<div id="showcomment"></div>ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อนอยู่ภายในไอดีโชว์คอมเม้น
ตรงนี้ผมแค่แสดงตัวอย่างให้ท่านดูเท่านั้น
<table><tbody><tr><td valign="top"> <img src="http://www.bookneo.com/images_user/admin.png" style="float:left; width:60px; margin-right:20px"> </td><td> <div style="border:2px dashed #dddddd;padding:5px;width:300px;"> <span style="font-size:16px; color:#663399; font-weight:bold"></span> <span> <?php echo "<font color='#1BAFD5'--><b>admin</b>";//$name ?> </span> <br><br> <?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?> </div> </td></tr></tbody></table>แล้วผมก็สร้าง แท็ก ol ขึ้นมาเพื่ออัพเดทคอมเม้นที่มาใหม่พร้อมกับ แท็ก li จากไฟล์ commentajax.php
<ol id="update" class="showcomment"></ol>แล้วผมก็ใส่ CSS ให้กับไฟล์ newcomment.php
.main{
margin-left:250px;
}
.submit{
margin-left:330px;
background: #2B417D;
font-weight: bold;
color:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding: 3px 3px 3px 3px;
}
textarea
{
color:#000000;
font-size:14px;
border:#1BAFD5 solid 2px;
height:124px;
margin-bottom:10px;
width:400px;
height:80px;
}
.star
{
color:#FF0000;
font-size:16px;
font-weight:bold;
padding-left:5px;
}
#email{
}
.cleaner_h5{
height:5px;
}
#update{
border:0px solid #dddddd;
width:398px;
padding:10px;
word-wrap:break-word;
overflow: hidden;
}
ol.showcomment{
list-style:none;
font-size:1.2em;
margin-left: -10px;
}
ol.showcomment li{
display:none;
position:relative;
padding:.7em 0 .6em 0;
}
ol.oldcomment{
list-style:none;
font-size:1.2em;
margin-left: 0px;
}
ol.oldcomment li{
position:relative;
padding:.7em 0 .6em 0;
}
จากนั้นก็มาถึงคิวของ jQuery ที่เราจะส่งข้อมูลแบบไม่ต้อง refresh กัน
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow"); //นำข้อมูลมาแสดงด้วยการต่อท้าย li ตัวล่าสุด
document.getElementById('email').value='';//สั่งให้ form ทั้งหมดว่างเปล่า
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});
ไปที่ไฟล์ commentajax.phpรับข้อมูลเพื่อเก็บลงฐานข้อมูล
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
}
else { }
จากนั้นก็นำข้อมูลที่รับมานำมาแสดงเพื่อ return ค่าส่งกลับไปให้กับ javascript นำไปแสดง<li class="box" valign="top"> <table><tbody><tr><td valign="top"> <img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left; width:60px; margin-right:20px"> </td><td> <div style="border:2px dashed #dddddd;padding:5px;width:300px;"> <span style="font-size:16px; color:#3859BB; font-weight:bold"> <?php echo $name;?></span> <br><br> <?php echo $comment; ?> </div> </td></tr></tbody></table> </li>โค้ดที่เสร็จแล้ว
ไฟล์ newcomment.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});
</script>
<style type="text/css">
.main{
margin-left:250px;
}
.submit{
margin-left:330px;
background: #2B417D;
font-weight: bold;
color:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding: 3px 3px 3px 3px;
}
textarea
{
color:#000000;
font-size:14px;
border:#1BAFD5 solid 2px;
height:124px;
margin-bottom:10px;
width:400px;
height:80px;
}
.star
{
color:#FF0000;
font-size:16px;
font-weight:bold;
padding-left:5px;
}
#email{
}
.cleaner_h5{
height:5px;
}
#update{
border:0px solid #dddddd;
width:398px;
padding:10px;
word-wrap:break-word;
overflow: hidden;
}
ol.showcomment{
list-style:none;
font-size:1.2em;
margin-left: -10px;
}
ol.showcomment li{
display:none;
position:relative;
padding:.7em 0 .6em 0;
}
ol.oldcomment{
list-style:none;
font-size:1.2em;
margin-left: 0px;
}
ol.oldcomment li{
position:relative;
padding:.7em 0 .6em 0;
}
</style>
<div class="main">
<div id="showcomment">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images_user/admin.png" style="float:left;
width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#663399; font-weight:bold"></span>
<span>
<?php echo "<font color='#1BAFD5'><b>admin</b>";//$name ?>
</span> <br><br>
<?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?>
</div>
</td></tr></tbody></table>
<div style="margin-top:-20px;"></div>
<ol id="update" class="showcomment"></ol>
</div>
<div class="formcomment">
<div id="loading"></div>
<form action="#" method="post">
<input name="title" id="name" type="text">
Name<span class="star">*</span>
<input name="email" id="email" type="text">
Email<span class="star">*</span><br>
<br>
<textarea name="comment" id="comment"></textarea><br>
<input class="submit" value="Submit" type="submit">
</form>
</div>
</div>
ไฟล์ commentajax.php
<?php
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
}
else { }
?>
<li class="box" valign="top">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left;
width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#3859BB; font-weight:bold">
<?php echo $name;?></span> <br><br>
<?php echo $comment;?>
</div>
</td></tr></tbody></table>
</li>
บทความนี้ก็จบลงเพียงเท่านี้ครับ ผิดพลาดยังไง ขออภัยด้วยครับ
