2012-04-25 77 views
3

我只是想要這個模式來顯示另一個頁面的內容,但我不能讓它工作,因爲我是新來的Jquery。有沒有辦法修改下面的代碼,以便在模態彈出窗口中顯示'/ contact /'的內容?鏈接到另一個頁面使用Twitter Bootstrap jquery modal in rails

---------- 
# 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> 
+0

你嘗試過使用IFrame嗎? – amitamb 2012-04-25 19:41:34

+0

@amitamb - 不,我還沒有嘗試IFrame,但我已經看到搜索解決方案,所以我想我會先嚐試,因爲它似乎最簡單。 – Tim 2012-04-25 21:17:10

回答

6

OK,所以這裏的技巧是,「其他頁」可能是Rails控制器動作,這通常使得在一個單獨的URL頁面的結果,對不對?然而,引導程序假定當你點擊鏈接時,它的HTML已經存在於當前頁面上。

那麼如何處理呢?您需要通過AJAX(link_to ... :remote => true是一個開始的好地方)發出控制器請求,並更改控制器以將其內容添加到當前頁面上的div中。一旦完成,上面的代碼或類似的代碼(或者像Bootstrap頁面上記錄的代碼)將執行您想要的操作。

編輯:添加具體的例子,在我的情況下,自舉模式打開編輯用戶頁面(使用設計認證寶石):

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> 
+0

你是對的 - 這是一個電子郵件形式,就像我想要以模式呈現的聯繫人頁面。我只想讓用戶通過表單通過電子郵件發送其他用戶的電子郵件。感謝提交這個,但不幸的是,我是一個noob,並不知道我會如何做到這一點。我已經使用:remote => true,但是「更改控制器以將其內容添加到div」我不確定你的意思。 – Tim 2012-04-25 21:20:41

+0

沒有人有一個如何工作的一步一步的例子? :) – Tim 2012-04-26 01:44:56

+1

添加我的工作示例代碼到答案。 – 2012-04-27 13:18:18