3

Laravel ブレード テンプレートを使用してこのフォームを作成し、jQuery を使用して動的にしました。これで、テーブルの行にすべての入力フィールドを入力できるようになりました。今、最初の列の選択値を変更して、これらのフィールドに ajax データを取得しようとしています。各入力フィールドに一意の ID がないため、最初の行でのみ機能します。これを修正するのを手伝ってください。

ブレードテンプレートのフォームで使用される次のコード

<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 を複製します。各入力フィールドに一意の ID を追加しようとしています。

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);
        });
    });
});
4

1 に答える 1

3

You can use the uniqueId() method from jQuery UI. It will be applied to a set of matched element, so you just need to apply it to your #dynamic-tbls input fields:

$('#dynamic-tbl input').uniqueId()

If you don't want to use jquery you can also write your own function that creates a unique id:

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}

If you want the id only to have an increasing number at the and you could also modify your addTableRow function to change the id before copying the html to the next row:

$(this).find('input').attr("id","itemId" + rowId);
于 2016-01-30T10:15:40.287 に答える