ASP.NET form reload forced from javascript conflicts with JQuery autocomplete textbox fillup?

I defined an ASP.NET form where I have, among many others, the following form elements: a TextBox, an HiddenField and a DropDownList defined like this:

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

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

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

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

1. _txtData is set to the partial value entered by the user when the select event took place (i.e. not the actual value selected/visibile on the autocomplete menu)
2. _ddlData values present before select event are merged with new data coming from their datasource.

BTW I don’t want, at this time, change SQLDataSource or databound components with newer or updated paradigm (like Microsoft Entities Framework).

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You have a timing issue, like in your previous question.

You’re submiting the form as part of the select event. The selected value is written to the form field by jQuery UI after the select event, but this code never runs. The .closest("form").submit() reloads the page immediately. At this point, the autocomplete field still only contains what the user had typed.

The quick and dirty solution to this is to send the form after a short delay, to give the other events a chance to finish.

// ... 
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);
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0