ASP.NET DropDownList AutoPostBack in UpdatePanel using JQuery ComboBox -
i have issue using asp.net dropdownlist inside of update panel autopostback set true. here drop down list:
<asp:dropdownlist runat="server" id="dropdownfacility" autopostback="true" onselectedindexchanged="facility_selectionchanged" /> in update panel, updatemode set conditional , have trigger:
<asp:asyncpostbacktrigger controlid="dropdownfacility" eventname="selectedindexchanged" /> issue when turn drop down list jquery combobox, autopostback functionality doesn't work. tested without applying jquery combobox functionality , autopostback did work. took script code link above , applied drop down:
(function ($) { $.widget("custom.combobox", { _create: function () { this.wrapper = $("<span>") .addclass("custom-combobox") .insertafter(this.element); this.element.hide(); this._createautocomplete(); this._createshowallbutton(); }, _createautocomplete: function () { var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; this.input = $("<input>") .appendto(this.wrapper) .val(value) .attr("title", "") .addclass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minlength: 0, source: $.proxy(this, "_source") }) .tooltip({ tooltipclass: "ui-state-highlight" }); this._on(this.input, { autocompleteselect: function (event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); }, autocompletechange: "_removeifinvalid" }); }, _createshowallbutton: function () { var input = this.input, wasopen = false; $("<a>") .attr("tabindex", -1) .attr("title", "show items") .tooltip() .appendto(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeclass("ui-corner-all") .addclass("custom-combobox-toggle ui-corner-right") .mousedown(function () { wasopen = input.autocomplete("widget").is(":visible"); }) .click(function () { input.focus(); // close if visible if (wasopen) { return; } // pass empty string value search for, displaying results input.autocomplete("search", ""); }); }, _source: function (request, response) { var matcher = new regexp($.ui.autocomplete.escaperegex(request.term), "i"); response(this.element.children("option").map(function () { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: }; })); }, _removeifinvalid: function (event, ui) { // selected item, nothing if (ui.item) { return; } // search match (case-insensitive) var value = this.input.val(), valuelowercase = value.tolowercase(), valid = false; this.element.children("option").each(function () { if ($(this).text().tolowercase() === valuelowercase) { this.selected = valid = true; return false; } }); // found match, nothing if (valid) { return; } // remove invalid value this.input .val("") .attr("title", value + " didn't match item") .tooltip("open"); this.element.val(""); this._delay(function () { this.input.tooltip("close").attr("title", ""); }, 2500); this.input.data("ui-autocomplete").term = ""; }, _destroy: function () { this.wrapper.remove(); this.element.show(); } }); })(jquery); does know how implement autopostback functionality jquery combobox code? thanks!!
this might late reply. may save time.
remove onselectedindexchanged drop down list
<asp:dropdownlist runat="server" id="dropdownfacility" /> you can call _dopostback event on dropdown list item changes,
__dopostback('<%= upnl.clientid %>', this.element.attr("id")); look above line in code implementation
(function ($) { $.widget("custom.combobox", { _create: function () { this.wrapper = $("<span>") .addclass("custom-combobox") .insertafter(this.element); this.element.hide(); this._createautocomplete(); this._createshowallbutton(); }, _createautocomplete: function () { var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; this.input = $("<input>") .appendto(this.wrapper) .val(value) .attr("title", "") .addclass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minlength: 0, source: $.proxy(this, "_source") }) .tooltip({ tooltipclass: "ui-state-highlight" }); this._on(this.input, { autocompleteselect: function (event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); __dopostback('<%= upnl.clientid %>', this.element.attr("id")); }, autocompletechange: "_removeifinvalid" }); }, _createshowallbutton: function () { var input = this.input, wasopen = false; $("<a>") .attr("tabindex", -1) //.attr("title", "show items") //.tooltip() .appendto(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeclass("ui-corner-all") .addclass("custom-combobox-toggle ui-corner-right") .mousedown(function () { wasopen = input.autocomplete("widget").is(":visible"); }) .click(function () { input.focus(); // close if visible if (wasopen) { return; } // pass empty string value search for, displaying results input.autocomplete("search", ""); }); }, _source: function (request, response) { var matcher = new regexp($.ui.autocomplete.escaperegex(request.term), "i"); response(this.element.children("option").map(function () { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: }; })); }, _removeifinvalid: function (event, ui) { // selected item, nothing if (ui.item) { return; } // search match (case-insensitive) var value = this.input.val(), valuelowercase = value.tolowercase(), valid = false; this.element.children("option").each(function () { if ($(this).text().tolowercase() === valuelowercase) { this.selected = valid = true; return false; } }); // found match, nothing if (valid) { return; } // remove invalid value if (value != '') { this.input .val("") .attr("title", value + " didn't match item") .tooltip("open"); this.element.val(""); this._delay(function () { this.input.tooltip("close").attr("title", ""); }, 2500); this.input.data("ui-autocomplete").term = ""; } else { this.input.val(""); this.element.val(""); this.input.data("ui-autocomplete").term = ""; } __dopostback('<%= upnl.clientid %>', this.element.attr("id")); }, _destroy: function () { this.wrapper.remove(); this.element.show(); } }); })(jquery);
Comments
Post a Comment