使用模式顯示編輯路徑

我在rails 3應用程序中編寫了一個非常簡單的ruby應用程序：用戶可以創建在主頁上顯示的帖子，也可以編輯這些帖子並刪除它們。我的問題屬於編輯功能。我知道編輯東西的典型方式是致電使用模式顯示編輯路徑

<%= link_to "edit", edit_post_path(post_item) %>

其中post_item是選定的帖子。但是，我不想將用戶重定向到編輯頁面（/views/posts/edit.html.erb），而是希望使用戶單擊編輯按鈕時，編輯頁面將以模式呈現。我正在使用twitter-bootstrap，並知道如何創建模態。有任何想法嗎？

來源

2012-04-02 David Harbage

不知道如果你還在這方面的工作，我也有類似的問題，並通過執行以下解決它：

我使用jQuery UI的對話，而不是引導模式爲不能讓這行得通。所以如果沒有它，請在那裏添加庫。

資產/ JavaScript的/ application.js中

我有

$(document).ready(function() { 

     var modal=$('#modal'); 
     $('#edit_house_link').click(function(e) { 
      var edit_url = $(this).attr('href'); 
      modal.load(edit_url + ' #content',function(){ 
      modal.dialog("open"); 
      }); 
     }); 
     modal.dialog({ autoOpen: false, title: "Your title", draggable: true, 
     resizable: false, modal: true, width:'auto'}); 

    });

在我的佈局

然後/ application.html.erb我有網頁的身體，這是內部

<p id="modal"></p>

某處我們要加載所有信息的元素。

在我的索引視圖中，我有處理這個問題的鏈接，請注意，我的模型被稱爲house，所以改爲任何你所稱的。

<%= link_to 'Edit', edit_house_path(house), :remote => true, :id => 'edit_house_link' %>

正如你所看到的，我給這個edit_house_link ID，這我引用了的application.js文件。

房子控制器內部我有：

def update 
    @house = House.find(params[:id]) 
    respond_to do |format| 
    if @house.update_attributes(params[:house]) 
     format.js 
    else 
     format.js 
    end 
    end 
end

，然後我有三個視圖，一個是edit.html.erb，update.js.erb和_form.html.erb所述視圖/房屋夾。

所以內部的意見/房/ update.js.erb我有：

<%- if @house.errors.any? %> 
    $('#modal').html('<%= escape_javascript(render('form')) %>'); 
<%- else %> 
    $('#modal').dialog('close'); 
    $('#modal').remove(); 
    window.location.reload(); 
<%- end %>

這段代碼是爲了防止從模式關閉，應該有錯誤。正如您所看到的，如果沒有錯誤存在，那麼它將關閉對話框並刷新頁面以顯示更改。

的意見/房/ edit.html.erb這個文件

是我：

<div id="content"> 
<%= render :partial => 'form' %> 
</div>

所以如果你在的application.js文件中的內容ID再看看，我們加載此模態內。

最後是部分views/houses/_form.html。ERB

<%= simple_form_for(@house, :html => { :class => 'form-vertical' }, :remote => true) do |f| %> 
<fieldset> 
    <%= f.input :address %> 
    <%= f.input :postcode %> 
    <%= f.input :city %> 
    <%= f.input :country %> 
</fieldset> 
    <div class="form-actions"> 
    <%= f.button :submit %> 
    </div> 
<% end %>

我使用simple_form，這樣你就可以通過具有正常形態適應您的需求，但我不得不添加：遠程=>真正爲它的實際工作屬性。

希望這有助於！

來源

2012-04-28 22:33:11 Lievcin

最簡單的方法是爲您的鏈接設置remote => true選項。然後在客戶端渲染js，它將使用你的表單渲染部分內容，並調用$（'＃myModal'）.modal（options）並打開對話框。

來源

2012-04-02 17:42:40 VadimAlekseev

你能給我一個如何做到這一點的例子嗎？我一直在靠牆試圖弄清楚這一點無濟於事。 – 2012-04-02 17:55:07

具體而言，我希望字段在模式中預先填充，因爲它們位於編輯頁面上。你能澄清我應該如何呈現JS來呈現我的表單部分？ – 2012-04-02 19:21:20

使用模式顯示編輯路徑

回答

相關問題