Rails项目在不同的链接上显示相同的模态消息

Question

我有一个我正在做的rails项目，我在这个项目中有两个不同的链接。我想在用户单击链接时显示两个单独的消息。换句话说，link a代表message a, link b代表message b，而在项目的当前状态下，link a和link b都代表message a。我样式的JS确认对话框下面这个SO线程，但现在所有的JS警报框显示相同的消息。如何为不同的链接添加单独的消息?

按Robin的要求

new.html.erb

<div id="sign_up">
<h1>Sign Up</h1>
<%= form_for @user do |f| %>
  <% if @user.errors.any? %>
    <div class="error_messages">
      <h2>Form is invalid</h2>
      <ul>
        <% @user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
     <!-- <%= f.label :email %> --><br />
    <%= f.text_field :email, :class => 'input-xlarge', placeholder: 'email' %>
  </div>
  <div class="field">
     <!-- <%= f.label :password %>--><br />
    <%= f.password_field :password, :class => 'input-xlarge', placeholder: 'Password' %>
  </div>
  <div class="field">
     <!-- <%= f.label :password_confirmation %>--><br />
    <%= f.password_field :password_confirmation, :class => 'input-xlarge', placeholder: 'Password confirm' %>
  </div>
  <div class="actions"><%= f.submit "Sign Up", class: 'btn btn-xlarge btn-custom', data: { confirm: "test"}%></div>
<% end %>
</div>

users_controller.rb

class UsersController < ApplicationController
  # redirects are handled in controllers
  # see: https://stackoverflow.com/questions/3241154/

  def index
    @user = User.first
  end
  def new
    @user = User.new
  end
  def edit
    @user = User.find(params[:id])
    #redirect_to(user_path)
  end
  def update
    @user= User.find(params[:id])
    respond_to do |format|
      # if @user.update_attributes(params[:user])
      if @user.update_attributes(user_params)
        format.html { redirect_to @user, notice: 'User was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: "edit" }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end
  def show
    redirect_to :controller => 'users', :action => 'index'
  end
  # saves user to database
  def create
    @user = User.new(user_params)
    # the below line doesn't work in rails 4.x
    # @user = User.new(params[:user])
    if @user.save
      session[:user_id] = @user.id
        # redirect_to root_url, :notice => "Signed up!"
      redirect_to :controller=>'users', :action => 'index', :notice => "Signed up!"
      # Tell the UserMailer to send a welcome email after save
      UserMailer.welcome_email(@user).deliver
    else
        render "new"
    end
  end
  def delete
    # the below line calls the destroy method / action
    self.destroy
  end
  def destroy
    session[:user_id] = nil
    @user = User.find(params[:id])
    @user.destroy
    redirect_to :controller=>'users', :action => 'new'
  end
  def user_params
    params.require(:user).permit(:username, :email, :password, :password_confirmation, :credit, :phoneNumber, :RFID)
  end

end

bootstrap.js.coffee

$.rails.allowAction = (link) ->
  return true unless link.attr('data-confirm')
  $.rails.showConfirmDialog(link) # look bellow for implementations
  false # always stops the action since code runs asynchronously
$.rails.confirmed = (link) ->
  link.removeAttr('data-confirm')
  link.trigger('click.rails')
$.rails.showConfirmDialog = (link) ->
  message = link.attr 'data-confirm'
  html = """
         <div class="modal" id="confirmationDialog">
           <div class="modal-header">
             <a class="close" data-dismiss="modal">&times;</a>
             <h3>Pretty JS confirm header</h3>
           </div>
           <div class="modal-body">
             <p>
             My pretty message.
             </p>
           </div>
           <div class="modal-footer">
             <a data-dismiss="modal" class="btn">Cancel</a>
             <a data-dismiss="modal" class="btn btn-danger confirm">Agree</a>
           </div>
         </div>
         """
  $(html).modal()
  $('#confirmationDialog .confirm').on 'click', -> $.rails.confirmed(link)

Answer 1

你在调用相同的消息是吗?

我们是这样做的(如本教程所述):

#app/assets/javascripts/extra/config.js.erb
$.rails.allowAction = function(element) {
var message = element.data('confirm'),
    answer = false, callback;
    if (!message) { return true; }
    if ($.rails.fire(element, 'confirm')) {
        myCustomConfirmBox(element, message, function() {
            callback = $.rails.fire(element,
                'confirm:complete', [answer]);
                if(callback) {
                    var oldAllowAction = $.rails.allowAction;
                    $.rails.allowAction = function() { return true; };
                    element.trigger('click');
                    $.rails.allowAction = oldAllowAction;
                }
            });
        }
        return false;
    }
function myCustomConfirmBox(link, message, callback) {
    //create confirmation box
    var modal = '<div class="confirm modal" id="confirm">'+
                    '<div class="message">' +
                        message +
                    '</div>' +
                    '<div class="action_bar">' +
                        '<a id="cancel_btn">cancel</a>' +
                        '<a id="confirm_btn">ok</a>' +
                    '</div>' +
                '</div>';   
    $('body').append(modal);
    $('#confirm').leanModal({overlay: 0.8, closeButton: '#cancel_btn', top: '300', removeModal: true, drag: $('.message'), autoLoad: true });
    $('#confirm').fadeIn(150, function() {
        $(this).draggable();
    });

    //handle interactions
    $('#confirm_btn').on('click', function() { 
        callback(link);
        $('#confirm').fadeOut('fast', function() { $(this).remove(); });
        $('#lean_overlay').fadeOut('fast', function() { $(this).remove(); });
    });
    $('#cancel_btn').on('click', function() {
        $('#confirm').fadeOut('fast', function() { $(this).remove(); });
        $('#lean_overlay').fadeOut('fast', function() { $(this).remove(); });
    });
}

---

修复

参考您的代码，您有几件事情要考虑:

1. 你如何识别&调用"消息"?
2. 如何将其附加到消息框中?

我会这样做:

#bootstrap.js.coffee
var message = link.data('confirm')
...
<p>My pretty message.</p> // remove this line
<p>" + message + "</p> //replace with this

这应该为你解决这个问题，先生。这只是一个从你的视图传递confirm消息到你的JS的情况-这实际上是一个识别&在JS中使用属性