Форма данных, возвращаемая .get, чтобы позволить .html заполнить форму?

Question

Использование jQuery / jQueryUI Я хочу заполнить форму с помощью этого HTML / JS шоу ниже.

URL-адрес "editController / loadContents" вернет некоторые данные, и .html заполнит форму (на мой взгляд), основываясь на данных, но какую структуру должны иметь данные?

Единственные примеры, которые я могу найти в документе jQueryUI, относятся к одноэлементным формам.

Я предполагаю, что какой-то JSON, который выглядит следующим образом ...

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

... заполнил бы поля ввода. Но как предоставляются опции для SELECT и одна из опций, указанная как «выбранная»?

<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>

Кстати, я адаптировал этот код из очень полезного ответа на Как использовать модальную форму пользовательского интерфейса jQuery со страницы списка ASP.Net MVC

Answer 1

.html заполнит (я полагаю) форма основана на данных, но что структура должна иметь данные?.

.html() просто устанавливает содержимое HTML соответствующих элементов в вашем селекторе jQuery на содержимое, которое вы предоставляете. Не существует автоматической установки значений для существующих входных данных на основе объекта JSON.

Это оставляет вам два варианта:

1. Заставьте ваш серверный код возвращать заполненную HTML-форму, которую вы используете вслепую .html(), или
2. Напишите JavaScript, чтобы связать необработанные данные, которые вы получаете с сервера, с input, существующими на вашей странице.

Но как ВАРИАНТЫ для SELECTs предоставляется и один из ОПЦИИ, указанные как «выбранные»?

Чтобы динамически вставить опции в существующий элемент select, вы можете просто сгенерировать новый элемент option и .append() it:

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

Очевидно, вам придется адаптировать этот код к данным JSON, которые вы возвращаете из кода на стороне сервера, возможно, просматривая массив возвращаемых вами действий и создавая для каждого новый option.