【问题标题】:rails project displays the same modal message on different linksrails 项目在不同的链接上显示相同的模式消息
【发布时间】:2014-07-22 07:47:22
【问题描述】:

我有一个正在进行的 Rails 项目,并且我在项目中有两个不同的链接。当用户单击链接时,我想显示两条单独的消息。换句话说,link a 呈现 message alink b 呈现 message b 但是在项目的当前状态下,link alink b 呈现 message a。我在 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)

【问题讨论】:

  • 请添加您的视图和控制器的代码。
  • @RichPeck 刚刚添加。
  • 谢谢哥们 - 让我一会儿看看!!!!!!!!!
  • +1 用于 Windows 图标 btw

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


【解决方案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. 您如何识别和调用“消息”?
  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 中识别和使用属性的情况

【讨论】:

  • 你确定" + message + " 是正确的语法吗?您提供的链接建议#{message}
  • 嘿,我只是从我们的例子中提取的,所以它可能不正确。本质上,我们只需要让变量显示在字符串中,仅此而已 - 你测试过吗?
  • 是的,我刚刚测试了它,但是它已经很晚了,所以我早上会更乱,谢谢你的彻底回答,一旦我开始工作,我一定会标记它.
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-01-25
  • 1970-01-01
  • 2013-02-23
  • 1970-01-01
  • 2016-11-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多