2011-04-21 33 views
3

私はフォームを送信するためのモーダルボックスのポップアップを作成中です。検証に問題はあるが、まだモーダルボックスの内部にある場合、フォームは更新されるはずです。これは新しいレコードを追加するために働きます。これは、createアクション、POSTを呼び出していると思います。私はレコードを編集するために同じモーダルボックスを使用したいと思います。これまでのところ、モーダルボックスで開くことができますが、エラーが発生するとすぐに、ボックスの内部に留まらず、別のページにリダイレクトされます。私は、ajaxがモーダルボックスの中にフォームを戻すためのjavascriptを返すアクションを呼び出していないと思います。フォームを修正するためにjavascriptをモーダルボックスに戻すためにajaxを取得するにはどうすればよいですか?Ajax経由でjavascriptを呼び出す方法をRailsで呼び出す:コントローラの更新アクション

例は、ここに私のです:アクションを作成します。ここでは

def create 
@user = User.new(params[:user]) 

respond_to do |format| 
    if @user.save 
    format.js { render :redirect } #this is for modalform  
    format.html { redirect_to(users_url, :notice => 'User was successfully created.') } 
    else 
    format.html {render :new} 
    format.js # this renders the create.js.erb file to keep the form inside 
    end 
end 
end 

がモーダルボックスをロードし、検証が正しくなるまで内部のフォームを保つのjavascriptです:

document.observe('dom:loaded', function() { 
$('newuser-link').observe('click', function(event) { 
    event.stop(); 
    Modalbox.show(this.href, 
     {title: 'Create', 
     width: 500, #up to this point, this opens the form in the modal box 
     afterLoad: function() { # this afterload part is supposed to keep the form inside the modal box 
      $('new_user').observe('submit', function(event) { 
       event.stop(); 
       this.request(); 
      }) 
     }} 
    ); 
    }); 
}) 

そしてここにはあります.js.erbファイル:モデムボックス内にフォームを保持するための検証エラーがある場合、:createアクションが呼び出すファイル:

$('MB_content').update("<%= escape_javascript(render :partial => 'form') %>"); 
Modalbox.resizeToContent(); 
$('new_users').observe('submit', function(event) { 
event.stop(); 
this.request(); 
}); 

これは:createアクションではうまくいきます。レコードを編集したいときは:updateアクションのためにはどうすればいいですか?また、主な問題は、検証エラーがある場合、モーダルボックスの外にリダイレクトすることです。

UPDATE

$('new_user').observe('submit', function(event) { 
       event.stop(); 
       this.request(); 

「new_userが」形式のIDであること:
私はオープンモーダルボックスを保つことになっているのJavaScriptの一部であることを発見しました。これを使用してレコードを編集する場合、フォームのIDはedit_user_1またはedit_user_32、または編集中のユーザーになります。だから私はここでは解決できないと思いますが、idの代わりにセレクタとしてjavascriptのクラスを使用する方法です。なぜなら私は手動で 'edit_user_1'を入れて、id 1のユーザを編集しているので、それは動作しますが、他のユーザにとっては明らかにそうではありません。代わりにModalBoxを使用しての

答えて

1

は、私は(ここではチュートリアル)FaceBoxを使用して終了:ほぼ同じですが、ためにクラスやIDを付加するという点で、より柔軟なように見えた

http://net.tutsplus.com/tutorials/ruby/how-to-build-an-unobtrusive-login-system-in-rails/

セレクタ。それはのIDを要求すると

var myid = jQuery('#userform').children().attr('id'); 

、:それは、動的に来るときまた、レールが生成されたIDは、私は、ダイナミックリンクを取得し、セレクタにそれを渡す変数を作成するために、少しのjQueryを使用しました私はとにかく

'#' + myid 

に渡す形で、私は、これはチュートリアル以上、さらには新しいユーザーを追加し、1の編集で動作するようにそれを変更することができたに従うことによって動作するようになりました。

関連する問題