Question

ive a function that does calculations on a table using jquery when any input field is updated. It works fine but i need to be able to call it update a specific row when i load in data. I cant seem to get it working properly either it updates when the an input field changes and it wont work when i call it to update a specific row.

Im trying to pass a parameter into the function to tell what row to update when i need it and when it detects a change event it checks if the variable was passed in. I was trying to check if the passed in variable was undefined or null but i cant seem to get to work. What ami doing wrong?

my code;

so a call to update a certain row;

////////////////////////////////////////////
//load prices and pid from range selected
////////////////////////////////////////////

$(document).ready(function(){
    $("#range_select").change(function(event){  

    //get the range id
    $id=$("#range_select").val();

    var i;
    var loadedValues;
    var result;
    var pid;

    loadedValues=0;

    //clear All the prices if loaded, reset background color
    $(".price").val(0);
    $(".price").css("background-color","#FFF"); 

    //clear ALL product id
    $(".productid").val(0);
    ///////////////////////////////////////////////////////////

    //note the url will break if site changed
    $.ajax({url:"/mysite/products/list_products_from_range/"+$id, success:function(result){     

        /*if(result.length==0){
            //no results from ajax request
            alert('No products found for this range.);
            return false;
        }*/

        //parse the returned JSON object,for each parse of result we check the table
        $.each(jQuery.parseJSON(result), function() {       

            //console.log("product id="+this['Product']['id']); 

            pid=this['Product']['id'];
            var price=this['Product']['price'];
            var height=this['Product']['height'];
            var width=this['Product']['width'];

            /*console.log("price="+price);
            console.log("h="+height);
            console.log("w="+width);*/


            /////////////////////////////////////////////////////////////
            //now we have to go through the table and insert the values     

            i=-1;

            var rows = $("#productentry tr:gt(0)"); // skip the header row              
            rows.each(function(index) {     

                i++;
                var h = $("td:eq(3) .h", this).val();
                var w = $("td:eq(4) .w", this).val();

                //console.log(h +'x'+w);                
                //console.log("if "+w+" = "+width+" and "+h+" = "+height);              
                //console.log('index='+index);


                if(w==width && h==height){
                    //increment count of loaded values
                    loadedValues++;

                    //set the price
                    $("#listprice_"+i).val(price);

                    //set the pid
                    //alert(pid);
                    $("#productid_"+i).val(pid);

                    //change price textbox to visually show its chnaged
                    $("#listprice_"+i).css("background-color","#F60");  

                    //update totals (notworking)
                    calculateTotal(i);                  

                    return false;
                }

            }); 

            /////////////////////////////////////////////////////////////


        }); 
        alert('loaded '+loadedValues+' prices');


    }});    



    });//end click event
});


/////////////////////////////////////////////////////
//any input field that changes updates the calculation, not working fully i.e load product prices
/////////////////////////////////////////////////////
$(document).ready(function(){   
    $(":input").change(calculateTotal); 
});


////////////////////////////////////
//calculate total
///////////////////////////////////
var calculateTotal = function(index){

    var $discountpercent = null;
    var $total=null;
    var $quantity=null;
    var $id=null;
    var $marginpercent=null;
    var $margintotal=null;
    var myArray=null;

    console.log('index='+index + ' indexlen= '+index.length );  

    if(index === undefined){    
        console.log('getting id');
        //get id of textbox
        $id=$(this).attr('id'); 
        //get the row id
        $id=$id.toString();
        myArray = $id.split('_');   
        $id=myArray[1]; 
    }
    else
    {
        console.log('setting id=index');
        $id=index;      
    }

    var $listprice= $("#listprice_"+$id).val();

    //turn entered number into %
    $discountpercent= $("#discountpercent_"+$id).val()/100; 
    $discountlistprice=$listprice-($listprice*$discountpercent);    

    //turn margin to % (note margin is global)
    $marginpercent= $("#marginpercent_"+$id).val()/100;

    //apply margin % to DLP
    if($discountlistprice>0)
    {
        $margintotal=$discountlistprice+($discountlistprice*$marginpercent);
    }
    else
    {
        $margintotal=0;
    }

    //set rrp
    $rrp=$margintotal;
    $("#rrp_"+$id).val($rrp);   

    //quantity
    $quantity=$("#quantity_"+$id).val();

    //calculate total   
    $total=$quantity*$rrp;

    //set the value
    $("#discountlistprice_"+$id).val($discountlistprice);

    //set the total by changing the total div
    $("#total_"+$id).html($total);  

}

Answer 1

Change your handler to an anonymous function:

$(document).ready(function(){   
    $(":input").change(function () {
       var index = getIndex(); // however you are getting this value
       calculateTotal(index);
    });
});