Выбор «выбрать опцию» после создания его с помощью AJAX - PullRequest
Новая
       17

Выбор «выбрать опцию» после создания его с помощью AJAX

0 голосов
/ 20 августа 2010

У меня есть страница с рядом «связанных» выборок. Все работает нормально, если только не выбрана опция. Я могу настроить «предварительный выбор» на работу, если я добавлю «предупреждение» в код, но без него это не сработает.

Например: 

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();
});

Второй, у которого есть "alert ('yup');" в этом работает, но первый нет.

«switchBatch ()» - это функция, которая загружает опции (из вызова ajax) в элемент управления выбором партии. Оба экземпляра загружают параметры, но только второй выбирает правильный параметр.

Есть предложения?

Lance

Вот и все: 

<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>

Ответы [ 3 ]

1 голос
/ 20 августа 2010

Я думаю, что предварительный выбор не работает, потому что функция switchBatch () использует ajax. Код JavaScript после вызова метода switchBatch () выполняется до завершения вызова ajax, поэтому элементы выбора пусты. Но он работает во втором блоке if из-за alert (), который дает ajax-вызову достаточно времени для завершения и заполнения элемента select.

0 голосов
/ 20 августа 2010

Пусть ваша функция switchBatch() принимает другой аргумент, который представляет собой код, который вы пытаетесь запустить после AJAX-запроса.

Затем вызовите эту функцию в обратном вызове success: для запроса AJAX в 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
            }
        });
    }
0 голосов
/ 20 августа 2010

Без кода updateMax() трудно сказать, что именно происходит.

Один из подходов, который вы можете попробовать, - подключить updateMax() к onchange слушателю элемента управления select (т.е. $('#selectID').change(updateMax)) и вместо вызова updateMax() сделать $('#selectID').change().

...