レイル付きのエントリレベルのjavascript：フォームsubmit（3.1/jquery）のdivの更新

Question

私は、テキストを含むdivとそのテキストを更新するためのフォームを、レール3.1/jqueryに持っています。私はjqueryやjsをよく知らないので、コントローラー用のcoffeescriptをちょっと掘り下げています。

私が見つけたチュートリアルはどれも関連性がなく、私が見つけた数少ないものは古代です。私は何が起こっているのかを見ることができます：私はajaxの成功のためのjsアラートを得ることができます。リモートフォーム（サーバーとコントローラーのアップデートが動作します - 基本テキストは変更されますが、私は変更を見るためにページをリフレッシュする必要があります）。

だから私は、私が通過働いている2つの基本的な質問がある：

• 私はJSのパーシャルをいじる必要があるか、私は、ページのJS/CoffeeScriptのにこれを置くことができますか？このように見えるのは、ちょっとばかりの部分的な部分がなくても処理できます。

• js/jquery：.html、.loadなどの情報をどのように置き換えて制御するかは関係しているようですが、私は正しいコンボを見つけられませんでした。私が見つけた

すべてのチュートリアルはどちらかのレールの中にいくつかの基本的なjqueryのものを行うための基本的なヒット・地上ランニングの理解のために古すぎるか、あまりにも冗長です。私は、js/jsonを使ってフォームの提出をスピードアップして処理を進めようとしています。初心者のための新しくて、はっきりした、簡単なチュートリアルはすばらしいでしょうが、学習の正しい方向に私を指し示すものは素晴らしいでしょう。

ええ、私はまだコードを掲示していませんが、私が少し働いていれば、私はそれを投稿します。

Answer 1

、このような何か：myTextがある

$("#myDivId").text(myText); 

をサーバーに提出したテキスト、またはサーバーからの応答のいずれか、状況に最も適したもの。

もっと一般的に言えば、要素のテキストを置き換えるには、$("#myElementId").text("new text")を使用します。要素のHTMLを置き換えるには$("#myElementId").html("<b>new HTML</b>")

Answer 2

Rubyについてはわかりませんが、これはjQueryで簡単に処理できます。

AJAXフォームの提出を行い、AJAX呼び出しが成功を返した後に<div>要素を更新することができます。

//bind some code to the submit event for your form 
$('#form_id').bind('submit', function (event) { 

    //preventDefault(); is the same as return false; except you can run code after preventDefault(); 
    event.preventDefault(); 

    //make a GET request to your server-side script 
    $.get('path/to/form_action.rb', $(this).serialize(), function (response) { 

     //this is the callback for the AJAX call 
     $('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>'); 
    }); 
}); 

いくつかの注意：また$.post()（http://api.jquery.com/jquery.post/）メソッドではなく、$.get()（http://api.jquery.com/jquery.get/）を使用すると、POSTメソッドを使用してデータを送信することができます

• 。
• event.preventDefault（）;フォームが正常に送信されるのを止めて、あなた自身のコードでその送信を処理することができます。
• response AJAXコールバック内の変数は、フォーム提出を処理した後にルビスクリプトが出力する応答です。 $.get()コールで
• $(this).serialize()は、AJAXコールに自分のフォーム入力データを追加している：http://api.jquery.com/serialize/あなたはAJAXの成功にalert()を持って