使用remote：true

Question

我有模态窗口，您需要报告错误消息。所以，我有这个窗口的HTML代码

<div class="modal">
    <div id="modal-6">
    <%#= render @p::ErrorReport %>
        <div class="box_m box_m_middle" style="margin: 0 auto;">
                <div class="report_error">
                    <div class="name">Report an error</div>
                    <div class="arcticmodal-close close"></div>
                    <p class="info_block">Some info block</p>
                    <div class="error_explanation">Email is wrong</div>
                    <div class="message_send">Message sent</div>
                    <p class="thanks">Thank you!</p>
                    <div class="form">
                        <%= form_for @image, url: error_create_url, method: :post, remote: true do |f| %>

                        <div class="row">
                            <div class="box1 blocks">
                                <%= f.label :name, class: "label" %>
                                <%= f.text_field :user, class:"int int2", placeholder: "" %>
                            </div><!--
                    /--><div class="box2 blocks">
                                <%= f.label :Email, class: "label" %>
                                <%= f.text_field :email, class:"int int2", placeholder: "" %>
                            </div>
                        </div>
                        <div class="row">
                            <%= f.label :Message, class: "label" %>
                            <%= f.text_area :message, class:"int int2", placeholder: "Please write about your problem" %>
                        </div>
                        <div class="rows">
                            <div class="box1 blocks">
                                <div class="file">
                                    <!-- <div>Attach file</div> -->
                                    <i class="i i_paper_clip"></i>
                                    <%= f.file_field :file , class: 'choose_file' %>
                                    <img id="error_report_image">
                                </div>
                            </div><!--
                    /--><div class="box2 blocks">
                                <%= f.submit "Send", class: 'btn btn_middle btn_radius5' %>
                                </div>
                            </div>
                        <% end %>
                    </div>
                </div>
        </div>
    </div>
</div>

我有从这个模态窗口处理Ajax的js代码。要使用Ajax，我使用remote：true。

function error_report_init(){

  var modal6 = $('#modal-6')
  var incorrect_mail = $('.error_explanation')
  error.click(function(){
    error_show()
  })
  $('body').on('ajax:success', function(data, status, xhr) {
    if (status == 'ok') {
      console.log('status: ', status)
      incorrect_mail.hide()
      modal6.find('.form').hide()
      modal6.find('.report_error .message_send').show()
      modal6.find('.report_error .thanks').show()
      modal6.find('.info_block').hide()
      modal6.find('.name').hide()
    } else {
      incorrect_mail.show()
    }
  })
  $('body').on('ajax:error', function(data, status, xhr) {

  })
}

和控制器

class Desktop::Vision::ErrorController < CatalogController
  domain_layout 'page_screen'

  def form
    @image = Image.new
  end

  def create
    @image = Image.new(image_params)

      if @image.save
        ::Mailer::FromSite.error_report(@image).deliver_later
        # Mailer::FromSite.error_report_alias(@image).deliver_later
        render_status 'ok' 
      else
        render_status @image.errors.full_messages
      end
    end
  end

    def reported
    end

    private

    def image_params
        params.require(:image).permit(:user, :email, :message, :file)
    end

  def render_status status
    render plain: status
    return
  end
end

问题是，如果我尝试填充字段一切正常，我得到另一个模态窗口：“发送消息”。但是当我尝试附加一些文件时，一切都变坏了，并且远程：真的有效非常奇怪。因为我没有得到模态窗口，只能在另一个新页面中获得控制器答案：“render_status'ok'”或“render_status @ image.errors.full_messages”（当电子邮件不正确时）并且Ajax不起作用。我不知道为什么当我尝试附加文件时Ajax不起作用

Answer 1

要使用 remote：true ，请在相应的视图文件夹中创建 create.js.erb 文件，然后在该文件中移动所有ajax处理函数。

您不需要render_status @image.errors.full_messages。

而不是这个，在控制器中使用如下所示：

respond_to do |format|
  format.html {  render_status 'ok' }
  format.js
end