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...
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
End Sub
user4756
0 Points
1 Post
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
Yanping Wang...
All-Star
15181 Points
1552 Posts
Microsoft
Re: listbox select event not firing with jquery and updatepanel
Jan 10, 2013 06:11 AM|LINK
Hi user4756,
Thanks for your post.
I would like to suggest you append OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" AutoPostBack="true" on your ListBox1.
it works on my side,please let me how it works.
thanks.
Feedback to us
Develop and promote your apps in Windows Store
ManikandanUl...
Participant
850 Points
253 Posts
Re: listbox select event not firing with jquery and updatepanel
Jan 10, 2013 06:14 AM|LINK
set autopostback=true for your listbox and call the indexchanged event...
Click "…Mark As Answer" if my reply helpful....