DOJO：ajax呼び出しの後でフォーム要素をどのように再初期化しますか？

Question

私はZend Framework & Dojo Toolkitを使用していくつかのことをしようとしています。ここに問題があります：

私は、Ajaxラジオボタンの選択肢を持つZend Frameworkフォームクラスでレンダリングされるフォームを持っています。これらのラジオボタンの1つをクリックすると、Ajaxリクエストが別のコントローラに送信されます。コントローラにはレイアウトがなく、レンダリングされたフォームだけがあります。 ajaxリクエストはdivを新しいフォームオプションで設定します。

問題は、divのinnerHTMLをajaxレスポンスに置き換えると、すべてのフォーム入力と要素が同じDojoスタイリングとフォーム検証を継承しないということです。

ajax呼び出し後にフォーム要素を再初期化する方法があるのだろうかと思っていましたか？

私はこのコードで見つけて修正したコードを使用しようとしましたが、このコードは機能しませんでした。 dojo.parser.parse(div);行を使用しても何も変更されません（この例のrg_adressはDOM上に配置されるフォーム要素のIDです）。ここrg_addressのにconsole.logは次のとおりです。

<input type="text" dojotype="dijit.form.ValidationTextBox" 
    required="1" invalidmessage="The first name of the recipient" 
    value="" name="rg_address" id="rg_address" class="textbox"/> 

    onClick=' 

    dojo.xhrGet({ 
    url: "/transfer/newrecipient/", 
    handleAs: "text", 
    timeout: 10000, // Time in milliseconds 

    // The LOAD function will be called on a successful response. 
    load: function(response, ioArgs) { 
    $("#newRecipient").html(response); 
     $("#newPayMethod").html(""); 
    $("#newPayDetail").html(""); 

    var div = dojo.byId("rg_address"); 
    console.log(div); 
    dojo.parser.parse(div); 

    return response; 
    }, 

    // The ERROR function will be called in an error case. 
    error: function(response, ioArgs) { 
    $("#newRecipient").html("Error loading registration form"); 
    $("#newPayMethod").html(""); 
    $("#newPayDetail").html(""); 
    return response; 
    } 

    });' 

おかげで、 硬膜

Answer 1

DojoXは精巧なCRUDアプリケーションを作成するためのフォームマネージャを持っています。基本的には、フラットなJSONスタイルのオブジェクトをフォーム（読み書き可能）、統一されたイベント処理、フォームで動的にやりたいことなど、フォームにマッピングすることができます。これは、HTMLフォーム要素やDijitウィジェットと同様に機能します。

例：

dojo.require("dojox.form.Manager"); 

// our data 
var data = { 
    name: "Bob Smith", 
    gender: "male" 
}; 

// the form manager 
var fm = new dojox.form.Manager({}, "my_form"); 

// now we can populate the form 
fm.setFormValues(data); 

// we can read them back when user submits them 
// or indicated that she finished with them 
var newData = fm.gatherFormValues(); 

// populate fields separately 
fm.elementValue("name", "Jane Doe"); 
fm.elementValue("gender", "female"); 

// read a field value 
var newName = fm.elementValue("name"); 

上記の例のためのHTMLスニペットは、そのようなものにすることができます

<fieldset id="my_form"> 
    Name: <input type="text" name="name" value=""> 
    <br> 
    Gender: <input type="text" name="gender" value=""> 
</fieldset> 

それとも、それはそのようなことができます：

<fieldset id="my_form"> 
    Name: <textarea name="name"></textarea> 
    <br> 
    Gender: <select name="gender"> 
    <option value="male" >Male<option> 
    <option value="female">Female<option> 
    </select> 
</fieldset> 

それともそれができます次のようになります。

<fieldset id="my_form"> 
    Name: <input type="text" name="name" value=""> 
    <br> 
    Gender: <label><input type="radio" name="gender" value="male">Male</label> 
    <label><input type="radio" name="gender" value="female">Female</label> 
</fieldset> 

プレゼンテーションはフォームの仕組みからかなり離れているため、UIデザイナーはデータの最適な表現を思いついて、コードを変更せずにフォーム広告を無限に調整することができますまたはあなたを悩ます。 ;-)

他に何ができますか？他の素敵なものがたくさん：関係なく、基本的なフォーム要素/ウィジェットの

// disable all fields temporarily 
fm.disable(); 
// ... 
// doing I/O here? we want to prohibit a user 
// from modifying the form until we are done 
// ... 
// now we can enable all fields 
fm.enable(); 

// sample field list 
var fields = ["name"]; 

// we can enable/disable fields by name 
fm.disable(fields); 
// ... 
fm.enable(fields); 

// let's hide fields and show them back 
fm.hide(fields); 
// ... 
fm.show(fields); 

イベント処理：

// our business objective calls for pissing our users royally 
// by popping an alert on every single field change 
var my_alert = function(name, node){ 
    var onChangeEventName = dojox.form.manager.changeEvent(node); 
    return dojo.connect(node, onChangeEventName, function(){ 
    alert("Are you annoyed yet?"); 
    } 
}; 
var adapted = dojox.form.manager.actionAdapter(my_alert); 
// let's apply our function to all fields 
fm.inspect(adapted); 

明らかに私たちは/無効/表示/非表示を有効にすることができます/より多くのユーザーのアクションに反応する代わりに、ユーザーを怒らせる。

フォームマネージャパッケージには、それ以外のオブザーバー、フォーム処理、クラスショートカットがあります。全体が一連のミックスインとして構成されているため、必要なものだけを使用して独自のフォームマネージャを作成できます。

dojox.form.managerからそのドキュメントを読み始め、詳細はmixinsとdojox.form.Manager（すべてのmixinを一度に含むデフォルトマネージャクラス）へのリンクをたどります。 the form manager testをチェックすることを忘れないでください（警告：テストはデバッグ用に最適化されており、起動が遅くなる可能性があります）。

フラットでないデータを扱うことはできますか？はい。次の2つのオプションがあります。

1. 必要に応じていくつかのフラットな構造に変換して戻します。例：異なる部分を処理するために

   var data = { 
       "name-first": "Bob", 
       "name-last": "Smith" 
   }; 
   

2. 使用いくつかのフォームマネージャ：

   var data = { 
       name: { 
       first: "Bob", 
       last: "Smith" 
       } 
   }; 
   

   をに変換することができます。

通常、最初のオプションは実装が簡単です。データの前処理と後処理を使用するだけです。

入力の検証、ファンシーデータの書式設定、またはその他のクールなデータフィールド固有の操作を行う方法はありますか？ Dijitウィジェットの使用を検討してください。—これらはすべてこれらのことを行うことができます。

Answer 2

私は同じ質問を持っていると私は可能な答えが見つかりました：あなたが受信したデータを処理するために呼び出され、あなたの関数では、このような何かをする必要があると思い、私が理解から

http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-parse-after-ajax-call-again

をAJAX呼び出しから：

Zend_Dojo_View_Helper_Dojo::setUseDeclarative(); 

：

function updateform(data) 
{ 
    var targetNode = dojo.byId(\"step2\"); 
    targetNode.innerHTML = data; 
    dojo.parser.parse(targetNode); 
} 

これはで動作します

しかし私はプログラム的な使い方をしたいと思います。それについての質問を投稿します。