Я создал эту форму, используя шаблон лезвия Laravel, и сделал ее динамической, используя jQuery. Теперь я могу заполнить строки таблицы всеми входными полями. Теперь я пытаюсь получить данные AJAX в эти поля при изменении выбрать значение в первом столбце. он работает только в первой строке, потому что нет уникального идентификатора для каждого поля ввода. пожалуйста, помогите мне исправить это.
следующий код, используемый в форме на шаблоне лезвия
<tr id="1">
<td>
{!! Form::select('item_id[]', ['' => 'Select an item'] + $items, null, array('class' => 'form-control', 'id' => 'itemId', 'required')) !!}
</td>
<td>
{!! Form::text('item_description[]', null, ['class' => 'form-control', 'id' => 'item_description', 'placeholder' => 'Not Required | Optional']) !!}
</td>
<td>
{!! Form::text('units[]', null, ['class' => 'form-control', 'placeholder' => 'Add Units', 'required']) !!}
</td>
<td>
{!! Form::text('rate[]', null, ['class' => 'form-control', 'id' => 'rate', 'placeholder' => 'Add Rate', 'required']) !!}
</td>
<td>
{!! Form::text('amount[]', null, ['class' => 'form-control', 'placeholder' => 'Add Hrs and Rate', 'id' => 'amount']) !!}
</td>
<td class="text-center actions"><a id="delete-row" onclick="delTableRow($('#dynamic-tbl'));" href="#"><i class="fa fa-times"></i></a></td>
</tr>
Следующий код используется для заполнения большего количества строк одинаковыми полями ввода
/*
* Dynamic table row adding and deleting functions
*/
function addTableRow(jQtable){
var rowId = parseInt($('#dynamic-tbl tbody tr:last').attr('id'));
++rowId;
// console.log(rowId);
jQtable.each(function(){
var tds = '<tr id='+rowId+'>';
jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
tds += '</tr>';
if($('tbody', this).length > 0){$('tbody', this).append(tds);
}else {$(this).append(tds);}
});
}
здесь $(this).html()
продублируйте внутренний HTML из предыдущего ряда. я пытаюсь добавить уникальный идентификатор для каждого поля ввода.
и следующий код, используемый для получения данных с использованием ajax
/*
* Estimate Item Description Ajax function
*/
$('#dynamic-tbl #itemId').change(function(e) {
//console.log(e);
var item_id = e.target.value;
//ajax
$.get('/ajax-item?item_id=' + item_id, function(data){
//success data
//console.log(data);
$('#item_description').empty();
$('#rate').empty();
$.each(data, function(index, itemObj){
$('#item_description').val(itemObj.name);
$('#rate').val(itemObj.sale_price);
});
});
});
Вы можете использовать уникальный идентификатор() метод из jQuery UI. Он будет применен к набору соответствующих элементов, поэтому вам просто нужно применить его к вашему #dynamic-tbl
поля ввода:
$('#dynamic-tbl input').uniqueId()
Если вы не хотите использовать jquery, вы также можете написать свою собственную функцию, которая создает уникальный идентификатор:
function uniqId() {
return Math.round(new Date().getTime() + (Math.random() * 100));
}
Если вы хотите, чтобы идентификатор имел только увеличивающееся число в, и вы также можете изменить функцию addTableRow, чтобы изменить идентификатор, прежде чем копировать HTML-код в следующую строку:
$(this).find('input').attr("id","itemId" + rowId);
Других решений пока нет …