Question

I am searching for a producuct using 4 select boxes, using jQuery I populate each box using an ajax call. This all works, however I would now like to use a predetermined search criteria (so it already knows which selected options to use) to populate.

e.g.
Product Source (Fresh, Frozen)
If Fresh is selected then a list depended on this option is populated in the next select box.
Product type(Fruit…)
Product (Apples…)
Colour(Red..)
Etc

Then a stock search is completed using the selected product, so in this case it would be Fresh fruit apples red which may give an id =5.

That works fine, but now I would like to pass Product Source,Product type,Product,Colour into the search and it would populate the select boxes and there other options.
The problem I have is I use on change events on the select boxes to trigger the ajax which fire before the next is loaded.

I hope this makes sense :S

     $("#form_model").change(function(){
    var val = $(this).val();
    if (val != '')
   populateStockItems($("#form_cat").val(),$("#form_sup").val(),val);                  
})

  function  populateStockItems(proid,suppid,modelid){
    var datain ={
    'ProdCode':proid,
    'SuppCode':suppid,
    'Range':modelid
};
getAjax('stockSearch',datain,function(data){

    if(data.result=="success"){             
        var catcbb = $("#form_item");
        catcbb.selectmenu('enable');
        catcbb.empty();
        catcbb.append($('<option></option>').attr("value", '').text(''));
        $.each(data[0].items, function () {
            catcbb.append($('<option></option>').attr("value", this.itemCode).text(this.itemDescription));
        });
        if (data[0].items.length ==1)
            catcbb.get(0).selectedIndex = 1
        catcbb.trigger("change");
    }
    else
    {

    }
})
 }

EDIT- It searches for a product fine, but I now need to prepopulate the filters using a known product, I have all the filter vals.
I think I will do one select at a time and ‘wait’ for the box to be populated through ajax.

Answer 1

This is what I did,
Set the default value of the select boxes to something random and never used e.g. hhg&hg43
If the value of that select box = hhg&hg43 then the ajax query had not completed.

var control =$('#form_cat');
    if(control.first().val()=='hhg&hg43')
        waitForStock(control)
    if(control.first().val()!='hhg&hg43')
    {
        control.val(ProductGroupCode);
        control.trigger("change");
        populateStockSuppliers(control.val());
    }
    else if (control.first().val()=='hhg&hg43'){
        alert('Error getting category');
    }

 function waitForStock(control){
for ( var i=0;i>20 ;i++) 
{
    if(control.val()!='hhg&hg43')
        return;
    window.setTimeout(waitForStock, 300);
} }