10/10/2018, 09:55

Hỏi 1 chút về jquery và ajax làm comment giống FB

em làm theo hướng dẫn tạo quick comment giống trong FB
link đây http://yensdesign.com/2009/01/create...d-ajax-jquery/
DEMO http://www.yensdesign.com/tutorials/shoutbox/
CODE http://yensdesign.com/tutorials/shoutbox/shoutbox.zip

em làm bắt chước xong rồi ,nhưng mà cái của nó ko có delete comment
em chỉnh sửa thêm nhưng mà ko chạy được , các cao thủ chỉ cho em với
cụ thể là trong shoutbox.js của nó em thêm đoạn sau

$(".delete").click(function(){
var id = $(this).val("id");
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=delete&id=" + id,
complete: function(){
updateShoutbox();
}
});
});

còn trong shoutbox.php của nó em sửa thêm nút delete này
case "update":
$res = getContent($link, 20);
while($row = mysql_fetch_array($res)){
$result .= "<li><strong>".$row['user']."</strong><img src="css/images/bullet.gif" alt="-" />".$row['message'].
" <span class="date">".$row['date']."</span>".
"<span class="del"><a href="#" class="delete" id=".$row['id'].">.Delete.</a></span></li>";
}
echo $result;
break;

thêm function delete và action=delete cũng trong shuotbox.php
function deleteMessage($id){
$query = "DELETE FROM shoutbox WHERE id=id";
$res = @mysql_query($query) or die ("Error: ".mysql_error());
}

case "delete":
echo deleteMessage($_POST['id']);
break;


xong em chạy thử bấm nút delete nhưng không xảy ra gì hết các bác chỉ cho em chỗ sai với,hoặc hướng dẫn cho em 1 đoạn mã khác với
CODE em đã sửa đây http://www.mediafire.com/?mzlmlnytzz2
vvthong viết 12:00 ngày 10/10/2018
Bạn xem lại cách dùng jquery

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});


Xóa xong rồi bạn thông báo và gọi hàm load lại dữ liệu trong shoutbox
chameron viết 12:08 ngày 10/10/2018
em dùng thế này $(".delete").click(function(){
var id = $(this).val("id");
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=delete&id=" + id,
complete: function(){
updateShoutbox();
}
});
});

và html
<span class="del"><a href="#" class="delete" id= .$row['id']>.Delete.<a><span>

em dùng đoạn html với var id = $(this).val("id") bị sai sao ấy
bác có thể cho em một gợi í với
trong vòng lặp while($row = mysql_fetch_array($res)) em thêm vào nút delete mỗi nút sẽ giữ ID của mỗi comment, khi bấm vào delete thì sẽ truyền
action = delete và ID của comment đến 1 trang PHP để xử lý del dữ liệu
vvthong viết 12:04 ngày 10/10/2018
Bạn vẫn chưa hiểu ý của tớ

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg);
}
});

msg ở đây là dữ liệu trả về sau khi gọi hàm delete

Để mai lên cty tớ sửa lại code của bạn
chameron viết 12:06 ngày 10/10/2018
vì em học qua ví dụ nên ko hiêu complete: function()
với success:function() khác gì nhau, bác xem sửa lại cho em nhé
làm sao để bấm delete thì lấy được Id của comment để gửi tới shoutbox.php
thực hiện xóa

[=========> Bổ sung bài viết <=========]

up up lên nào
<a href="#" class="delete" id= .$row['id']> Delete </a>

$("a.delete").click(function(){
var id = $(this).attr("id");
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=delete&id=" + id,
success: function(data){
updateShoutbox();
}
});
});
vẫn hem chạy (
vvthong viết 12:06 ngày 10/10/2018
Mình sửa nhưng chưa test, bạn chịu khó test vậy. Đang chạy dự án nên hơi bận, về nhà lại không có máy nên xem chay thôi. Bạn thông cảm vậy !!

JS------------------------------------------------------------------------
Code:
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/

$(document).ready(function(){
	//global vars
	var inputUser = $("#nick");
	var inputMessage = $("#message");
	var loading = $("#loading");
	var messageList = $(".content > ul");
	
	//functions
	function updateShoutbox(){
		//just for the fade effect
		messageList.hide();
		loading.fadeIn();
		//send the post to shoutbox.php
		$.ajax({
			type: "POST", url: "shoutbox.php", data: "action=update",
			complete: function(data){
				loading.fadeOut();
				// lay du lieu xuat ra tu shoutbox.php ghep vap messageList
				messageList.html(data.responseText);
				messageList.fadeIn(2000);
			}
		});
	}
	//check if all fields are filled
	function checkForm(){
		if(inputUser.attr("value") && inputMessage.attr("value"))
			return true;
		else
			return false;
	}
	
	//Load for the first time the shoutbox data
	updateShoutbox();
	
	//on submit event
	$("#form").submit(function(){
		if(checkForm()){
			var nick = inputUser.attr("value");
			var message = inputMessage.attr("value");
			//we deactivate submit button while sending
			$("#send").attr({ disabled:true, value:"Sending..." });
			$("#send").blur();
			//send the post to shoutbox.php
			$.ajax({
				type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
				complete: function(data){
					messageList.html(data.responseText);
					updateShoutbox();
					//reactivate the send button
					$("#send").attr({ disabled:false, value:"Shout it!" });
				}
			 });
		}
		else alert("Please fill all fields!");
		//we prevent the refresh of the page after submitting the form
		return false;
	});
	/*$(".delete").click(function(){
		//var id = $(this).val("id");
		// lay gia tri id co trong the a
		var id = $(this).attr('id');
		$.ajax({
			type: "POST", url: "shoutbox.php", data: "action=delete&id=" + id,
			complete: function(){
				updateShoutbox();
			}
		});
	});*/
});

function delete(id) {
	$.ajax({
		type: "POST", 
		url: "shoutbox.php", 
		data: "action=delete&id=" + id,
		success: function(){
			updateShoutbox();
		}
	});
}
PHP------------------------------------------------------------------------
MANAGE REQUESTS
/******************************/
Code:
if(!$_POST['action']){
	//We are redirecting people to our shoutbox page if they try to enter in our shoutbox.php
	header ("Location: index.html"); 
}
else{
	$link = connect(HOST, USER, PASSWORD);
	switch($_POST['action']){
		case "update":
			$res = getContent($link, 20);
			while($row = mysql_fetch_array($res)){
				$result .= "<li><strong>".$row['user']."</strong><img src=\"css/images/bullet.gif\" alt=\"-\" />".$row['message'].
				" <span class=\"date\">".$row['date']."</span>".
				"<span class=\"del\"><a href=\"#\" onclick=\"delete('{$row['id']}')\" class=\"delete\" id=".$row['id'].">.Delete.</a></span></li>";
			}
			echo $result;
			break;
		case "insert":
			echo insertMessage($_POST['nick'], $_POST['message']);
			break;
		case "delete":
			deleteMessage($_POST['id']);
			break;
	}
	mysql_close($link);
}
Nếu muốn dùng code cũ thì delete cái dòng onclick trong tag span đi nhé
chameron viết 12:00 ngày 10/10/2018
thank bạn nhiều nhé
mình đã test vẫn ko được bạn ah`
khi thêm function delete(id) của bạn vào shout.js thì shout.js ko còn hiệu lực với index.html ,
mình xóa function delete(id) đi thì index.html load dữ liệu bình thường
sau đó mình nhét cái function delete(id) vô <head></head> của index.html thì nó chạy bình thường
nhưng mà ấn delete vẫn ko thực hiện function delete bạn ah , chả hiểu là sao nữa :-??
vvthong viết 12:02 ngày 10/10/2018
Giờ mình mới để ý là hàm deleteMessage trong php của bạn bị sai.
Bạn lưu ý chỗ in đậm nhé, biến trong php là phải có dấu $ ở đầu

Code:
function deleteMessage($id){
	$res = @mysql_query("DELETE FROM shoutbox WHERE id={$id}");
}

[=========> Bổ sung bài viết <=========]

Vào đây down về nè, tui test chạy OK rồi

http://www.mediafire.com/?4wg2yuimfmd
chameron viết 11:57 ngày 10/10/2018
thank bác nhé , ok oài
sao câu lệnh sai mà or die . mysql_error(); ko hoạt động nhỉ >.<
các bác nào muốn sài cm giống FB thì dow về nhe
sửa lại giao diện mình thik là được
Bài liên quan
0