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

时间:2014-07-22 07:47:23

标签: ruby-on-rails ruby twitter-bootstrap ruby-on-rails-4

我有一个我正在处理的rails项目,我在项目中有两个不同的链接。我想在用户点击链接时显示两条单独的消息。换句话说,link a显示message alink b显示message b但是,在项目的当前状态下,link alink b都显示message a 1}}。我在此SO thread之后设置了JS确认对话框,但现在所有JS警告框都显示相同的消息。如何为不同的链接添加单独的消息?

更新 根据罗宾的要求。

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)

1 个答案:

答案 0 :(得分:1)

您正在拨打同一条消息吗?

以下是我们的工作方式(如this tutorial中所述):

#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. 你是如何认同的?调用&#34;消息&#34;?
  2.   
  3. 您如何将其附加到消息框中?
  4.   

这就是我要做的事情:

#bootstrap.js.coffee
var message = link.data('confirm')

...

<p>My pretty message.</p> // remove this line
<p>" + message + "</p> //replace with this

这应该为你解决问题先生。这只是将confirm消息从您的视图传递给您的JS的情况 - 这实际上就是识别&amp;使用JS中的属性

相关问题