编辑
忘记了几个重要的要点。
-
我这样做是为了避免页面刷新,从而跳回页面顶部。
-
ajax函数的成功函数将踢回一个全新的div id="comments",用错误消息替换现有的div,或者用下面的所有其他注释替换新的div
结束编辑
我一直在尝试对这个jquery ajax函数进行封装,但没有成功。我在一个页面上有X个帖子,每个帖子下都有一个插入评论的表格。我认为我已经很接近了,并尝试使用firebug进行调试,但老实说,我真的不知道我在firebug中寻找什么。
所有代码都在下面,如果有任何帮助,我们将不胜感激!
HTML形式和结构(由于重复形式,我觉得我应该使用父jquery选择方法,而不是迭代输出脚本中的每个评论后分区)
<div id="content_body_right">
<div id="activity">
....this is the area for each post....
</div>
<div id="comments">
<p class="comments_label">' . $reply_count . ' Comment</p>
<div id="comment1">
<div id="comment_user_img">
' . $imgOutputReply . '
</div>
<div id="comment_user">
<p class="user_text_comment">' . $firstNameReply . ' ' . $lastNameReply . '</p><p class="date_text_comment">' . $date_timeReply . '</p>
<p class="message_text_comment">' . $messageReply . '</p>
</div>
</div>
<div id="add_comment">
<form id="formAddComment" action="dashboard.php" enctype="multipart/form-data" method="post">
<div id="add_comment_left">
<textarea id="comment" name="comment" cols="75" rows="2">Add a Comment...</textarea>
</div>
<div id="add_comment_right">
<input id="userID" name="userID" type="hidden" value="' . $userID . '" />
<input id="actID" name="actID" type="hidden" value="' . $actID . '" />
<input id="btnComment" name="btnComment" type="submit" value="" title="Add Comment" />
</div>
</form>
</div>
</div>
</div>
好的,现在JQuery标记
<script type="text/javascript">
$(document).ready(function(){
$("#formAddComment").submit( function(e) {
e.preventDefault();
var form = $(this);
var div_add_comment = form.parent();
var div_comments = div_add_comment.parent();
$.ajax({
type: "POST",
data: form.serialize(),
url: "includes/comment.php",
success: function(msg){
$div_comments.html(msg);
}
});
return false;
});
});
</script>
最后是外部php脚本(注意:我只会在将数据提要本地化到php-vars的初始行中发布。)
if(isset($_POST['actID'])){
$actID = mysql_real_escape_string($_POST['actID']);
$userID = mysql_real_escape_string($_POST['userID']);
$comment = mysql_real_escape_string($_POST['comment']);
............other processing here...........
}
我主要怀疑我的jquery脚本。
再次感谢
我在http://jsfiddle.net/cori/JsLWq/,并且当我提交表单时,由于相对的ajax url,我确实会向不存在的http://fiddle.jshell.net/cori/JsLWq/show/includes/comment.php
发送ajax POST,所以据我所知,这不是问题所在。我认为问题在于您混淆了变量命名规则。
您开始将变量命名为普通的旧javascript对象
var form = $(this);
var div_add_comment = form.parent();
var div_comments = div_add_comment.parent();
但是,在成功处理程序中,您可以切换到相当常见的$x
约定,该约定通常用于指示变量是jQuery实例:
$div_comments.html(msg);
然而在这一点上不存在变量CCD_ 3;仅CCD_ 4。如果您在http://jsfiddle.net/cori/JsLWq/1/,它有一个ajax错误处理程序,看看你的firebug控制台,你会发现你得到了一个ReferenceError,因为$div_comments
是未定义的。
编辑
结合kgarrigan的建议,如果你在php中循环浏览你想要创建的表单,并使用索引跟踪你的位置,你可以用索引重命名你的表单,所以你的表单php/html代码看起来像:
<form id="formAddComment-' . $index . '" action="dashboard.php" enctype="multipart/form-data" method="post">
因此您最终会得到ID为formAddComment-1
的表单元素。
然后在jquery中,您将使用startsWith选择器选择所有表单,并将提交事件绑定到它们,因此:
$('[id^="formAddComment"]').submit( function(e) {
// do your ajax
});
这样,每个表单都将有自己的提交处理程序。
$("#formAddComment").submit( function(e) {
你可以使用
$(".someclassName").submit( function(e) {
就像css一样,使用#表示id。上课。只需确保将class属性添加到具有相同名称的表单中即可。你也可以试试
$("form").submit(function(e) {
其应当选择任何形式的元素。我认为函数的其余部分应该可以很好地处理这个更改,因为您使用的是"this"和parent(),而不是任何直接引用。
在firebug中,单击console,然后单击all。当你点击按钮触发ajax调用时,你应该会看到一行弹出,可能有一个加载图标,显示正在发送的post请求。您应该能够点击选项卡来查看发布的数据、给出的响应以及响应状态代码。。。
在您的编辑中,您说success函数将发送一个新的div id="comments"来替换现有的div,但正如您现在所写的,我相信它只会在现有的div中添加一个div id="comments"。但不知道这是否会导致你的问题。
如果在同一页面上有多个表单,并且具有相同的id,这将导致问题。特别是附加到submit()调用的#formAddComment id。如果有多个这样的id,这将不起作用