Изменить существующую функцию jQuery ajax, чтобы извлечь последнее введенное значение из json и отметить как выбранное - PullRequest
1 голос
/ 30 апреля 2020

Вот рабочий процесс моей формы:

Отображение формы с элементами ввода и выбора >> Все элементы выбора имеют кнопку для добавления новых данных через модальное окно, которое выполняет вставку базы данных с помощью ajax и закрывает модальное окно >> при модальном закрытии я запускаю функцию refreshData (), которая вытягивает новые данные из json в элементы выбора формы.

Все вышеперечисленное прекрасно работает, но как пометить правильный параметр (последний добавленный через модальное окно) в функции refreshSelect () ниже? Например: я добавляю нового поставщика в свою базу данных через модальное окно, оно корректно вставляется в БД, но как мне пометить этого нового поставщика как выбранного после закрытия модального окна?

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

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

jQuery функция, которая будет извлекать данные из json через ajax и обновлять sh выбранные элементы на странице:

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

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

function refreshSelect(name, data, newId) {
  // 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>');
  });
  if(newId){
      $elem.val(newId);
  }else{
      $elem.val(oldValue);
  }
}

Функция, которая будет вставлять новые значения в базу данных через ajax из модального окна (Very basi c):

$(document).ready(function ()
{
    $('.modal-submit').on('submit', function(e){
        e.preventDefault(); //prevent default form submit action

        $(".backend-error").html(''); //clear out previous error messages
        $('input').removeClass('input-error'); //clear error border class

        var data = $(this).serialize();
        var type = $(this).find('input[name="type"]').val();

        switch(type){
            case "supplier":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'supplier']) }}';
                var modalName = '#supplierModal';
                var modalInput = '#inputSupplierNew';
                break;
            case "manufacturer":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'manufacturer']) }}';
                var modalName = '#manufacturerModal';
                var modalInput = '#inputManufacturerNew';
                break;
            case "model":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'model']) }}';
                var modalName = '#modelModal';
                var modalInput = '#inputModelNew';
                break;
            case "status":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'status']) }}';
                var modalName = '#statusModal';
                var modalInput = '#inputStatusNew';
                break;
            case "category":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'category']) }}';
                var modalName = '#categoryModal';
                var modalInput = '#inputCategoryNew';
                break;
        }

        $.ajax({
           url:url,
           method:'POST',
           data:data,
           success:function(response){
                refreshData(newId = response.id); // set newId to the id of the newly inserted item
                $(modalName).modal('hide'); //hide modal
                $(modalInput).val(''); //clear input value
           },
           error:function(e){
                //console.log(error.responseJSON.error)
                //console.warn(error.responseJSON.error);
                $.each(e.responseJSON.error, function (i, error) {
                    $(modalInput).addClass('input-error');
                    $(modalName + ' .backend-error').html(error[0]); //return error from backend
                });
           }
        });
    });
});

Редактировать: Добавлен исправленный код

1 Ответ

1 голос
/ 30 апреля 2020

Вы можете передать необходимое new value для установки в поле выбора из вашего обработчика успеха ajax POST в ваш вызов refreshData() и в конечном итоге в вашу функцию refreshSelect() следующим образом:

Сохранить Вызов данных:

var data = $(this).serialize();
console.log(data);

/*TODO*/
var newSupplierId = <logic to get ID/Name of newly added supplier>;

var url = '{{ action('AddAssetController@addAttribute', ['type' => 'supplier']) }}';

$.ajax({
   url:url,
   method:'POST',
   data:data,
   success:function(response){
      if(response.success){
          refreshData(newSupplierId); //passing newSupplierId  to refreshData function
          $('#supplierModal').modal('hide');
          $('#inputSupplierNew').val('');
          console.log(response);
      }else{
          alert('There was an error inserting data. Please try again.')
      }
   },
   error:function(error){
      console.log(error)
   }
});

Другой модифицированный код:

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

function refreshSelect(name, data, newSupplierId) {
  // 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>');
  });
  if(newSupplierId) // check whether newSupplierId is null or not
  {
      //if newSupplierId is not null means select newly added supplier
      $elem.val(newSupplierId);
  }
  else{
      // Restore selection
      $elem.val(oldValue);
  }
}

Надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...