Form of data returned by .get to allow .html to populate form?

Question

Using jQuery/jQueryUI I want to populate a form using this HTML/JS show below.

The url "editController/loadContents" will return some data and .html will (I believe) populate the form based upon the data but what structure should the data have ?.

The only examples I can find in the jQueryUI doco are for single element forms.

My guess is that some JSON which looks like this ...

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

... would populate the input fields. But how are the OPTIONS for the SELECTs provided and one of the the OPTIONs specified as '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>

BTW I've adapted this code from the very useful answer at How to use a jQuery UI Modal Form from ASP.Net MVC list page

Answer 1

.html will (I believe) populate the form based upon the data but what structure should the data have ?.

.html() simply sets the HTML content of the matched elements in your jQuery selector to the contents you provide. There's no automatic setting of values for existing inputs based on a JSON object.

This leaves you with two options:

1. Make your server-side code return a populated HTML form that you blindly use .html() with, or
2. Write JavaScript to associate the raw data you get back from the server with the inputs that exist on your page.

But how are the OPTIONS for the SELECTs provided and one of the the OPTIONs specified as 'selected' ?

To dynamically insert options into an existing select element, you could simply generate a new option element and .append() it:

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

Obviously, you would have to adapt that code to the JSON data you get back from your server-side code, probably looping through an array of activities you got back and creating a new option for each one.