การทำ vote จากกระทู้ตัวอย่างครับ
http://www.ninenik.com/เพิ่มลูกเล่นการโหวด_Vote_หรือ_Rating_ด้วย_jQuery_และ_CSS-161.html
คือว่าถ้าผมไม่อยากให้กดปุ่ม submit แล้วส่งข้อมูลไปละครับผมต้องแก้โค้ดตรงไหน
คือว่าอยากให้เวลาเลือกแล้วคลิก แล้วส่งข้อมูลไป Save ลงฐานข้อมูล พอ save เสร็จก็แจ้งเตือนว่าคุณได้ทำการ Vote เรียบร้อยแล้ว
พอดีลองแก้ไขแก้มา รูปภาพไม่ขึ้นบ้างส่งข้อมูลไม่ได้บ้าง ผมจึงมาของให้พี่นิคช่วยแก้ครับ
แทรก input hidden ไป ไว้นอกตัว vote ก็ได้
<input name="h_varID" type="hidden" id="h_varID" value="กำหนดค่า id" />
ส่วนในฟังก์ชัน ก็เรียกค่ามาเก็บในตัวแปร
var idValue=$("#h_varID").val();
ผมก็เคยทำแบบพี่นิกยกตัวอย่างให้ดูไปแล้วรอบหนึ่งก่อนจะตั้งคำถามอ่ะครับ
แต่ว่าผมไม่รู้ว่าจะส่งตัวแปรมายังไง นี้คือโค้ดที่แก้ไขปัจจุบัน
$("ul.iVote li").click(function(){
var prObj=$(this).parent("ul");;
if(prObj.children("li").hasClass("VoteD2")==false){
var Clto=prObj.children("li").index(this);
var idValue=prObj.children("li").index(this); // ตรงนี้ ผมสร้างตัวแปรเพิ่มไม่รู้ว่าถูกหรือเปล่า เพราะ idValue นั้นยังไม่มีตัวแปรใน function เลย
var Clto2=Clto;
Clto+=1;
$.post("save_vote.php",{voteValue:Clto,idVote:idValue},function(){
alert("Vote "+Clto+" Points Thank you");
});
prObj.next("input").val(Clto);
prObj.children("li:lt("+Clto+")").addClass("VoteD2");
prObj.children("li:gt("+Clto+")").removeClass("VoteD");
prObj.children("li").unbind("mouseover");
prObj.unbind("mouseout");
prObj.nextAll("span.showVoteText:eq(0)")
.html(arrTextVote[Clto2]);
}
});
แล้วคำสั่งพวกนี้เราก็ไม่ต้องไปยุ่งกับมันใช้เปล่าพี่
<ul class="iVote">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ตัวนี้ผมทำเพิ่ม เพือสร้าง ตัวแปรใน function ไม่รู้ว่าถูกหรือเปล่า
var idValue=prObj.children("li").index(this);
ถ้าไม่มีตัวแปรนี้มันจะ ลอง run ดูแล้วเหมือน function มันไม่ทำงาน มันนิ่งไปเลยครับ
รบกวนพี่อีกครั้งครับ
<script type="text/javascript">
$.post("save_vote.php",{
voteValue:Clto,
idVoteValue:idValue
},function(){
alert("OK");
});
</script>
ถ้าส่งค่าไปหลายอัน ก็เพิ่มเข้าไป ได้ โดยให้อยู่ในรูปแบบ
ชื่อตัว : ค่าตัวแปร ดามด้วย , (comma) ถ้าเป็นตัวสุดท้ายไม่ต้องมี commaตอนนี้ทำได้แล้วครับ ข้อมูลบันทึกให้ล่ะแต่ว่าเราจะให้มันตรวจสอบ id ด้วยละครับ
นี้คือโค้ดที่ผมแก้ไขนะครับ
$("ul.iVote li").click(function(){
var prObj=$(this).parent("ul");;
if(prObj.children("li").hasClass("VoteD2")==false){
var Clto=prObj.children("li").index(this);
var Clto2=Clto;
Clto+=1;
$.post("save_vote.php",{voteValue:Clto},function(){
alert("OK");
});
prObj.next("input").val(Clto);
prObj.children("li:lt("+Clto+")").addClass("VoteD2");
prObj.children("li:gt("+Clto+")").removeClass("VoteD");
prObj.children("li").unbind("mouseover");
prObj.unbind("mouseout");
prObj.nextAll("span.showVoteText:eq(0)")
.html(arrTextVote[Clto2]);
}
});
อันนี้บันทึก
mysql_query("Update web_test set vote='".$_REQUEST[voteValue]."' where id='$id'");
เราจะส่งไอดีมาตรวจสอบด้วยยังไงดีครับ ถ้าแบบนี้ ได้ mysql_query("Update web_test set vote='".$_REQUEST[voteValue]."' ); แต่ถ้ามี ไอดีแล้วมันไม่ได้ คือผมอยากให้ส่งไอดีมาด้วยครับ
ขอบคุณมากครับ
ใช้แบบนี้หรือเปล่า ทำแล้วค่ามันไม่ยอมส่งไปครับ
$("ul.iVote li").click(function(){
var prObj=$(this).parent("ul");;
if(prObj.children("li").hasClass("VoteD2")==false){
var Clto=prObj.children("li").index(this);
$.post("save_vote.php",{voteValue:Clto},function(){
alert("OK");
});
var Clto2=Clto;
Clto+=1;
prObj.next("input").val(Clto);
prObj.children("li:lt("+Clto+")").addClass("VoteD2");
prObj.children("li:gt("+Clto+")").removeClass("VoteD");
prObj.children("li").unbind("mouseover");
prObj.unbind("mouseout");
prObj.nextAll("span.showVoteText:eq(0)")
.html(arrTextVote[Clto2]);
}
});
ไฟล์ save_vote.php
<? echo"<script>alert('$_POST[voteValue]');</script>"; ?>
จะลองทดสอบดูว่าค่าถูกส่งมาหรือเปล่า พอคลิกแล้ว alert Ok แล้วก็เงียบเลยครับ
ไม่รู้ว่าใส่ถุกที่หรือเปล่า
ใส่ตอนที่ใช้ event click ใน $("ul.iVote li").click(function(){
$("ul.iVote li").click(function(){
// ..................
// ...................
// ใส่ต่อท้ายโค้ดก่อนหน้า ส่งข้อมูล ajax แบบส่งตัวแปร post รับไฟล์ก็ $_POST['voteValue']
$.post("save_vote.php",{voteValue:Clto},function(){
alert("OK");
});
});
