Вот рабочий процесс моей формы:
Отображение формы с элементами ввода и выбора >> Все элементы выбора имеют кнопку для добавления новых данных через модальное окно, которое выполняет вставку базы данных с помощью 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
});
}
});
});
});
Редактировать: Добавлен исправленный код