Question

$(document).ready(function() {
    $('#pricingEngine').change(function() {
         var query = $("#pricingEngine").serialize();
         $('#price').fadeOut(500).addClass('ajax-loading');
         $.ajax({
             type: "POST",
             url: "index.php/welcome/PricingEngine",
             data: query,
             dataType: 'json',
             success: function(data)
             {
               $('#price').removeClass('ajax-loading').html('$' + data.F_PRICE).fadeIn(500);
               $('#sku').attr('value') = (data.businesscards_id);
             }
         });
    return false;
   });
});

Need to set #sku as value of a hidden form field (not sure if i am doing that correctly in the above jQuery code.

<input type="hidden" name="sku" id="sku" value="*/PUT VAR VALUE HERE/*" />

Also need to pass the F_PRICE to the #price div.

Console in Chrome shows the JSON response as:

[
 {
  "businesscards_id":"12",
  "X_SIZE":"1.75x3",
  "X_PAPER":"14ptGlossCoatedCoverwithUV(C2S)",
  "X_COLOR":"1002",
  "X_QTY":"250",
  "O_RC":"NO",
  "F_PRICE":"12490",
  "UPS_GROUND":"12000",
  "UPS_TWODAY":"24000",
  "UPS_OVERNIGHT":"36000"
 }
]

Yet I only get ‘undefined’ in the price box. What is the reason here?

Answer 1

The structure returned as JSON is an array [] containing one element which is the object {} you are targeting. Access it via its array index [0]

// Access the array-wrapped object via its [0] index:
$('#price').removeClass('ajax-loading').html('$' + data[0].F_PRICE).fadeIn(500);
// Likewise here, and set the value with .val()
$('#sku').val(data[0].businesscards_id);

You could also .shift() the first element off the array and use that as you have it:

// Pull the first element off the array, into the same variable
// WARNING: Use a different variable if the array has multiple elements you need to loop over later.
// You *don't* want to do it this way if the array contains multiple objects.
data = data.shift();
$('#price').removeClass('ajax-loading').html('$' + data.F_PRICE).fadeIn(500);
$('#sku').val(data.businesscards_id);