Question

当条目更新成功时，我正在尝试切换bootstrap 4模式。

如果我是从chrome控制台手动完成的，它确实可以正常工作，但是在js.erb模板文件中，它只会抛出错误：

Uncaught Error: Syntax error, unrecognized expression: 
$('#mainModal').modal('toggle');
at Function.Sizzle.error (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:1542)
at Sizzle.tokenize (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:2194)
at Sizzle.select (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:2621)
at Function.Sizzle [as find] (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:846)
at jQuery.fn.init.find (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:2874)
at new jQuery.fn.init (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:2984)
at jQuery (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:140)
at HTMLFormElement.<anonymous> (modals.self-0fa40069f1b470beca9b1545857092a50efaaaab19a5aec03e92b45ce68e788b.js?body=1:25)
at HTMLDocument.dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184)
at HTMLDocument.elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992)

但是-实际上，它确实做了它应该做的事情，它关闭了模式，并做了其他一些事情（更新行，显示了Flash消息），为了清晰起见，这些东西并未包含在js.erb文件中。 / p>

我的看法instrument.html.erb：

<table class="table" id="instruments-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Currency</th>
      <th>P&L</th>
      <th>Stuff</th>
    </tr>
  </thead>
  <tbody>
    <% @instruments.each do |instrument| %>
    <tr>
      <td><%= instrument.name %></td>
      <td><%= instrument.description %></td>
      <td><%= currency_to_iso(instrument.currency) %></td>
      <td></td>
      <td>
        <%= link_to edit_instrument_path(instrument), class: 'my-2', 'data-toggle': 'tooltip', 'data-placement': 'top', title: 'Edit Instrument', data: { modal: true } do %>
          <%= icon('far', 'edit') %>
        <% end %>
        <%= link_to new_account_instrument_path(instrument: instrument), class: 'my-2', 'data-toggle': 'tooltip', 'data-placement': 'top', title: 'Commissions', data: { modal: true } do %>
          <%= icon('fas', 'coins') %>
        <% end %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

我的instrument_controller.rb：

class InstrumentsController < ApplicationController
  respond_to :html, :json, :js

...

  def update
    @instrument = Instrument.find(params[:id])
    if @instrument.update(instrument_params)
      respond_with @instrument do |format|
        format.js { flash.now[:notice] = 'All Good!' }
      end
    else
      respond_modal_with @instrument
    end
  end

...

end

我的update.js.erb：

$('#<%= dom_id(@instrument) %>').replaceWith('<%= j render 'users/dashboard/user_dashboard_instrument_row', instrument: @instrument  %>');
$("#mainModal").modal("toggle");
$("#flash-wrapper").html("<%= escape_javascript(render 'layouts/flash_message') %>");
setTimeout(function(){
    $('.alert-wrapper, .notice-wrapper').fadeOut("slow", function() {
        $(this).remove();
    })
}, 4500);

如上所述，在打开模式后在控制台中执行$('#mainModal').modal('toggle');可以将其关闭而没有问题。

模态本身是在https://jtway.co/5-steps-to-add-remote-modals-to-your-rails-app-8c21213b4d0c

上的一个很好的指导之后完成的

所以，我有一个modal_responder.rb

class ModalResponder < ActionController::Responder
  cattr_accessor :modal_layout
  self.modal_layout = 'modal'

  def render(*args)
    options = args.extract_options!
    if request.xhr?
      options.merge! layout: modal_layout
    end
    controller.render *args, options
  end

  def default_render(*args)
    render(*args)
  end

  def redirect_to(options)
    if request.xhr?
      head :ok, location: controller.url_for(options)
    else
      controller.redirect_to(options)
    end
  end
end

和修改后的application_controller.rb

class ApplicationController < ActionController::Base

  ...

  def respond_modal_with(*args, &blk)
    options = args.extract_options!
    options[:responder] = ModalResponder
    respond_with *args, options, &blk
  end

  ...

end

和编辑表单（我忽略了表单本身，因为它对这个问题不重要）

<%= content_for :title, 'Edit Instrument' %>
<div class="modal-body">
  <%= render 'form' %>
</div>

非常感谢您的帮助！

Rails渲染为js切换模式->无法识别的表达式

0 个答案: