3

RailsフォームヘルパーでTwitter Bootstrapモーダルウィンドウを使用し、フォーム検証エラーメッセージを表示することについて質問しています。Rails 3.2 で Twitter Bootstrap 2.0 を使用しています。

Twitter Bootstrap モーダル ウィンドウ内にフォームがあります。ページには、モーダル ウィンドウを開いてフォームを表示するためのボタンがあります。フォームがエラーで送信された場合を除いて、すべて問題ありません。ページが表示され、フォームが (最初は表示されていない) モーダル ウィンドウ内にあるため、エラー メッセージは表示されません。

jQuery を使用して、フォームに Rails エラー メッセージが含まれているかどうかをテストし、「display: none;」をオーバーライドする必要があります。ページがレンダリングされるときのスタイル (または表示するモーダル ウィンドウを切り替えます)。

次のコードを assets/javascripts/application.js ファイルに追加しようとしましたが、うまくいきません:

$('document').ready(function() {
  if ($('#error_explanation').length > 0) {
    $("#request_invite").css("display", "block");
  }
})

また:

$('document').ready(function() {
  if ($('#error_explanation').length > 0) {
    $("#request_invite").modal('toggle');
  }
})

エラー メッセージが表示されているときに、モーダル ウィンドウを表示したり、開いたりするにはどうすればよいですか?

以下は、Twitter Bootstrap モーダル ウィンドウ (Haml) 内にフォームを表示するコードです。

#request-invite.modal{:style => "display: none;"}
  = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
    .modal-header
      %a.close{"data-dismiss" => "modal"} ×
      %h3 Request Invitation
    .modal-body
      - if @user.errors.any?
        #error_explanation
          %ul
            - @user.errors.full_messages.each do |msg|
              %li= msg
      %p
        = f.label :email
        %br/
        = f.email_field :email
    .modal-footer
      = f.submit "Request Invitation", :class => "btn.btn-success"
      %a.btn{"data-dismiss" => "modal", :href => "#"} Close
#romance-copy{:style => "text-align: center; margin-top: 100px"}
  %h2 Want in?
#call-to-action{:style => "text-align: center; margin-top: 100px"}
  %a.btn.btn-primary.btn-large{"data-toggle" => "modal", :href => "#request-invite"} Request invite
4

5 に答える 5

3

タイプミスのように見えますか？Haml の div には、ID request-invite (ダッシュ付き) があります。ただし、jQuery はアンダースコア付きの ID を探しています。

于 2012-04-04T19:52:08.980 に答える
2

別の選択肢を提供したい。使用する方法は機能するはずですが、エラーが発生したときにエラーメッセージを表示するために AJAX を使用しないのはなぜですか。応答 JS が行うことは、エラー メッセージを表示するために余分なスタイルを追加することです。

jQuery を使用して、フォームに Rails エラー メッセージが含まれているかどうかをテストし、「display: none;」をオーバーライドする必要があります。ページがレンダリングされるときのスタイル (または表示するモーダル ウィンドウを切り替えます)。

http://www.twitmark.me/をご覧ください。ツイッターでログインしてみてください。偽の招待コードを入力して、エラーがどのように表示されるかを確認します。これはより良い解決策ですか？

于 2012-04-05T00:15:10.283 に答える
2

@wanghq (および @miked の一部) が述べたように、AJAX を使用してモーダルで html をレンダリングし、フォーム データを送信するのが最善の方法だと思います。このようにして、すべてのロジックがサーバー側に委譲され、JS は効果のみに使用され、ビューはきれいに保たれます (ビュー内にはヘルパーやロジックは含まれません)。

このソリューションでは、フォームをレンダリングするために同じコントローラー アクションを使用することで、JS がクライアントで動作しない場合に適切に機能を低下させることができます。簡単な例:

def new
  @user = User.new
  # some stuff...
  render :handler => 'haml', :layout => !request.xhr?
end

# similar logic should be used for #create action

(d)html 部分については、Ruby を使用して、エラーのために表示する必要があるかどうかを検出できます。私はこのようなことを意味します（必要に応じてヘルパーを書くかもしれません）：

#request-invite.modal{:style => "display: #{ @user.errors.any? ? 'block' : 'none' };"}

補足として、simple_form 2.0.x を使用すると、twitter-bootstrap マークアップのサポートが得られます (つまり、フォームのブートストラップに適したマークアップが生成されます)。このようにして、テンプレート内のいくつかのロジックを DRY します (例: @user.errors をチェックしてエラー メッセージを表示する)。

このように、チェックを行うために JS は必要ありません ;)

私の2セント;-)

于 2012-04-05T08:33:43.027 に答える
1

私は問題を誤解しているかもしれませんが、私が見ることができることから、あなたの error_explanation div は、モーダルの読み込み時に非表示 (display:none) ではなく、if @user.errors.any? で条件付けられているため存在しません。ブロック。したがって、どの JavaScript を投げても問題ありません。そこにはありません。

まず、試してみてください：

.modal-body
  #error_explanation
    - if @user.errors.any?
      %ul
        - @user.errors.full_messages.each do |msg|
          %li= msg

このように、div が存在し、ul は、表示するエラーがある場合にのみアイテムを表示します。

于 2012-04-04T19:52:21.093 に答える
1

なぜjQueryが必要なのですか? すでに持っている条件を使用しないのはなぜですか?

このコードは最悪です。おそらくクリーンアップ (ヘルパーなどに移動) できますが、アイデアは得られます。

- def display?; @user.errors.any? ? "block;" : "none;"; end;
#request-invite.modal{:style => "display: " + display? }
于 2012-04-04T20:53:42.427 に答える