.htmlがフォームに入力できるようにするために.getによって返されるデータの形式？

Question

jQuery/jQueryUIを使用するこのHTML/JSショーを使用してフォームを作成します。

"editController/loadContents"というURLはいくつかのデータを返し、.htmlはデータに基づいてフォームを作成しますが、データにはどのような構造が必要ですか？

jQueryUI docoで見つかる唯一の例は、単一要素フォームです。

私の推測では、このようになりますいくつかのJSON ...

{ 
    "starttime": "10:00", 
    "endtime": "11:00", 
} 

が...入力フィールドを埋めるだろうということです。しかし、SELECTのOPTIONSはどのように提供され、OPTIONの1つは 'selected'として指定されていますか？

<div id="dialog" title="Basic dialog"> 
    <!-- loaded from ajax call --> 
    <form id="exampleForm"> 
    <fieldset> 
    <label for="activity">Activity</label> 
    <br /> 
    <select name="activity" id="activity" class="ui-widget-content ui-corner-all"> 
    </select> 
    <br /> 
    <label for="subactivity">Sub-Activity</label> 
    <br /> 
    <select name="subactivity" id="subactivity" class="ui-widget-content ui-corner-all"> 
    </select> 
    <br /> 
    <label for="activity">Reason</label> 
    <br /> 
    <select name="reason" id="reason" class="ui-widget-content ui-corner-all"> 
    </select> 
    <br /> 
    <label for="starttime">Start</label> 
    <br /> 
    <input type="text" name="starttime" id="starttime" class="text ui-widget-content ui-corner-all" /> 
    <br /> 
    <label for="endtime">End</label> 
    <br /> 
    <input type="text" name="endtime" id="endtime" class="text ui-widget-content ui-corner-all" /> 
    <br /> 
    </fieldset> 
    <input type="button" onclick="Save()" /> 
    </form> 


</div> 

<script> 
    $(function() { 
     $('.myPop').click(function() { 
      $.get("editController/loadContents", function(data){ 
      $("#dialog").html(data); 
      });   
      $("#dialog").dialog('open'); 
     }); 
    }); 


function Save(){ 
$.post("/editController/Edit", $("#exampleForm").serialize(), 
    function(data){ 
    $("#dialog").dialog('close'); 
    //update grid with ajax call 
    }); 
} 

</script> 

ところで、私は.htmlのは（私は信じて）データに基づいていますが、データがどのような 構造を持っている必要があり フォームを移入しますHow to use a jQuery UI Modal Form from ASP.Net MVC list page

Answer 1

で非常に有用な答えから、このコードを適応してきました？

.html()は、jQueryセレクタの一致する要素のHTMLコンテンツを指定した内容に設定するだけです。 JSONオブジェクトに基づく既存の入力値の自動設定はありません。

これは、2つのオプションであなたを残します：サーバー側のコードを作成し

1. は、あなたが戻ってから取得した生データを関連付けることが人口あなたは盲目的に.html()を使用するHTMLフォーム、または
2. 書き込みJavaScriptを返しますあなたのページに存在するinputのサーバー。

しかし、どのように のSELECTのオプションが提供されており、「選択」として指定された のオプションのいずれか？動的に既存のselect要素に選択肢を挿入するには

、あなたは、単に新しいoption要素を生成し、.append()ことができます

$("<option>") 
    .text("Swimming") 
    .attr("selected", true) // Set the option's "selected" attribute 
    .attr("value", 1) 
    .appendTo("#activity"); 

もちろん、あなたが取得するJSONデータにそのコードを適応させる必要がありますサーバー側のコードから戻ってきます。おそらく、戻ってきた一連のアクティビティーをループし、それぞれに新しいoptionを作成します。