2

I have a combo select and an AJAX call to load the data and populate it.

<select id="order_products"><option value="0">Loading data...</option></select>

var kmx = jQuery.noConflict();
function loadProducts() {
        var myProductSelect = kmx('#order_products');
        myProductSelect.empty();
        myProductSelect.append("<option value='0'>Loading data...</option>");
        kmx.ajax({
            type: "POST",
            url: baseurl,
            data: urlquery_ajax + "getOrderProductsInJsonFormatAjax&order_id=" + order_id + '&not_linked=1',
            success: function(data){
                        data = kmx.parseJSON(data);
                        populateCombo(myProductSelect, data, 'Select Product');
                     },
             failure: function(msg){
                        msg = kmx.trim(msg);
                        alert('Error: ' + msg.responseText);
                      }
        });
    }
    /**
    * Populate the combo
    */
    function populateCombo(myComboObj, myData, myText) {
        myComboObj.empty();
        myComboObj.append("<option value='0'>" + myText + "</option>");
        kmx.each(myData.rows, function(index,item) {
            myComboObj.append('<option value="' + item.id + '"' + '>' + item.number + '</option>');
        });
    }

Nothing special but there is a problem when I run the code: The page becomes white! I cannot even see the code source of the page!

But if I add the variable:

var myProductSelect = kmx('#order_products');

into the success method, before calling the function to populate, it works:

success: function(data){
data = kmx.parseJSON(data);
var myProductSelect = kmx('#order_products'); // <<<<<-----
populateCombo(myProductSelect, data, 'Select Product');
},

So, I would like to understand what is the problem? I read the post about the variable scopes, closure and asynchronous calls for AJAX, but I still don't understand my problem.

4

0 回答 0