Hola a todos,
Alguien sabe que es lo que tengo que hacer para que me funcione un control de combo dentro de un updatepanel? si lo saco fuera del update panel me funciona correctamente, pero como lo intente meter dentro(que es donde tiene que estar) falla. He intentado meter un <asp:PostBackTrigger> pero tampoco me funciona.
os adjunto el codigo que tengo.
Gracias
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script>
(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", "")
.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 already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term) , "i");
response(this.element.children("option").map(funct ion () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function (event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a 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 a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + "")
.tooltip("open");
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function () {
$("#combobox").combobox();
$("#toggle").click(function () {
$("#combobox").toggle();
});
$("#ddlPerfil").combobox();
$("#toggle").click(function () {
$("#ddlPerfil").toggle();
});
});
</script>
</asp:Content>
<asp:UpdatePanel ID="upUsuariosSAU" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<select id="combobox">
<option value=""></option>
<option value="0"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:Resource,lblPerfilAdministrador %>"></asp:Literal> </option>
<option value="1"><asp:Literal ID="Literal2" runat="server" Text="<%$Resources:Resource,lblPerfilEscritura%>"> </asp:Literal> </option>
<option value="2"><asp:Literal ID="Literal3" runat="server" Text="<%$Resources:Resource,lblPerfilLectura%>"></asp:Literal> </option>
</select>
</ContentTemplate>
</asp:UpdatePanel>
