2017-02-03 9 views
1

私はdiv要素にフォームの送信から結果のHTMLを入れたい5/Turbolinks 5アプリケーション。Turbolinks 5 AjaxのPOST

形態は

= form_for(user) do |f| 

標準レールの形です。私はAJAXを経由してフォームを送信する際

成功提出後のリダイレクトは、ブラウザ

respond_to do |format| 
     if @user.save 
     format.html { redirect_to @user, notice: 'User was created.' } 

に送信されます。

$(".dialog").on("submit", "form", function(e){ 
e.preventDefault(); 
$.ajax({ 
    url: $(this).attr("action"), 
    method: "POST", 
    data: $(this).serialize() 
}).done(function(data) { 
    $(".dialog .canvas").html(data); 
}); 
}); 

から提出取得して、サーバーのredirect_toステートメントは、ブラウザをリダイレクト新しいユーザーのページ

リダイレクトは、ブラウザがにリダイレクトされたページの内容と体を交換するturbolinksの原因となります。代わりに、特定のdiv $( "。dialog .canvas").html(data)を置き換えたいと思います。どのように私はターボリンクのこの動作を防ぐことができます。

+0

は、あなたのコントローラのコードを追加することはできますか?私の推測では、リダイレクトはしないでくださいが、要求に対する応答を表示します。 –

+0

このビデオを見ると、あなたに役立ちます。 http://railscasts.com/episodes/205-unobtrusive-javascript – WaKeMaTTa

答えて

0

私はあなたが正しく何をしようとして理解していれば、あなたはサーバーからHTMLをレンダリングし、サーバーから生成されたJavaScriptを使用して、あなたのdiv要素を更新することができます。

js.erbファイルでは、RubyとJavaScriptを使用できます。私は、HTMLと動的コンテンツを構築し、それをクライアントに戻してJavaScriptとして実行するのに非常に役立つことがわかります。

人々は、サーバが生成したJavaScriptの長所/短所を議論することができますが、私は、それは完全に罰金だし、それがうまく機能意見です。それ以外の場合は、サーバーとクライアントのテンプレートを同期させておく必要があります。これは本当に面倒です。クライアントサイドですべてのテンプレートを実行し、JSON用にのみサーバーを使用する必要があります。

それはすべてが起こっている方向だと主張多くの人々がありますが、私は、将来のように、クライアント/サーバーの道を壊す表示されません。 JavaScriptのMVCフレームワークが爆発的に現れるのを見てください。オプションを追加し、コントローラにturbolinks 5.0.1で

0

turbolinks: falseすなわち format.html { redirect_to @user, notice: 'User was created.', turbolinks: false }

その他のソリューション(それはあなたがRailsの5.1にアップデートすることはできませんので、あまりよくありません)2.5.3をturbolinksに固執しています。

format.jsあるいはformat.jsonを使用して、他のソリューション、チェックがあるかもしれません:https://github.com/vtamara/turbolinks_prob50