Question

首先，我对红宝石或铁轨上的红宝石知之甚少。我只编码了几年，我选择的语言是python。我已经构建了一些应用程序，而我的开发团队决定我应该开始帮助我们的Rails Stack，因此我将其作为附件。请原谅我的无知。

因此，我在我们的论坛上有一个表单，其中显示用户所在的每个组，以及每个组的电子邮件设置的下拉框。用户选择他们要命中的选项，然后我的权限控制器中就有一个功能，可以使用选择内容更新数据库并重定向回主页。

我想添加一个模式，因此，如果用户选择退出作为任何选择，我可以打开该模式并显示一条消息。如果您选择“确定”，则我希望关闭模式并像这样进行提交。如果用户点击“取消”，我希望模式关闭且不提交，因此用户可以更改他们想要的选项并再次提交。

到目前为止，我已使用引导程序指南和“提交”按钮将模式添加到html。现在，模式会在任何选择上打开一两秒钟，然后提交将重定向页面。我假设我需要一些js来实现我想要的效果。另外，我们正在使用haml。

.row
  .col-md-9
    %h4 My Groups
  .col-md-3
    %h4 Email Preferences
    %p Fake text for email pref explanations

.space
.row
  = form_with(url: update_collection_permissions_path, method: :put, local: true, html: {id: :email }) do |f|

    = will_paginate @discussion_groups, class: "digg_pagination"
    -if @discussion_groups.any?
      -@discussion_groups.each do |discussion_group|
        .col-md-9
          .panel.panel-default
            .panel-body
              .row
                .col-md-9
                  .row
                    -if current_user.admin?
                      %span.blue-text #{view_discussion_group(discussion_group)} &nbsp;&nbsp;&nbsp;&nbsp;
                      {destroy_discussion_group_link_for(discussion_group)}

                    -elsif discussion_group.admin_role.users.include?(current_user)
                      %span.blue-text #{view_discussion_group(discussion_group)} &nbsp;&nbsp;&nbsp;&nbsp;

                    -else
                      %span.blue-text #{view_discussion_group(discussion_group)} &nbsp;&nbsp;&nbsp;&nbsp;
                      -#{contributor_link_for(discussion_group)} &nbsp;
              .row
                .body-text
                  =discussion_group.description

        .col-md-3
          =discussion_group.name
          -selected = discussion_group.permission_for_user(current_user)
          =f.select("permissions[#{selected.id}]", options_for_select([['Daily digest', 'daily_digest'], ['Opt-out', 'opt-out'], ['Individual', 'individual']], selected.email_preference), {}, class: 'form-control')
    -else
      .row
        You are not subscribed to any discussion groups.

    .col-md-9

    .col-md-3
      .buttonrow
        =link_to('Cancel', root_path, class: 'btn btn-default btn-lg',:rel=>"tooltip",:title=>"Return to previous page")
        =f.submit('Update', class: 'btn btn-default btn-lg','data-toggle'=>"modal", 'data-target'=>"#myModal" )

#myModal.modal.fade{:role => "dialog", :tabindex => "-1"}
  .modal-dialog{:role => "document"}
    .modal-content
      .modal-header
        %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
          %span{"aria-hidden" => "true"}
        %h4.modal-title Modal title
      .modal-body
        %p One fine body
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
        %button.btn.btn-primary{:type => "button"} OK

因此，我只希望在选择退出时打开模式，并在用户选择确定时关闭并提交。如果用户尚未选择退出，我希望仅提交表单。任何帮助将不胜感激。

Answer 1

是的，您需要一些js才能实现。下面的代码将使用jQuery库（引导程序将其用作依赖项）

表单的ID为email，建议您为ID使用更好的名称，例如form-purpose-of-the-form 为简单起见，我将表单ID重命名为form-email

= form_with(url: update_collection_permissions_path, method: :put, local: true, html: {id: 'form-email' }) do |f|

第1步。从按钮上删除触发引导模式的代码

=f.submit('Update', class: 'btn btn-default btn-lg')

第2步。编写一些JavaScript来防止表单提交，并在条件通过后打开模式，否则让其提交

$("#form-email").on('submit', function(event){
  // Considering your select box has an id called `x` you can first
  // check its value and then decide to open the modal
  var selected_value = $("#x").val()

  if(selected_value === 'opt-out'){
    event.preventDefault();  //Prevents form submission or the default event's action
    $("#myModal").modal('open'); // Open the modal though javascript
  }
})

第3步。添加代码，以便您的模式按钮提交表单

.modal-footer
    %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
    %button.btn.btn-primary{:type => "button", :form => "form-email"} OK

让我知道它是否对您有用，或者您遇到了一些问题。

Answer 2

好，所以我终于为遇到此问题的其他人弄清楚了。我想要的是如果用户在提交表单时尝试退出电子邮件设置，则会弹出一个模式。如果他们仍然希望退出，请按模态中的按钮，将更改提交给rails控制器。

我已根据建议更改了表单ID
```
import { EventEmitter } from 'events';
```
我在表单中添加了一些js，以获取数组中每个选定的值。然后，我遍历每个值，如果一个值与选择退出相匹配，我将阻止默认的提交并显示模型。否则应正常提交。
```
import {  EventEmitter } from '@angular/core';
```
要获取模式按钮以提交外部表单，我向其中添加了一些js。我使用.off（）关闭了第二步的提交。否则，由于选定的选项仍处于退出状态，因此它将创建为循环，但我们确定用户现在希望退出。另外，我们现在也想删除模态。
```
form_with(url: update_collection_permissions_path, method: :put, local: true, html: 
{id: :'form-email-pref' }) do |f|
```

最后一个用于模式中的按钮。取消按钮将关闭并刷新页面，以便用户更改选项。确定按钮会将表单提交给处理其余内容的正确控制器。

$("#form-email-pref").on('submit', function (event) {
var selected = $('select :selected');
$.each(selected, function(index, x) {
    if (x.value == 'opt-out') {
        event.preventDefault();
        $("#myModal").modal('show');
           }

        });

   });

当然，有一种更好的方法可以做到，但是考虑到我不了解Rails。这对我来说足够了，因为它可以达到目的。谢谢大家的帮助。

如何根据所选的表单选项打开“提交时的模态”按钮并完成提交？

2 个答案: