簡體   English   中英

Ajax提交后如何使輸入字段為空?

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

我對我的應用程序實施了聊天系統
提交新評論后,它會部分刷新評論列表。
因此,新添加的評論會彈出,而無需重新加載整個頁面。

它工作正常,但問題是,提交:(之后,它不會使輸入字段為空(初始化)。

如果提交成功,如何將其清空?
5秒鍾自動刷新將是另一個阻止問題。 所以我也必須關心它。

並且如果可能的話,當用戶嘗試在10秒內提交評論時,我想彈出Flash提示“您不能發送垃圾郵件”。
假設我想從Users#show頁面提交評論

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

<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 <=這是輸入表格!

<%=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

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

視圖/用戶/refresh_part.js.erb

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

好吧,我認為這是您想清空的“正文”輸入,因此,基本上,只需像這樣添加一個id即可:

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

在您的views / users / refresh_part.js.erb中 ,您可以添加以下內容:

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

這僅在成功提交后才有效,因為從我所看到的情況來看,僅在保存注釋時才呈現模板。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM