listbox select event not firing with jquery and updatepanel : The Official Microsoft ASP.NET Forums

Reply

user4756

0 Points

listbox select event not firing with jquery and updatepanel

Jan 08, 2013 03:57 AM|LINK

I have a Listbox with some items stored
and from a textbox's key up event i select my choice

the problem i am facing is that
once i select my choice Listbox1_selectIndexchanged event (which sets my choice to another textbox ) not firing properly, it fires only when i hit some button or some page postback event something...

[i have used JQuery and updatepanel]

Here is my Code

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Main.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1"
title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="uppnl" runat="server">
<ContentTemplate>
<script type="text/javascript" >
var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});
</script>
<asp:Panel ID="Panel1" runat="server" Style="border-right: thin groove; border-top: thin groove; border-left: thin groove; border-bottom: thin groove; vertical-align: middle; width: 100%; text-align: center; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">

<br />

<asp:Label ID="Label1" runat="server" Text="Type"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="SelectedText"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

 <asp:ListBox ID="ListBox1" runat="server" Height="119px" Width="126px">
<asp:ListItem Text="Apple" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Peache" Value="3"></asp:ListItem>
<asp:ListItem Text="Banana" Value="4"></asp:ListItem>
<asp:ListItem Text="Melon" Value="5"></asp:ListItem>
<asp:ListItem Text="Lemon" Value="6"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>
<asp:ListItem Text="Pomegranate" Value="8"></asp:ListItem>
<asp:ListItem Text="Mulberry" Value="9"></asp:ListItem>
<asp:ListItem Text="Apricot" Value="10"></asp:ListItem>
<asp:ListItem Text="Cherry" Value="11"></asp:ListItem>
<asp:ListItem Text="Blackberry" Value="12"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" Text="Refresh" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");

$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
if (selectSingleMatch === true && $(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};

$(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});

</script>

</asp:Content>

and in my code behind i have

Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
End Sub