javascript - Ajax 请求数据无法显示到输入字段中

Question

我创建了一个循环，其中包含一个下拉列表和输入字段。我需要的是:当我从 Fruit Genres 下拉列表中选择一个值时，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 控制台。但无法将数据传递到输入字段。

我试过:

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

代替

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

进入 ajax success 函数，但没有成功。

如果我添加如下静态 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);