Ajax-Anfragedaten konnten nicht in das Eingabefeld

Question

angezeigt werden Ich habe eine Schleife erstellt, die eine Dropdown-Liste und ein Eingabefeld enthält. Was ich brauche, ist: Wenn ich einen Wert aus der Dropdown-Liste von Fruit Genres, wird das Feld Preis Feld Wert aus der Datenbank angezeigt. Ich habe all diese Funktionen ausgeführt, konnte jedoch den Wert für das Feld "Einzelpreis" nicht anzeigen.

Hier ist mein Code:

Seite anzeigen:

<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']); 
} 

Ich habe die erwarteten Daten zu der Javascript-Konsole. aber konnte die Daten nicht an das Eingabefeld übergeben.

Ich habe versucht:

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

statt

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

in der Ajax-Erfolg Funktion, aber es hat nicht funktioniert.

wenn ich hinzufügen, eine statische ID wie folgt aus:

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

dann funktioniert es.

Kann mir bitte jemand helfen? Ich stecke darauf fest.

Ich benutze CakePHP 3 für mein Projekt.

Answer 1

priceId ist ein Wert wie price_1 ohne #. Um es einen Selektor von id zu machen - prepend es mit #:

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

Sie können sogar vereinfachen Code:

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

Sie das Element auswählen können direkt anstatt sich seine ID und wählen Sie mit einem anderen jQuery Anruf.

Eine andere Sache zu beachten - this im Senden Rückruf beziehen sich auf die Callback-Funktion selbst, nicht das Element.

$(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');   
});