收集的选择多选下拉列表不一致地填充了设定值

时间:2019-05-20 20:06:33

标签: ajax vb.net jquery-chosen harvest

我有一个ASP.net网络表单,其中填充了来自MS SQL DB的数据,并允许您编辑值。

该Web应用程序使用“ Harvest Chosen”多选下拉列表(max = 1)选择从同一信息列表中选择的两个不同的人,但是在两个单独的控件上。

刷新页面时,有时两个控件都填充有正确的值,有时一个或两个都没有。我在控制台中进行了测试,它肯定是从数据库中提取了正确的信息,但是我肯定缺少与如何执行这些过程有关的内容。过去,我已经使用VB.NET和ASP控制器完成了这项工作。这是我第一次使用AJAX和网络方法功能。我相信我在某处缺少更新,或者不了解执行代码的顺序。

我尝试在.aspx页中明确说明操作顺序,然后直到执行完控制器的所有代码后才执行更新触发器,但这似乎破坏了两个控制器(两个最终看起来像正常选择控制器)。抱歉,如果我的术语不正确,我会很自学。我收到不一致的应用程序的代码的当前状态

.aspx页面就是这样。每个控件都有一组不同的参数,这些参数会影响控件的填充方式以及更改后会发生的情况。

<select class="chosen-select" multiple data-placeholder="Assign a scientist" name="ChosenScientist" style="width:800px;" id="cmbChosenScientist">
    <script type="text/javascript">
        handleChosenControls("select#cmbChosenScientist.chosen-select");
    </script>
</select>
<select class="chosen-select" multiple data-placeholder="Assign a supervisor" name="ChosenSupervisor" style="width:800px;" id="cmbChosenSupervisor">
    <script type="text/javascript">
        handleChosenControls("select#cmbChosenSupervisor.chosen-select");
    </script>
</select>

aspx页面将控制器名称传递给一个函数,该函数首先定义控制器使用的所有参数。

function defineChosenControls(controller) {
    switch (controller) {
        case "select#cmbChosenScientist.chosen-select":
            currentData = JSON.stringify({ sqlQueryName: "studyScientist" + "/" + MainContent_txbStudy.value });
            populateData = JSON.stringify({ sqlQueryName: "userList" });
            changeData = JSON.stringify({ strControlName: controller, arrValues: JSON.stringify($(controller).val()), strArg1: MainContent_txbStudy.value });
            break;
        case "select#cmbChosenSupervisor.chosen-select":
            currentData = JSON.stringify({ sqlQueryName: "studySupervisor" + "/" + MainContent_txbStudy.value });
            populateData = JSON.stringify({ sqlQueryName: "userList" });
            changeData = JSON.stringify({ strControlName: controller, arrValues: JSON.stringify($(controller).val()), strArg1: MainContent_txbStudy.value });
            break;
    }
}

用于处理选项,设置当前值和处理更改的函数如下:

function handleChosenControls(controller) {
    //Purpose: Any time a Chosen control is loaded, changed, etc., this is run.
    defineChosenControls(controller);
    $(controller).chosen({ max_selected_options: 1 });

    //Script for populating the control
    $.ajax({
        type: "POST",
        url: "ClientToServer.aspx/GetDT",
        data: populateData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            for (line of JSON.parse(response.d)) {
                $(controller).append('<option value="' + line[Object.keys(line)[0]] + '">' + line[Object.keys(line)[0]] + '</option>');
            }
            $(controller).trigger("chosen:updated");
        },
        error: function (response) { console.log("ERROR: Unable to pass changed values from controller " + controller + " to server-side."); }
    });

    //Script for determining current value during load
    $.ajax({
        type: "POST",
        url: "ClientToServer.aspx/GetDT",
        data: currentData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            for (line of JSON.parse(response.d)) {
                $(controller).val(line[Object.keys(line)[0]]).trigger("liszt:updated");
                console.log(line[Object.keys(line)[0]]);
            }
            $(controller).trigger("chosen:updated");
        },
        error: function (response) { console.log("ERROR: Unable to retrieve current value of " + controller + " from server-side."); }
    });

    //Script for when a value in the control is changed
    $(controller).on('change', function (e) {
        defineChosenControls(controller);
        $.ajax({
            type: "POST",
            url: "ClientToServer.aspx/PassJqueryControlValue",
            data: changeData,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
            },
            error: function (response) { console.log("ERROR: Unable to pass changed values from controller " + controller + " to server-side."); }
        });
    });
}

我希望这两个控件在数据库中都具有正确的值,并且这些值已在浏览器控制台中正确写入,但是所选的收获控件不一致。

1 个答案:

答案 0 :(得分:0)

解决方案是在加载后调用代码。

<script type="text/javascript">
$(window).bind("load", function() {
    handleChosenControls("select#cmbChosenScientist.chosen-select");
    handleChosenControls("select#cmbChosenSupervisor.chosen-select");
});