简体   繁体   English

Ajax提交后如何使输入字段为空?

[英]How can I make the input field empty after ajax submit?

I implemented a chat system to my app. 我对我的应用程序实施了聊天系统
It refreshes the list of comments partially when after new comment was submit. 提交新评论后,它会部分刷新评论列表。
So new added comment pops up without reloading whole page. 因此,新添加的评论会弹出,而无需重新加载整个页面。

It's working fine but the problem is, it won't make input field empty(initialize) after submit :( 它工作正常,但问题是,提交:(之后,它不会使输入字段为空(初始化)。

How can I make it empty if it succeeded at submitting? 如果提交成功,如何将其清空?
5 seconds Auto-refreshing will be another issue that's preventing. 5秒钟自动刷新将是另一个阻止问题。 So I have to care about it, too. 所以我也必须关心它。

and If possible I want to pop up flash alert 'you cant spam' when the user tried to submit comment within 10 seconds. 并且如果可能的话,当用户尝试在10秒内提交评论时,我想弹出Flash提示“您不能发送垃圾邮件”。
Let's assume as if I'm trying to submit comment from Users#show page 假设我想从Users#show页面提交评论

views/users/show.html.erb views / users / show.html.erb

<%= javascript_tag do %>
    jQuery(document).ready(function () {
        refreshPartial();
        setInterval(refreshPartial, 5000)
    });


    function refreshPartial() {
      $.ajax({
        url: "<%= show_user_path(@user) %>/refresh_part",
        type: "GET",
        dataType: "script",
      });
    }
<% end %>
......
<span id="chat">
<%= render 'users/comment' %>
</span>
<%= render 'users/comment_input' %>

views/users/_comment.html.erb views / users / _comment.html.erb

<table>
  <tr>
    <th>ID</th>
    <th>PIC</th>
    <th>Body</th>
    <th>Subject</th>
    <th>Posted by</th>
    <th>Delete</th>
  </tr>

<% @comments.each do |comment| %>
  <tr id="<%= dom_id(comment) %>">
    <td><%= comment.id %></td>
    <td>
            <% if comment.comment_icon? %>
                <ul class="thumbnails">
                <%= image_tag(comment.comment_icon.url(:thumb),:height => 100, :width => 100, :style => 'border:3px double #545565;' ) %>
                </ul>
            <% end %>

    </td>
    <td><%= comment.body %></td>
    <td><%= comment.subject %></td>
    <td><%= comment.user.user_profile.nickname if comment.user.user_profile %></td>
    <td>
    <%= button_to 'destroy', polymorphic_path([@user, comment]), :data => {:confirm => 'Are you sure?'}, :method => :delete, :disable_with => 'deleting...', :remote => true, :class => 'btn btn-danger' if current_user && current_user.id == comment.user_id %>
    </td>
    </tr>
<% end %>
</table>

<%= paginate @comments, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>

views/users/_comment_input.html.erb <= This is input form!!!!! views / users / _comment_input.html.erb <=这是输入表格!

<%=form_for(([@user, @comment]), :remote => true) do |f| %>
    <div class="field">
      <%= f.label :body %><br />
      <%= f.text_field :body %>
    </div>
    <div class="field">
    <%= f.file_field :comment_icon %>
    </div>
  <div class="actions">
    <%= f.submit %>
  </div>

<% end %>

comments_controller.rb comments_controller.rb

def create
  commentable = @community_topic||@community||@user
  @comments = commentable.comment_threads.order("updated_at DESC").page(params[:page]).per(5)
  @comment = Comment.build_from(commentable, current_user.try(:id), params[:comment][:body]) 
  @comment.comment_icon = params[:comment][:comment_icon] 


  if @user
    @following_users = @user.all_following(order: 'updated_at DESC') 
    @followed_users = @user.followers 
    @communities_user = @user.get_up_voted(Community).order("updated_at ASC").page(params[:page]).per(5)
  elsif @community      

  end

  last_comment = Comment.where(:user_id => current_user.id).order("updated_at").last

  if last_comment && (Time.now - last_comment.updated_at) <= 10.second  
    flash[:notice] = "You cannot spam!" 
    render :template => template_for(commentable)
  elsif @comment.save 
    #if  @community_topic.empty?
        @comments = commentable.comment_threads.order("updated_at DESC").page(params[:page]).per(5)
        @comment = commentable.comment_threads.build

        respond_to do |format|
            format.html { redirect_to [@community, commentable].uniq, :notice => "comment added!"  }
            format.js do
                if @community.present?
                  render 'communities/refresh_part' 
                elsif @community_topic.present?
                  render 'community_topics/refresh_part'
                elsif @user.present?
                  render 'users/refresh_part'
                end
            end
        end 
  else
    render :template => template_for(commentable)
  end
end

views/users/refresh_part.js.erb 视图/用户/refresh_part.js.erb

$('#chat').html("<%= j(render(:partial => 'users/comment')) %>")

Well I assume this is the "body" input you want to empty so basically, just add an id to it like this : 好吧,我认为这是您想清空的“正文”输入,因此,基本上,只需像这样添加一个id即可:

<%= f.text_field :body, :id => "body_input" %>

And in your views/users/refresh_part.js.erb , you can add something like : 在您的views / users / refresh_part.js.erb中 ,您可以添加以下内容:

$('#body_input').val('');

This should work only if it succeded at submitting because from what I saw, your template is rendered only if the comment is saved. 这仅在成功提交后才有效,因为从我所看到的情况来看,仅在保存注释时才呈现模板。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM