CODEWITHSUNDEEP
jqueryajaxselect
Lance
Lance

Reputation: 63

Selecting a "select option" after creating it with AJAX?

I have a page that has a series of "related" selects. Everything works fine UNLESS there is an option that is pre-selected. I can set the "pre-selection" to work if I put an "alert" in the code but without it, it doesn't work.

For Example:

function loader(){
    if ($("#prod_1").val() > 0){
        switchBatch(1);
        $('#batch_1').val('15');
        updateMax(1);
    }
    if ($("#prod_2").val() > 0){
        switchBatch(2);
        alert('yup');
        $('#batch_2').val('35');
        updateMax(2);
    }
}
$(function() {
    loader();
});

The second one that has the "alert('yup');" in it works but the first one doesn't.

The "switchBatch()" is a function that loads the options (from an ajax call) into the batch select control. Both instances load the options but only the second one selects the correct option.

Any suggestions?

Here is the whole thing:

<script>
    maxVals = [];
    function switchBatch(idNum){
        maxVals = [];
        $("#max_"+idNum).val('');
        $.ajax({
            type: "POST",
            url: "/cfc/product.cfc?method=pialJson",
            data: ({
                productID: $("#prod_"+idNum).val()
            }),
            dataType: "json",
            success: function(result){
                options = '';
                var colMap = new Object();
                for(var i = 0; i < result.COLUMNS.length; i++) {
                    colMap[result.COLUMNS[i]] = i;
                }
                for (var i = 0; i < result.DATA.length; i++){
                    options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>';
                    maxVals[i] = result.DATA[i][colMap["INSTOCK"]];
                }
                $("select#batch_"+idNum).html(options);
                updateMax(idNum);
            }
        });
    }
    function updateMax(idNum){
        thisOne = $("#batch_"+idNum).attr("selectedIndex");
        $("#max_"+idNum).val(maxVals[thisOne]);
        checkMax(idNum);
    }
    function checkMax(idNum){
        $("#qty_"+idNum).removeClass('red');
        if ($("#qty_"+idNum).val() > $("#max_"+idNum).val()){
            $("#qty_"+idNum).addClass('red');
        }
    }

    function loader(){
        if ($("#prod_1").val() > 0){
            switchBatch(1);
            alert('yup');
            $('#batch_1').val('<cfoutput>#batch_1#</cfoutput>');
            updateMax(1);
        }
        if ($("#prod_2").val() > 0){
            switchBatch(2);
            alert('yup');
            $('#batch_2').val('<cfoutput>#batch_2#</cfoutput>');
            updateMax(2);
        }
    }
    $(function() {
        loader();
    });
</script>

Upvotes: 0

Views: 3582

Answers (3)

user113716
user113716

Reputation: 322452

Have your switchBatch() function accept another argument, which is a function containing the code that you are trying to run after the AJAX request.

Then call that function in the success: callback for the AJAX request in switchBatch().

function loader(){
    if ($("#prod_1").val() > 0) {
        switchBatch(1, function() {
            $('#batch_1').val('15');
            updateMax(1); // right now this is being called in switchBatch() as well
        }
        );
    }
    if ($("#prod_2").val() > 0) {
        switchBatch(2, function() {
            $('#batch_2').val('35');
            updateMax(2);  // right now this is being called in switchBatch() as well
        }
        );
    }
}

  // function argument -------v
function switchBatch(idNum, func){
        maxVals = [];
        $("#max_"+idNum).val('');
        $.ajax({
            type: "POST",
            url: "/cfc/product.cfc?method=pialJson",
            data: ({
                productID: $("#prod_"+idNum).val()
            }),
            dataType: "json",
            success: function(result){
                options = '';
                var colMap = new Object();
                for(var i = 0; i < result.COLUMNS.length; i++) {
                    colMap[result.COLUMNS[i]] = i;
                }
                for (var i = 0; i < result.DATA.length; i++){
                    options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>';
                    maxVals[i] = result.DATA[i][colMap["INSTOCK"]];
                }
                $("select#batch_"+idNum).html(options);

                  // call the function that was passed in
                func.call(null);
                updateMax(idNum); // updateMax is being called in the function that is
                                  //   passed in. You probably don't need it in both places
            }
        });
    }

Upvotes: 0

William Niu
William Niu

Reputation: 15853

Without the code of updateMax(), it's hard to say what's exactly going on.

One approach you can try is, attach updateMax() to the onchange listener of the select control (i.e. $('#selectID').change(updateMax)), and instead of calling updateMax(), do $('#selectID').change().

Upvotes: 0

Stian
Stian

Reputation: 886

I think the pre-selects aren't working because the "switchBatch()" function uses ajax. The JavaScript code after the call to "switchBatch()" is executed before the ajax call is complete, so the select elements are empty. But it works in the second if-block because of the alert(), which gives the ajax call enough time to complete and populate the select element.

Upvotes: 1

Related Questions