使用Ajax在输入时提交Textarea，然后在不刷新整个页面的情况下呈现部分

Question

目前我正在尝试通过JS和Ajax在没有提交按钮的情况下发表评论帖并且它有效。

问题是当提交帖子时，页面重新加载到/post/:id/comment页面，我希望它呈现部分而不是刷新整个页面或带我到另一个页面。 我对JS不熟悉，任何帮助都将不胜感激！

这就是我正在使用的：

用于使用enter发布的JS

<script type="text/javascript" language="javascript">   
$(function(){
    $('textarea').keypress(function(e) {
        if (e.keyCode == 13 && !e.shiftKey) {
            e.preventDefault();
           var frm = this.form.submit(); 
            $.ajax({
                url: frm.attr('action'),
                data: frm.serialize(),
                complete: function(){
                    frm.submit(); 
                },
                dataType: json
            });
        }
    });
</script>

评论表

<div class="CommentField">
<%= form_for ([micropost, @comment]), :remote => true do |f| %>
<%= f.text_area :content, :class => "CommentText", :placeholder => "Write a Comment..." %>
<% end %>
</div>

编辑

评论HTML

<div class='UserCommentContainer'>
<div class='UserPicture'>
<%= image_tag comment.user.avatar.url(:bit), :class =>"PP" %>
</div>
<div class='UserComment'>
<div class='UserName sm'>
<%= link_to comment.user.name, user_path(comment.user) %>
</div>
<div class='UserCommentText'>
<%= comment.content %>
</div>
<div class='UserCommentDate'>
<%= time_ago_in_words(comment.created_at) %>
</div>
</div>
</div>

Answer 1

你需要一些可以使用URL解决的东西，所以部分不会这样做。 您应该为此功能设置一个页面来调用并调用它

Answer 2

好的，让我们再试一次......

我认为你在寻找看起来更像这样的AJAX：

$('textarea').keypress(function(e) {
    if (e.keyCode == 13 && !e.shiftKey) {
        e.preventDefault();

        var myTextArea = this,
            frm = this.form;

        this.disabled = true;           

        $.ajax({
            url: frm.attr('action'),
            data: frm.serialize(),
            complete: function(){
               $('<div>', { text: myTextArea.value }).appendTo('body');
               myTextArea.value = '';
               myTextArea.disabled = false;
            },
            dataType: 'json'
        });
    }
});

你看到在完整的方法中我们只是将<textarea>的内容附加到正文......你可能有一个容器要放入它，但这被称为“客户端渲染”意味着你正在构建在客户端而不是服务器上的DOM（或更改它）...希望这有助于确认

-----编辑-----

我应该注意你可能想要做更多的事情： .appendTo('#container') ，你在页面的某个地方有一个<div id="container"> ，我确信评论需要更多格式化什么不......

看看这个演示是否有助于您实现这个想法： http ： //jsbin.com/uruzul/edit#javascript,html,live

-----更多编辑-----

我也认为要正确地做到这一点你将不得不“使用”AJAX返回，并且我最初没有包含这个，因为它似乎没有你的代码中有任何概念，但看到之后您的评论HTML ...您将需要您的服务器返回一个看起来像这样的JSON对象：

{ 
    "userImage": "pictureUrl/image.jpg", 
    "userName": "user name here", 
    "userLink": "link/to/user/page", 
    "date": "3/5/2012", 
    "comment": "the text of the comment" 
}

然后，而不是使用complete你想开始使用success和error请参阅文档： http ： //api.jquery.com/jQuery.ajax/ 喜欢这样：

            error: function(jqXHR, textStatus, errorThrown) {
                alert('comment submit failed!\n\n' + textStatus);
            },

            success: function(data, textStatus, jqXHR){
               var cnt = $('<div>')
                .addClass('UserCommentContainer')
                .appendTo('.CommentContainer');

              $('<div>')
                .addClass('UserPicture')
                .appendTo(cnt)
                .append($('<img>', { src: data.userImage, 'class': 'pp' }));

              cnt = $('<div>')
                  .addClass('UserComment')
                  .appendTo(cnt);

              $('<div>')
                .addClass('UserName sm')
                .appendTo(cnt)
                .append($('<a>', { href: data.userLink, text: data.userName }));

              $('<div>')
                .addClass('UserCommentText')
                .appendTo(cnt)
                .text(data.comment);

              $('<div>')
                .addClass('UserCommentDate')
                .appendTo(cnt)
                .append(data.date);

               myTextArea.value = '';
            },

            complete: function(data, textStatus, jqXHR){
               myTextArea.disabled = false;
            },

Answer 3

这是一个开始。 您的代码告诉表单在ajsax发生之前提交... 我怀疑你没有回复json，所以可能仍然存在“json”dataType不正确的问题

$(function(){
    $('textarea').keypress(function(e) {
        if (e.keyCode == 13 && !e.shiftKey) {
            e.preventDefault();
           var frm = $(this).closest('form'); 
            $.ajax({
                url: frm.attr('action'),
                data: frm.serialize(),
                complete: function(){
                    /*frm.submit();*/ 

                    window.location='url/you/want';
                },
                dataType: 'json'
            });
        }
    });

})

Answer 4

你应该找到一些Rails的常规Ajax指南，我推荐一个免费的Railscast 。 有一个示例，搜索表单不会在提交时重新加载整个页面，您的情况非常相似。 另外，我建议首先使用提交按钮实现此功能。