0

我有两个按钮，它们都在下面独立工作。一个按钮通过 ajax 创建用户和步骤之间的关系。另一个按钮执行一个功能，该功能选择要显示的引导模式（成功或失败）。我需要一个按钮中的两个按钮的功能，而不是两个单独的按钮。但是，例如，当我尝试将类 data-toggle="modal" 添加到 ajax 按钮时，该按钮不再能够创建关系并且数据模式不起作用。

这是一个工作按钮，我正在尝试复制其功能：

<div data-toggle="modal">
  <%= link_to_function "check answer", 'execute();', class: "btn btn-success"%>
</div>

这是执行（）；上面的函数，除了将 true 或 false 作为参数并根据其显示适当的模态外，它并不是所有相关的。 

if(checked)
            {
                //display correct-answer dialogue
                $('#modal-simple-success').modal('show')              
            }
            else
            {
                //display wrong-answer dialogue
                $('#modal-simple-failure').modal('show')
            }

我需要上面的功能才能为下面的按钮工作 - 基本上下面的按钮呈现一个创建或删除关系的 ajax 按钮。当我尝试向其中添加 data-toggle="modal" 时，它不再建立关系并且 ajax 不起作用。我需要所有三个功能才能工作（建立关系[下]，启动执行功能[上]，然后显示模式[上]。 

<div id="attempt_step">
    <% if current_user.attempted_step?(@step) %>
       <%= render 'remove_attempt' %>
    <% else %>
       <%= render 'attempt_step' %>
    <% end %>
</div>

下面是创建关系的 ajax 的具体形式：

  <div class="checkAnswer">
    <%= form_for(current_user.user_steps.build(step_id: @step.id), remote: true) do |f| %>
      <div><%= f.hidden_field :step_id %></div>
      <%= f.submit "check answer", class: " btn btn-large btn-primary" %>
    <% end %>
  </div>

这是 ajax 的“创建”javascript

$("#attempt_step").html("<%= escape_javascript(render('steps/attempt_step')) %>")

这是我正在寻找的示例想法，但不起作用：

<div id="attempt_step" data-toggle="modal">
 <%= link_to_function "check answer", 'execute();' do %>
    <% if current_user.attempted_step?(@step) %>
       <%= render 'remove_attempt' %>
    <% else %>
       <%= render 'attempt_step' %>
    <% end %>
 <% end %>
</div>

我怎样才能实现两个按钮的功能（即使上述工作）？

4

1 回答 1

0

看来您对 Rails 最佳实践有点陌生。

以下是一些建议：

  1. 在 Rails 4 中不推荐使用 link_to_function。请改用 ujs。更多信息：
    Rails 的 link_to_function 弃用状态？ http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#unobtrusive-javascript

  2. 在您的表单中有 current_user.user_steps.build(step_id:@step.id)。这应该在控制器的新操作中完成（或者任何渲染带有按钮的页面的操作）。这个模型可能应该被称为 step 而不是 user_step 即 

    class StepsController < ApplicationController  
  def new  
    @step = current_user.steps.new  
  end  
end

  3. 您正在使用带有 remote: true 选项的 form_for。这将向您的步骤控制器发送一个 ajax 请求并点击创建操作。因为这个请求是由 ajax 发送的，Rails 会自动在 views/steps 目录中寻找一个名为 create.js.erb 或 create.coffee 的 js 文件来呈现。这意味着您可以将 js 或 coffeescript 放在此文件中，以便在您的创建操作中的代码运行后运行。在您的情况下，您可以按照以下方式运行：

    # Here you can check anything on the DOM.  Check for a value or check if the user checked a checkbox for example.
if ($("#id-of-element").val() == whatever_you_want_it_to) {
  $('#modal-simple-success').modal('show');
} else {
  $('#modal-simple-failure').modal('show');
}

    然后这个表单提交按钮将在您的控制器中点击您的创建操作，创建相关的步骤记录，渲染 js 文件，运行 js 条件函数并根据条件显示模态。

    以下是关于 Rails 如何在远程请求控制器操作后呈现 js 文件的更多信息：
    如何让我的 js.erb 文件呈现？

于 2013-10-17T02:08:17.333 回答