Ajaxリクエストデータが入力フィールドに表示されませんでした

Question

私は、ドロップダウンリストと入力フィールドを含むループを作成しました。 私が必要としているもの： フルーツジャンルのドロップダウンリストから値を選択すると、Unit Priceフィールドにデータベースからの値が表示されます。私はこれらのすべてを行いましたが、単価フィールドに値を表示できませんでした。ここで

は私のコードです：

表示ページ：

<div class="table-responsive"> 
<table class="table table-hover" id="item-tbl"> 
    <thead> 
    <tr> 
     <th class="text-center">Fruit Type</th> 
     <th class="text-center">Fruit Genres</th> 
     <th class="text-center">Qty</th> 
     <th class="text-center">Unit Price</th> 
     <th class="text-center">Sub Total</th> 
    </tr> 
    </thead> 
    <tbody> 

    <?php for($i=1; $i<=3; $i++){ ?> 
    <tr style=""> 
     <td><?php echo $this->Form->input('fruit_type_id', ['options'=>$fruit_types, 'empty'=>'Select Fruit Type', 'label'=>false, 'name'=>'detail_orders['.$i.'][fruit_type_id]']); ?></td> 
     <td><?php echo $this->Form->input('fruit_genre_id', ['options'=>$fruit_genres, 'empty'=>'Select Fruit Genre', 'label'=>false, 'name'=>'detail_orders['.$i.'][fruit_genre_id]', 'class'=>'fruit_genre']); ?></td> 
     <td><?php echo $this->Form->input('quantity', ['type'=>'text', 'label'=>false, 'name'=>'detail_orders['.$i.'][quantity]', 'class'=>'quantity', 'id'=>'quantity_'.$i]); ?></td> 
     <td><?php echo $this->Form->input('price', ['type'=>'text', 'label'=>false, 'name'=>'detail_orders['.$i.'][price]', 'class'=>'price', 'id'=>'price_'.$i]); ?></td> 
     <td><?php echo $this->Form->input('sub_total', ['type'=>'text', 'label'=>false, 'name'=>'detail_orders['.$i.'][price]', 'class'=>'sub_total']); ?></td> 
    </tr> 
     <?php } ?> 
    </tbody> 
</table> 

Javascriptを：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".fruit_genre").on('change' , function() { 
     var fruitGenreId = +$(this).val(); 
     var priceId = $(this).closest('tr').find('.price').attr('id'); 
     // alert(priceId); 
     $.ajax({ 
      type: "GET", 
      url: baseURL+"orders/getFruitById/"+fruitGenreId+".json", 
      beforeSend: false, 
      success : function(returnData) { 
       if(returnData.response.code == '200'){ 
        console.log(returnData.response.data.unit_price); 
        // $(this).closest('tr').find('.price').val(returnData.response.data.unit_price); 
        $(priceId).val(returnData.response.data.unit_price); 
       }; 
      } 
     }) 
    }).trigger('change');   
}); 

OrdersController.php

public function getFruitById($id){ 
    $this->viewBuilder()->layout('ajax'); 

    $this->loadModel('FruitGenres'); 
    $item = $this->FruitGenres->get($id); 

    if (!empty($item)) { 
     $response['code'] = 200; 
     $response['message'] = 'DATA_FOUND'; 
     $response['data'] = $item; 
    }else{ 
     $response['code'] = 404; 
     $response['message'] = 'DATA_NOT_FOUND'; 
     $response['data'] = array(); 
    } 


    $this->set('response', $response); 
    $this->set('_serialize', ['response']); 
} 

私はjavascriptコンソールに期待されるデータを持っています。データを入力フィールドに渡すことができませんでした。

私が試してみました：AJAX成功関数に代わり

$(priceId).val(returnData.response.data.unit_price); 

の

$(this).closest('tr').find('.price').val(returnData.response.data.unit_price); 

を、それが働いていませんでした。

私は次のような静的なIDを追加した場合：

$('#price_1').val(returnData.response.data.unit_price); 

は、それが動作します。

誰でもお手伝いできますか？私はそれに固執しています。

私は自分のプロジェクトにcakephp 3を使用しています。

Answer 1

priceIdはprice_1のような値で、#はありません。そのIDによってセレクタようにするには - #とそれを先頭に追加：

$("#" + priceId).val(returnData.response.data.unit_price); 

をあなたも、あなたのコードを簡素化することができます。

// you get id of the found element so as to find this element again 
// you can store founded element instead of it's id 
var priceDiv = $(this).closest('tr').find('.price'); 

// in success callback: 
priceDiv.val(returnData.response.data.unit_price); 

Answer 2

あなたは代わりにそのIDを取得しての直接の要素を選択し、別のjQueryを使って選択することができますコール。

送信コールバックのthisは、要素ではなくコールバック関数自体を参照してください。

$(document).ready(function() { 
    $(".fruit_genre").on('change' , function() { 
     var fruitGenreId = +$(this).val(); 

     var $price = $(this).closest('tr').find('input.price'); // Get the element 

     $.ajax({ 
      type: "GET", 
      url: baseURL+"orders/getFruitById/"+fruitGenreId+".json", 
      beforeSend: false, 
      success : function(returnData) { 
       if(returnData.response.code == '200'){ 
        console.log(returnData.response.data.unit_price); 

        // Use $price directly as a jQuery object 
        $price.val(returnData.response.data.unit_price); 
       }; 
      } 
     }) 
    }).trigger('change');   
});