Question

我创建了一个AJAX Rails表单，可以实时向视图发布消息。当我点击提交时，由于某种原因我得到重复项返回DOM。当我做浏览器刷新时，副本就不见了。我不知道是什么造成了这个？

message.js

$(document).ready(function(){
  $(document).bind("ajaxSuccess", "form.message_form", function(event, xhr, settings){
    var $messages_list = $(".messages-list");
    $("<div>").html(xhr.responseJSON.content).appendTo($messages_list);
    $("<div>").html('sent by ' + xhr.responseJSON.sender_name).appendTo($messages_list);
    $("<div>").html('sent at ' + xhr.responseJSON.created_at).appendTo($messages_list);
    $("<br/>").appendTo($messages_list);
    $('#message_content').val('');
  });
});

index.erb

<div class="row">
    <div class="large-12 columns">
      <h2>Messaging board</h2>

      <div class="messages-list">
        <% @messages.each do |message| %>
          <% sender = User.find message.sender_id %>
          <div><%= message.content %></div>
          <div><%= "sent by #{sender.first_name} #{sender.last_name}" %></div>
          <div><%= "sent at #{message.created_at}" %></div>
          <br/>
        <% end %>
      </div>

      <br>

      <%= render 'form' %>

    </div>
</div>

形式：

<div class="row">
    <div class="large-12 columns">
        <%= form_for(@message, remote: true, format: :json, html: {class: :message_form}) do |f| %>
          <% if @message.errors.any? %>
            <div id="error_explanation">
              <p><%= pluralize(@message.errors.count, "error") %> prohibited this message from being saved:</p>

              <ul>
              <% @message.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
              </ul>
            </div>
          <% end %>


          <% if @project_id # edit function does not pass this into form%>
            <%= f.hidden_field :real_property_sale_project_id, value: @project_id %>
          <% end %>

          <div class="field">
            <%= f.text_area :content %>
          </div>

          <div class="actions">
            <%= f.submit %>
          </div>
        <% end %>
    </div>
</div>

控制器：

def create
    @message = Message.new(message_params)
    @message.sender_id = current_user.id

    authorize @message

    respond_to do |format|
      if @message.save
        sender = User.find @message.sender_id
        sender_name = "#{sender.first_name} #{sender.last_name}"

        json_response = {
          sender_name: sender_name,
          created_at: @message.created_at,
          updated_at: @message.updated_at,
          content: @message.content
        }

        format.html { redirect_to @message, notice: 'Message was successfully created.' }
        format.json { render json:  json_response}
      else
        format.html { render :new }
        format.json { render json: @message.errors.full_messages, status: :unprocessable_entity }
      end
    end
  end

终端输出：

Started POST "/messages.json" for 127.0.0.1 at 2015-05-11 12:34:24 +1000
Processing by MessagesController#create as JSON
  Parameters: {"utf8"=>"✓", "message"=>{"real_property_sale_project_id"=>"51", "content"=>"test 50"}, "commit"=>"Create Message"}
  User Load (0.6ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 118  ORDER BY "users"."id" ASC LIMIT 1
  RealPropertySaleProject Load (0.3ms)  SELECT  "real_property_sale_projects".* FROM "real_property_sale_projects"  WHERE "real_property_sale_projects"."id" = $1 LIMIT 1  [["id", 51]]
   (0.2ms)  BEGIN
  SQL (0.3ms)  INSERT INTO "messages" ("content", "created_at", "real_property_sale_project_id", "sender_id", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["content", "test 50"], ["created_at", "2015-05-11 02:34:24.334730"], ["real_property_sale_project_id", 51], ["sender_id", 118], ["updated_at", "2015-05-11 02:34:24.334730"]]
   (1.9ms)  COMMIT
  User Load (0.2ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = $1 LIMIT 1  [["id", 118]]
Completed 200 OK in 12ms (Views: 0.3ms | ActiveRecord: 3.4ms)

jQuery在视图中返回多个

0 个答案: