Автоматический ответ ajax на динамические поля

Question

Я использую автозаполнение с помощью запроса 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> 

Сгенерированный HTML

<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> 

Answer 1

Во-первых, вы можете попробовать это:

$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)" внутри вновь добавленный элемент. Я думаю, что это решение может решить вашу проблему.

Answer 2

В коде есть только одно твердое значение (в обработчике success), поэтому я предполагаю, что проблема возникает. Вы можете использовать .attr("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 или новее, вы должен заменить .delegate своим новым воплощением .on. Если вы используете более старую версию, вам стоит подумать о ее обновлении.