Question

I am writing a small invoice application in Yii. I have the database for the model item. The item database is something like this

  +++++++++++++++++
  |  InvoiceItems |
  +++++++++++++++++
  +      id       +
  +      name     +
  +  description  +
  +    unit_cost  +
  +    quantity   +
  +    tax        +
  +    total      +
  +++++++++++++++++

Now, in item model I have made a dropdown list where I am fetching all the item name with its unit_cost, quantity, tax etc in Ajax. In order to do the total, I have the business logic as:

1. unit_cost will be multiplied by quantity
2. Tax will then be added to the total.
3. The total should finally pop up in the total field in the _form.php file.

For the calculation, I have written this jQuery script:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#InvoiceItems_unit_cost, #InvoiceItems_quantity, #InvoiceItems_tax").on('keyup',function(event){
    var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
    var total = subtotal + (subtotal  * jQuery("#InvoiceItems_tax").val() / 100);
    jQuery("#InvoiceItems_total").val(total);
  });
});
</script>

This is working fine when I am manually inserting the values but it’s not working when the values are coming from the database. I am totally stuck.

UPDATE

When I am trying to see the value after fetching from the database through ajax in console tab of firefox just like console.log("#InvoiceItems_quantity").val(), it is showing an empty string.
Ajax code to fetch data from the database in form of json

        <?php echo $form->dropDownList($customers,'customer_name',CMap::mergeArray(CHtml::listData(Customers::model()->findAll(), 'customer_name',       'customer_name'
        ),
        array(
        'empty'=>array('Select'=>'- - Choose One - -'),
        'id'=>'Customers_name',
        'ajax'=> array(
            'type'=>'GET',
            'id'=>'abc',
            'url'=>$this->createUrl('Invoices/customerdetails'),// action that will generate the data
            'data'=>'js:"customer_name="+$(this).val()',// this is the data that we are sending to the action in the controller
            'dataType'=>'json',// type of data we expect back from the server
            'success'=>'js:updateFieldsCustomers',// a javascript function that will execute when the request completes
            'beforeSend'=>'js:function(){
                if($("#Customers_name").val() == "create_customer_link") {
                    addCustomers();
                    $("#dialogCustomers").dialog("open");
                    return false;
                }
            }',
        ),
        'options'=>array(
            'create_customer_link' => array('class'=>'create-link'),
        )
    )
);?>

   <?php
  Yii::app()->clientScript->registerScript('update','
  function updateFieldsCustomers(data, textStatus, jqXHR){
  // select each input field by id, and update its value
  $("#InvoiceItems_unit_cost").val(data.unit_cost);
  $("#InvoiceItems_quantity").val(data.quantity);
  $("#InvoiceItems_discount").val(data.discount);
  // similarly update the fields for the other inputs
  }
');
  ?>

Recent Update

When I tried for console.log("#InvoiceItems_quantity").val() I saw that it is showing the actual value of that field after change. Means when one value is selected it is showing the value of previous entered value in console panel. I think all this is working as I have used on change function but when I am using .select its not working at all.Not any value is showing in console panel.

Answer 1

I got the solution for this question. It should be like this

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Product_name").ajaxComplete(function(event,request,settings){
    var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
    var total = subtotal + (subtotal  * jQuery("#InvoiceItems_tax").val() / 100);
    jQuery("#InvoiceItems_total").val(total);
  });
});
</script>