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成功函数，但它没有用。

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

Ajax请求数据无法显示在输入字段中

2 个答案: