Ajax 构建关系按钮有效，用于显示引导模式的第二个按钮有效，但两者不能协同工作

ajax build relationship button works and second button for displaying bootstrap modal works, but both don't work together

本文关键字：按钮 有效 第二个 协同工作 不能 关系 构建 用于 显示 Ajax 模式      更新时间：2023-09-26

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

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

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

这是上面的execute（）;函数，除了它以真或假为参数并显示基于它的适当模态之外，它并不完全相关。 

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 的 "create" 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>

如何实现两个按钮的功能（即使上述工作）？

你似乎对Rails的最佳实践有点不熟悉。

以下是一些建议：

  1. link_to_function在 Rails 4 中已弃用。 请改用 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）。 这应该在控制器的新操作中完成（或任何渲染带有按钮的页面的操作）。 这个模型可能应该被称为步骤而不是user_step即 

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

  3. 您正在使用带有远程：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 文件渲染？

相关文章：