is this ajax/jquery acceptable?

[mbarandao]

I'm populating a chained linked dropdown box with the following code:

$(document).ready(function() {
  
    var data = <?php echo $arr;?>;
    var id;
    function getData(passCatID){
         var content = '';
        var content = '<option name="specify id="specify" style="background: url() right no-repeat; width: 20px">------SPECIFY-----</option>';
        var product_desc = '';
        var invt = '';
        var qty = '';
        var cost = '';
        id = passCatID;
        $.each(data[id], function(key,value) {          
            if(invt == '')invt = value['invt'];
            if(product_desc == '')product_desc = value['product_desc'];
            if(cost == '')cost = value['cost'];
             content += '<option value="' + key + '">' + value['subcat_label'] + '</option>';
           
        });
        $('#service_subcat').html(content);
        $('#descbox').html( product_desc );
        $('#invtbox').html(invt);
        $('#qtybox').html( qty);
        $('#costbox').html(cost);
    }
    function getDesc(passItemID){
        var itemID = passItemID;
        var invt = data[id][itemID]['invt'];
        $('#invtbox').html(invt);  
        
         var product_desc = data[id][itemID]['product_desc'];
        $('#descbox').html( product_desc ); 
        
        var qty = data[id][itemID]['qty'];
        $('#qtybox').html( qty );   
        
        var cost = data[id][itemID]['cost'];
        $('#costbox').html( cost );      
    }
    $('#categories').change(function(){
       id = $('#categories').val();
       getData(id);
    });
    $('#service_subcat').change(function(){
       var itemID = $('#service_subcat').val();
       getDesc(itemID);
    }); 
    
    
});

The above code works fine with the primary chained list boxs.

Subsquently, I have there is an option to add additional dropdown boxes; once the boxes are added, the mechanism to populate the chained list boxes effect is attempted with following code:

function populateBox()
{
    var data_1 = <?php echo $arr1;?>;
    var id;
    function getData_1(passCatID){
          var content = '';
        var content = '<option name="specify id="specify" style="background: url() right no-repeat; width: 20px">------SPECIFY-----</option>';
          var product_desc_ = '';
        var invt_ = '';
        var qty_ = '';
        var cost_ = '';
        id= passCatID;
        $.each(data_1[id], function(key,value) {          
            if(invt_ == '')invt_ = value['invt'];
            if(product_desc_ == '')product_desc_ = value['product_desc'];
            if(cost_ == '')cost_ = value['cost'];
             content += '<option value="' + key + '">' + value['subcat_label_1'] + '</option>';
           
        });
        $('#service_subcat_1').html(content);
        $('#descbox_').html( product_desc_ );
        $('#invtbox_').html(invt_);
        $('#qtybox_').html( qty_);
        $('#costbox_').html(cost_);
    }
    function getDesc_1(passItemID){
        var itemID = passItemID;
        var invt_ = data_1[id][itemID]['invt_'];
        $('#invtbox_').html(invt_);  
        
         var product_desc_ = data_1[id][itemID]['product_desc_'];
        $('#descbox_').html( product_desc_ ); 
        
        var qty_ = data_1[id][itemID]['qty_'];
        $('#qtybox_').html( qty_ );   
        
        var cost_ = data_1[id][itemID]['cost_'];
        $('#costbox_').html( cost_ );      
    }
}
  $(document).ready(function(){
  populateBox();
});
      $('#categories_1').change(function(){
       id = $('#categories_1').val();
       getData_1(id);
         //populateBox();

    });
    $('#service_subcat_1').change(function(){
       var itemID = $('#service_subcat_1').val();
       getDesc_1(itemID);
         populateBox();

    });

The latter does not work! Any additional dropdown box is not populated --which is dependent on the function populateBox();

Is this a correct way of achieving the intended outcome?

 

[BillyRayPreachersSon]

The latter does not work! Any additional dropdown box is not populated --which is dependent on the function populateBox();

Is this perhaps because you have commented out the call to "populateBox" in the change function?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[mbarandao]

Thanks Dan! the comment ted function was not my problem. It turned out the approach was wrong. Went another way.

Best