Заполните параметры элемента выбора в форме данными json без обновления страницы

Question

Контекст: в моей форме я настроил ее так, чтобы пользователи могли вставлять записи в БД, если нужная им опция еще не доступна в элементе select моей формы. Они просто добавляют новые данные через всплывающее модальное окно, которое обрабатывается, а затем вставляет новые данные в мою базу данных и сразу же доступно через json. Никаких проблем там нет.

Проблема: Новые данные, которые добавляются в базу данных, сразу же доступны через json, но элементы select не будут обновляться без полной страницы refre sh. Как я могу сделать так, чтобы мой скрипт анализировал json для всех данных без необходимости обновлять sh страницу? Я знаю, что это возможно, возможно, метод, который я использую в моем сценарии, неверен?

Выбор элементов из формы:

<select name="inputSupplier" id="inputSupplier" class="form-control">
        <option value="0">Select supplier...</option>
</select>

<select name="inputManufacturer" id="inputManufacturer" class="form-control">
        <option value="0">Select manufacturer...</option>
</select>

<select name="inputStatus" id="inputStatus" class="form-control">
        <option value="0">Select asset status...</option>
</select>

<select name="inputCategory" id="inputCategory" class="form-control">
        <option value="0">Select category...</option>
</select>

Вот пример json данных, которые создаются из запроса к базе данных:

{
"suppliers":
    {"1":"Amazon"},
"manufacturers":
    {"1":"Apple","5":"Lenovo"},
"categories":
    {"2":"Tablet"},
"status":
    {"1":"Ready to Deploy","2":"Deployed","3":"Damaged"}
}

Вот мой текущий рабочий код для извлечения и анализа json:

$(document).ready(function () 
{
	$.ajax({
		url : '/json/collection.json',
		type : 'GET',
		dataType : 'json',
		success:function(data)
		{
			$.each(data.suppliers, function(key,value){
				$('select[name="inputSupplier"]').append('<option value="'+ key +'">'+ value +'</option>');
			});
			$.each(data.manufacturers, function(key,value){
				$('select[name="inputManufacturer"]').append('<option value="'+ key +'">'+ value +'</option>');
			});
			$.each(data.status, function(key,value){
				$('select[name="inputStatus"]').append('<option value="'+ key +'">'+ value +'</option>');
			});
			$.each(data.categories, function(key,value){
				$('select[name="inputCategory"]').append('<option value="'+ key +'">'+ value +'</option>');
			});
		}
	});
});

Исправленный код:

Добавлено событие щелчка для выбора элементов в форме, которые вызывают функцию под ним.

onclick="refreshData()"

function refreshData() { 

    var suppliers = 'select[name="inputSupplier"]';
    var manufacturers = 'select[name="inputManufacturer"]';
    var status = 'select[name="inputStatus"]';
    var categories = 'select[name="inputCategory"]';

    $(suppliers).empty().html('<option value="0">Select supplier...</option>');
    $(manufacturers).empty().html('<option value="0">Select manufacturer...</option>');
    $(status).empty().html('<option value="0">Select status...</option>');
    $(categories).empty().html('<option value="0">Select category...</option>');

    $.ajax({
        url : '/json/collection.json',
        type : 'GET',
        dataType : 'json',
        success:function(data)
        {
            $.each(data.suppliers, function(key,value){
                $('select[name="inputSupplier"]').append('<option value="'+ key +'">'+ value +'</option>');
            });
            $.each(data.manufacturers, function(key,value){
                $('select[name="inputManufacturer"]').append('<option value="'+ key +'">'+ value +'</option>');
            });
            $.each(data.status, function(key,value){
                $('select[name="inputStatus"]').append('<option value="'+ key +'">'+ value +'</option>');
            });
            $.each(data.categories, function(key,value){
                $('select[name="inputCategory"]').append('<option value="'+ key +'">'+ value +'</option>');
            });
        }
}); }

Answer 1

Вы получаете json только на document.ready, вы должны сделать это и после отправки модального сообщения. Вот что я придумал:

$(document).ready(function() {
  // Initial load
  refreshData();

  // Also refresh data when modal is submitted. 
  // Adjust selector to match your modal or add the call to your current submit function.
  // Since ajax is async, you could get stale data if this call ends before the submission
  // Put the refreshData inside the success handler of the submit function
  $('#modal form').submit(function() {
    // Post form, etc
    refreshData();
  });
});

function refreshData() {
  $.ajax({
    url: '/json/collection.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      refreshSelect('inputSupplier', data.suppliers);
      refreshSelect('inputManufacturer', data.manufacturers);
      refreshSelect('inputStatus', data.status);
      refreshSelect('inputCategory', data.categories);
    }
  });
}

function refreshSelect(name, data) {
  // Select by id
  let $elem = $('#' + name);
  // Get current value
  let oldValue = $elem.val();
  // Get "template" value with value 0, which is the first element
  let emptyOption = $elem.children('option').first();
  // Empty the element and add the option. We are back to initial state
  $elem.html(emptyOption);
  // Append elements retrieved from backend
  $.each(data, function(key, value) {
    $elem.append('<option value="' + key + '">' + value + '</option>');
  });
  // Restore selection
  $elem.val(oldValue);
}