3

このモーダルを起動して別のページのコンテンツを表示したいだけですが、Jquery を初めて使用するため、機能させることができません。モーダル ポップアップで「/contact/」の内容を表示するために、以下のコードを変更する方法はありますか?

----------
# this content is on http://myurl.com/contact/
 <div style="display: none;" id="myModal" class="modal hide fade">
 <p>this is my email app here...</p>
</div>
----------
# this is the button on a 'show' page where i want someone to push to bring up the contents of the above page in the modal.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch Email</a>
4

1 に答える 1

7

OK、ここでの秘訣は、通常は別の URL でページをレンダリングする Rails コントローラー アクションの結果である可能性が高いということですよね? ただし、ブートストラップは、リンクをクリックしたときに、その HTML が現在のページに既に存在すると想定しています。

では、これをどのように処理しますか？AJAX を介してコントローラー要求を作成し (link_to ... :remote => true開始するのに適した場所です)、コントローラーを変更して、現在のページのどこかにある div にそのコンテンツを追加する必要があります。それが完了すると、上記のコードまたはそれに似たもの (または Bootstrap ページに記載されているもの) で目的の処理が実行されます。

編集: 特定の例を追加します。私の場合、ブートストラップ モーダルで編集ユーザー ページを開きます (認証に Devise gem を使用):

app/views/devise/registrations/_edit.html.erb:

<div class="modal hide fade in" id="user-edit">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
    <h2>Edit User</h2>
  </div>

  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:method => :put}) do |f| %>
    <div class="modal-body">
      <%= devise_error_messages! %>

      <div>
        <%= f.label :name %><br/>
        <%= f.text_field :name %>
      </div>

      <div>
         <%= f.label :email %><br/>
        <%= f.email_field :email %>
      </div>

      <div>
        <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br/>
        <%= f.password_field :password, :autocomplete => "off" %>
      </div>

      <div>
        <%= f.label :password_confirmation %><br/>
        <%= f.password_field :password_confirmation %>
      </div>

      <div>
        <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br/>
        <%= f.password_field :current_password %>
      </div>
    </div>

    <div class="modal-footer">
      <%= f.button "Update", :class => "btn btn-primary", :data => { :dismiss => "modal"} %>
      <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
  <% end %>
</div>

app/views/devise/registrations/edit.js.erb:

$("#main").before("<%= escape_javascript(render "edit", :formats => [:html]) %>");
$("#user-edit").modal();

そして、任意のページからそれを呼び出すリンク（私は今ナビに持っています：

<li><%= link_to "Edit Account", edit_user_registration_path, :remote => true %></li>
于 2012-04-25T20:51:20.253 に答える