モーダルを使用して編集パスを表示

Question

非常に簡単なruby on 3アプリケーションを作成しています。ユーザは自分のホームページに表示されている投稿を作成したり編集したりすることができます。私の質問は編集機能に関するものです。私は何かを編集する典型的な方法がコールすることを知っています

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

ここでpost_itemは選択された投稿です。しかし、ユーザーを編集ページ（/views/posts/edit.html.erb）にリダイレクトするのではなく、ユーザーが編集ボタンをクリックすると、編集ページがモーダルでレンダリングされるようにしたいと思います。私はtwitter-bootstrapを使い、モーダルを作成する方法を知っています。何か案は？

Answer 1

ないあなたはまだこの上で作業している場合、私は同様の問題を抱えていたし、次の操作を行って、それを解決してください：

私はjqueryの-UIのダイアログを使用しています、作ることができなかったとして、モーダルをブートストラップありませんそれは働く。あなたが持っていないはずのライブラリをそこに追加してください。

私は

$(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> 

を持っている資産/ JavaScriptの/ application.jsで

すべての情報をロードする要素。

私のインデックスビューでは、これを処理するリンクがあります。私のモデルはhouseと呼ばれているので、自分のものが呼び出されたものに変更してください。

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

ご覧のとおり、私はapplication.jsファイルで参照しているedit_house_link idを与えています。私は家のコントローラ内部の

：

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 

、その後、私は3つの景色を眺めることができ、1は、ビュー/住宅の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で再び見ればそう、我々はこれをロードしていますモーダルの内側。

最後に/ 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を使用していますが、私は追加する必要がありました：それは実際に動作させるためのリモート=> true属性を。

うまくいけば、これは役に立ちます！

Answer 2

最も簡単な方法は、あなたのリンクにremote => trueオプションを設定することです。あなたのフォームで部分的にレンダリングするクライアント側のレンダリングjsで$（ '＃myModal'）。modal（options）を呼び出してダイアログを開きます。