首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ASP.NET表单从javascript强制重新加载与JQuery自动完成文本框填充冲突?

ASP.NET表单从javascript强制重新加载与JQuery自动完成文本框填充冲突?
EN

Stack Overflow用户
提问于 2020-12-23 13:44:55
回答 1查看 67关注 0票数 0

我定义了一个ASP.NET表单,其中包含以下表单元素:TextBoxHiddenFieldDropDownList,定义如下:

代码语言:javascript
运行
复制
<asp:TextBox ID="_txtData" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="_hdnData" runat="server" ClientIDMode="Static" Value="" />
<asp:DropDownList ID="_ddlData" runat="server" DataSourceID="_sdsData" DataTextField="data" DataValueField="id" AppendDataBoundItems="true" AutoPostBack="true" >
    <asp:ListItem Text="TUTTI" Value="" Selected="True" />
</asp:DropDownList>

_ddlData来自以这种方式定义的数据源:

代码语言:javascript
运行
复制
<asp:SqlDataSource
    ID="_sdsData" 
    runat="server"
    ConnectionString="<%$ ConnectionStrings:db %>"
    ProviderName="<%$ ConnectionStrings:db.ProviderName %>"
    SelectCommand="
        SELECT 
            id, 
            data
        FROM 
            table_data
        WHERE 
            (@id IS NULL) OR (id = @id)
        ORDER BY targa">
        <SelectParameters>
            <asp:ControlParameter 
                ControlID="_hdnData" 
                PropertyName="Value" 
                Direction="Input" 
                ConvertEmptyStringToNull="true" 
                DbType="Int32" 
                DefaultValue="" 
                Name="id" />
        </SelectParameters>
</asp:SqlDataSource> 

_hdnData_txtData是通过这种方式在javascript/JQuery中得到的:

原码

代码语言:javascript
运行
复制
var _hdnData = null;
var _txtData = null;

$(function () {
    _hdnData = $("input[id$='_hdnData']");
    _txtData = $("input[id$='_txtData']");

    GetData(_txtData , _hdnData );
});

function GetData(source_widget, dest_widget) {
    $.ajax({
        type: "POST",
        url: "/Service/WSDataService.asmx/GetData",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var datafromServer = data.d.split("<br />");

            source_widget.autocomplete({
                source: datafromServer,
                select: function (event, ui) {
                    var _data = ui.item.value;

                    var _tokens = _data.split("\t");


                    if (_tokens.length < 3)
                        return;

                    var _value = _tokens[_tokens.length - 1].replace(']', '').replace('[', '');

                    dest_widget.val(_value).closest("form").submit();
                }
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

@Tomalak提供的JQuery优化代码

代码语言:javascript
运行
复制
var _hdnData = null;
var _txtData = null;

$.postJSON = function (url, data, success) {
    return $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        success: success || null
    });
};

var raw_data = $.postJSON("/Service/WSDataService.asmx/GetData", {})
    .then(function (data) {
        return data.d.split("<br />");
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    });

$(function () {
    raw_data.done(function (items) {
        $("input[id$='_txtData']").autocomplete({
            source: items,
            select: function (event, ui) {
                var _data = ui.item, _value;

                // calculate _value ...
                $("input[id$='_hdnData ']")
                    .val(_value)
                    .closest("form").submit();
            }
        });
    });
});

当发生JQuery autocomplete的select事件时,表单被提交,一旦重新加载,我注意到两个主要问题:

  1. _txtData设置为用户在发生select事件时输入的部分值(即不是autocomplete菜单上的实际值selected/visibile )

在select事件之前出现的

  1. _ddlData值与它们的数据源.

中的新数据合并。

顺便说一句,我现在不想用更新或更新的范例来改变SQLDataSource或数据库组件(比如Microsoft )。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-25 09:21:39

您有时间问题,就像在your previous question中一样。

您将表单作为select事件的一部分。选定的值是在jQuery事件发生后由select UI写入表单字段的,但此代码从未运行。.closest("form").submit()立即重新加载页面。此时,“自动完成”字段仍然只包含用户键入的内容。

快速而肮脏的解决方案是在短时间延迟后发送表单,给其他事件一个完成的机会。

代码语言:javascript
运行
复制
// ... 
select: function (event, ui) {
    var _data = ui.item,
        _value,
        $form = $(this).closest("form");

    // calculate _value ...

    $("input[id$='_hdnData ']").val(_value);

    setTimeout(function () { $form.submit(); }, 50);
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65425305

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档