Yii2 - 자바 스크립트를 사용하여 wbraganca dynamicform을 사용하여 요소에서 동적 업데이트

Question

제품 주문에 대한 동적 양식이 있습니다. 나는 회사 (select2)와 제품 dropDownList에서 onchange을 사용하여 제품을 기준으로 가격을 설정하고 있습니다. 회사는 기본 형식으로 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를 기능을 제거하고 나를 변화하지만, 나는 동적으로 추가 요소와 함께이 작업을 수행하는 방법을 알아낼 수없는 형태 요소를 제어 할 수 있도록 자바 스크립트를 추가했습니다. 추가 된 가격 요소에 변경을 찾는 스크립트를 포함 시켰지만 스크립트가 활성화되지 않았습니다. 그래서 그것은 제로 (0) 요소에 대해 작동하지만 orderitem1 등으로 응답하지 않습니다. 여기에 내 업데이트 된 코드와 자바 스크립트가 있습니다.

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

자바 스크립트 :

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

내가 클릭하고 한 요소를 찾아 자바 스크립트를 사용할 수 있었다. 따라서 시작되지 않은 동적 요소에서 코드를 실행할 수 있다는 문제를 피할 수있었습니다.

<?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); 

?>