自动填充动态字段上的 ajax 响应

Auto-Fill ajax response on dynamic fields

本文关键字：ajax 响应 字段 填充 动态      更新时间：2023-09-26

我正在使用带有ajax请求的自动填充，这对于静态字段工作正常。例如：

$this->registerJs("$(document).delegate('.form-control','change',function(event){
    $.ajax({
        url: '".yii'helpers'Url::toRoute("ot-note/instrument1")."',
        dataType: 'json',
        method: 'GET',
        data: {id: $(this).val(),
        },
        success: function (data, textStatus, jqXHR) {
            $('#otinstrumententry-0-instrument_code').val(data.instrument_code);
            },
         beforeSend: function (xhr) {
            alert('loading!');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('An error occured!');
            alert('Error in ajax request');
        }
    });
});");
我的字段是动态添加

的，它不适用于动态添加的字段，代码如下所示：田野的id变得像 #field-0-instrument_code #field-1-instrument_cdoe

除第一个字段外，Jquery 无法识别连续字段，这些字段是动态添加的。

我如何解决这个问题。谢谢。

动态字段的添加代码

<div id="instrument_entry">
    <h3>Instruments Used</h3>
    <?php $id = 0; ?>
    <?php foreach ($otinstrumentModels as $otinstrument) { ?>      
        <div id="language" class="work-data-pad brdr-work marbtm10 row">
            <div class="col-md-4">     
            <?= $form->field($otinstrument, '[' . $id . ']' . 'instrument_name')->DropDownList(ArrayHelper::map('app'models'Instrument::find()->all(), 'id', 'instrument_name' ),
[ 'prompt' => 'Please Select' ])?>    
            </div>
            <div class="col-md-2">     
            <?= $form->field($otinstrument, '[' . $id . ']' . 'instrument_code')->textInput(['maxlength' => 255,'class'=>'form-control']) ?>      
            </div>
            <div class="col-md-1">     
            <?= $form->field($otinstrument, '[' . $id . ']' . 'hrs_time')->textInput(['maxlength' => 255])->label('Hrs-Time') ?>      
            </div>
            <div class="col-md-2">     
            <?= $form->field($otinstrument, '[' . $id . ']' . 'total_charges')->textInput(['maxlength' => 255]) ?>      
            </div>
            <?php ?>
    <div style="margin-top: 30px;" class="col-md-3 <?php echo ($id < 1) ? 'dnone' : 'dblock'; ?>" id="divDelete" class="row-fluid">           
    <a class="ft11 btn-remove" onclick="deleteSection(this, 'instrument_entry');"><span class="marleft18">Remove</span></a>               
    </div>  
</div>
    <?php $id++; ?> 
    <?php } ?>
</div>

生成的网页

<div id="instrument_entry">
    <h3>Instruments Used</h3>

        <div id="language" class="work-data-pad brdr-work marbtm10 row">
            <div class="col-md-4">     
            <div class="form-group field-otinstrumententry-0-instrument_name">
<label class="control-label" for="otinstrumententry-0-instrument_name">Instrument Name</label>
<select id="otinstrumententry-0-instrument_name" class="form-control" name="OtInstrumentEntry[0][instrument_name]">
<option value="">Please Select</option>
<option value="1">IMPLANTS(ORTHOPEDIC)</option>
<option value="2">O2 CHARGES PER HOUR</option>
</select>
<div class="help-block"></div>
</div>    
            </div>
            <div class="col-md-2">     
            <div class="form-group field-otinstrumententry-0-instrument_code">
<label class="control-label" for="otinstrumententry-0-instrument_code">Instrument Code</label>
<input type="text" id="otinstrumententry-0-instrument_code" class="form-control" name="OtInstrumentEntry[0][instrument_code]" maxlength="255">
<div class="help-block"></div>
</div>      
            </div>
            <div class="col-md-1">     
            <div class="form-group field-otinstrumententry-0-hrs_time">
<label class="control-label" for="otinstrumententry-0-hrs_time">Hrs-Time</label>
<input type="text" id="otinstrumententry-0-hrs_time" class="form-control" name="OtInstrumentEntry[0][hrs_time]" maxlength="255">
<div class="help-block"></div>
</div>      
            </div>
            <div class="col-md-2">     
            <div class="form-group field-otinstrumententry-0-total_charges">
<label class="control-label" for="otinstrumententry-0-total_charges">Total Charges</label>
<input type="text" id="otinstrumententry-0-total_charges" class="form-control" name="OtInstrumentEntry[0][total_charges]" maxlength="255">
<div class="help-block"></div>
</div>      
            </div>
                <div style="margin-top: 30px;" class="col-md-3 dnone" id="divDelete" class="row-fluid">           
    <a class="ft11 btn-remove" onclick="deleteSection(this, 'instrument_entry');"><span class="marleft18">Remove</span></a>               
    </div>  
</div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-primary sec-btn marbtm10" onclick="addNewSection('instrument_entry', 'OtInstrumentEntry')">+ Add Instrument</button>
        </div>
    </div>
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <button type="submit" class="btn btn-success">Create</button>        </div>
    </div>
    </form>

首先，你可以试试这个：

$this->registerJs("$(document).delegate('.form-control','change',function(event){
   sendAjax(this);
});");
function sendAjax(element)
{
    $.ajax({
        url: '".yii'helpers'Url::toRoute("ot-note/instrument1")."',
        dataType: 'json',
        method: 'GET',
        data: {id: $(element).val()},
        success: function (data, textStatus, jqXHR) {
            $('#otinstrumententry-0-instrument_code').val(data.instrument_code);
            },
         beforeSend: function (xhr) {
            alert('loading!');
         },
         error: function (jqXHR, textStatus, errorThrown) {
            console.log('An error occured!');
            alert('Error in ajax request');
        }
    });
}

现在，您可以在新添加的元素中添加onchange="sendAjax(this)"。我认为这个解决方案可以解决你的问题。

您的代码中只有一个硬编码值（在success处理程序中），所以我假设这就是问题的来源。您可以使用.attr("id")获取当前字段 ID，使用正则表达式获取数字并使用它来生成选择器：

    var currentId = $(this).attr("id");
    var generatedId = "";
    if ( currentId.match(/otinstrumententry-'d+-/) ) {
        generatedId = "#" + currentId.match(/otinstrumententry-'d+-/)[0]
                          + "instrument_code";
    }
    $.ajax({
        // ...
        success: function (data, textStatus, jqXHR) {
            if ( generatedId !== "" ) {
                $( generatedId ).val(data.instrument_code);
            }
        }
    });

此外，值得注意的是您要在哪些元素上调用此处理程序。从外观上看，它似乎只是select s，但是如果不了解业务逻辑，我就不能完全确定：

$(document).delegate('select.form-control','change',function(event){
});

附带说明一下，如果您使用的是jQuery 1.7或更高版本，则应将其替换为较新的版本.on .delegate。如果您使用的是旧版本，则应考虑对其进行更新

相关文章：