【问题标题】:How do I append an LI to an UL using jQuery forms.js如何使用 jQuery forms.js 将 LI 附加到 UL
【发布时间】:2010-06-25 13:17:16
【问题描述】:

我在一个页面上有多个表单,我正在尝试使用 jQuery form.js 来保存发布的每个评论,然后将评论附加到 UL。它的保存部分工作正常。但是,我无法获得正确更新 UL 的评论。见以下代码:

//My Form
<form method="post" action="includes/answer.php" id="respond">
<input name="key_id" id="key_id" type="hidden" value="'.$row['thekey'].'" />
<textarea name="comment" id="comment"></textarea>
</form>

//The UL
<ul id="'.$row['thekey'].'" class="answer"></ul>

//The jQuery
$(document).ready(function() {
    jQuery('form').ajaxForm({
        target: 'ul',
        success: function(data) {
            $('ul#' + data.id).prepend("<li style='display:none'>"+data.comment+"</li>").fadeIn('slow');
            $("ul#" + data.id +"li:first").fadeIn();
        }
    });
});

//Postback Code
    $message = strip_tags(mysql_real_escape_string($_POST['comment']));
    $id = strip_tags(mysql_real_escape_string($_POST['key_id']));

    $sql_id = 'SELECT id FROM questions WHERE thekey = "'.$id.'"';
    $select_result = mysql_query($sql_id);

    if($select_result) {
        $row = mysql_fetch_array($select_result);
        $sql = 'INSERT INTO answers (answer, question_id) VALUES("'.$message.'", '.$row['id'].')';
        $result = mysql_query($sql);

        if($result) {
            print json_encode(array("id" => $id, "comment" => $message));
        }
    }

当前正在输出一个类似于 {"id":"sadfasdf2","comment":"ds"} 的数组来代替 ul 标记。如何让它在 LI 中输出实际评论?

【问题讨论】:

  • 您能提供一些示例输出或链接吗?我没有完全理解你的最后两句话。

标签: php javascript jquery ajax json


【解决方案1】:

变化:

$('ul#' + data.id).prepend("<li style='display:none'>"+data.comment+"</li>").fadeIn('slow');

到:

$('ul#' + data.id).prepend($("<li></li>").text(data.comment).hide()).fadeIn('slow');

一点解释:

$("&lt;li&gt;&lt;/li&gt;") 是您创建新元素的方式。然后您可以在该元素上.text(content) 设置内容(.html(htmlcode) 也可以)。 .hide()style="display:none" 相同。

编辑:哦,另外,删除 target: 'ul', .. 告诉 ajaxForm 直接将响应注入 UL 标记的配置。

【讨论】:

  • 我试了一下,它似乎仍然在输出数组,而不是实际将 li 添加到列表中。
  • 不,还有其他问题...我删除了目标:'ul',它仍然正确保存,但没有将新评论添加到列表中。嗯....
  • 然后删除 .hide() 部分 :)
  • 或将 .fadeIn() 移到前面的括号中:$('ul#' + data.id).prepend($("&lt;li&gt;&lt;/li&gt;").text(data.comment).hide().fadeIn('slow'));
  • 如您问题的标题所示,使用.append() 而不是.prepend() >___
猜你喜欢
  • 2016-09-01
  • 1970-01-01
  • 2012-08-15
  • 2011-09-17
  • 1970-01-01
  • 1970-01-01
  • 2013-11-20
  • 1970-01-01
  • 2011-01-17
相关资源
最近更新 更多