Yii2 - Использование javascript для обновления динамического элемента с помощью динамической формы wbraganca

Question

У меня есть динамическая форма для заказов на продукт. Я устанавливаю цену на основе компании (select2) и продукта, используя onchange от продукта dropDownList. Компания находится на базовой форме за пределами dynamicform (прост в обращении), но продукт является элементом списка в пределах dynamicform. Мой код работает для первого элемента, но я не могу установить последующее, потому что не могу понять, как адресовать элемент # добавленных элементов динамической формы.

динамическая форма петли:

<?php foreach ($modelsOrderItem as $o => $modelOrderItem): ?> 
    <div class="item panel panel-default"><!-- widgetBody --> 

     <div class="clearfix"></div> 
     <div class="panel-body"> 
      <?php 
       // necessary for update action. 
       if (! $modelOrderItem->isNewRecord) { 
        echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id"); 
       } 
      ?> 

      <div class="pull-right"> 
       <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> 
       <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> 
      </div> 
      <div class="col-md-5"> 

       <?= $form->field($modelOrderItem, "[{$o}]idProduct")-> 
        dropDownList 
        (
         ArrayHelper::map(Product::find()->all(), 'id','ProductCodeWithName'), 
         ['prompt' => 'Select a Product','style'=>'width:400px' , 

         'onchange' => '$.post("index.php?r=pricelist/pricelist&idProduct='.'"+$(this).val()+"'.'&idCompany='.'"+$("#order-idcompany").val(), 
          function(data) 
          { 
            $("#orderitem-0-itemprice").val(data); 
          });'] 

        )->label(false); 

       ?> 

      </div> 

      <div class="col-md-3" > 
        <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:150px'])->label(false) ?> 
      </div> 
      <div class="col-md-2"> 
        <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?> 
      </div> 

     </div><!-- .row --> 
    </div> 
</div> 
<?php endforeach; ?> 

Я теперь удалил OnChange функцию и добавил Javascript, что позволяет мне контролировать, какой элемент формы, чтобы изменить, но я не могу понять, как сделать это с помощью динамически добавляемых элементов. Я включил скрипт, который ищет изменения в добавленном элементе цены, но скрипт не активируется. Поэтому он работает для элемента zero (0), но не отвечает orderitem1 и т. Д. Вот мой обновленный код и Javascript.

   <div class="container-items"><!-- widgetContainer --> 
      <?php foreach ($modelsOrderItem as $o => $modelOrderItem):?> 
       <div class="item panel panel-default"><!-- widgetBody --> 
        <div class="clearfix"></div> 
        <div class="panel-body"> 
         <?php 
          // necessary for update action. 
          if (! $modelOrderItem->isNewRecord) 
          { 
           echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id"); 
          } 
         ?> 
         <div class="form-group kv-fieldset-inline"> 
          <div class="col-sm-4"> 

           <?= $form->field($modelOrderItem, "[{$o}]idProduct")->dropDownList 
            (
             ArrayHelper::map(Product::find()->orderBy('productCode')->all(), 'id','ProductCodeWithName'), 
             ['prompt' => 'Select a Product','style'=>'width:360px' ,] 

            )->label(false); 
           ?> 
          </div> 

          <div class="col-sm-2" > 
            <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:100px','padding'=>'100px'])->label(false) ?> 
          </div> 

          <div class="col-sm-2" > 
            <?= $form->field($modelOrderItem, "[{$o}]quantityType")->DropdownList(['Cartons'=>'Cartons','Bags'=>'Bags','Kilograms'=>'Kilograms', 
              'Tubs'=>'Tubs', 'Pieces' => 'Pieces'],['style'=>'width:150px'])->label(false) ?> 
          </div> 

          <div class="col-sm-2"> 
            <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?> 
          </div> 

          <div class="pull-right"> 
           <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> 
           <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> 
          </div> 
         </div> 
        </div><!-- .row --> 
       </div> 
      </div> 
      <?php endforeach; ?> 
     </div> 
     <?php DynamicFormWidget::end(); ?> 
    </div> 

Javascript:

<?php 
    $script = "$('#orderitem-0-idproduct').change(function() 
     { 
      var idProduct = $(this).val(); 
      $.get('index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct, idCompany:$model->idCompany }, 
      function(data) 
      { 
        $('#orderitem-0-itemprice').val(data); 
      }); 
     }); 
     $('#orderitem-1-idproduct').change(function() 
     { 
      var idProduct1 = $(this).val(data); 
      alert(); 
      $.get('index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct1, idCompany:$model->idCompany }, 
      function(data) 
      { 
        $('#orderitem-1-itemprice').val(data); 
      }); 
     });"; 
    $this->registerJs($script); 
?> 

Answer 1

Я был в состоянии использовать Javascript, чтобы узнать, какой элемент был быть нажата. Это позволило избежать проблемы с запуском кода для динамических элементов, которые не были инициированы.

<?php $js = <<<JS 

    $('body').change(function(e) 
    { 
     var element = '#'+$(e.target).attr('id'); 
     var field = element.substring(element.length - number_of_chars_in_your_fieldname, element.length); //stripping the string to identify the field you are looking 

     if(field === "field_you_are_looking_for") //element usually looks like #formID-row-field 
     { 
      var dropdownID = $(element).val(); 
      if (element.length === 22)    //single digit row numbers 
      { 
       var row = element.substring(11,12); //extract the current row number 
      } else         //row numbers higher than 9 
      { 
       var row = element.substring(11,13); 
      } 
      //Do whatever you need to do 

      $('#formID-'+row+'-field_you_want_to_change').val(data); //set the field to change on current row 
     } 
    }); 
JS; 

    $this->registerJs($js); 

?>