Listbox OnSelectedIndexChanged doesn't work

Question

I have a listbox inside my jquery dialog,

<div id="dialog">
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:ListBox ID="lbxTitle" runat="server" style="width:400px;height:100px;" OnSelectedIndexChanged="lbxTitle_SelectedIndexChanged">
    <asp:ListItem value="2" Text="abc" />
    <asp:ListItem value="3" Text="def" />
</asp:ListBox>
<br />
<fieldset>
    <asp:Label ID="lblContent" runat="server" style="height:200px;" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>

And in the behind code, I have this function

protected void lbxTitle_SelectedIndexChanged(object sender, EventArgs e)
{
   lblContent.Text = "test";
}

I dont put autopostback="true" because it will refresh the whole page, and close my dialog.

How to make it so that when user click item on the listbox, it will show "test" on the label inside dialog.

Now, it doesnt do anything if I change the selected item.

Answer 1

You should put the Autopostback then you can use AsyncPostBack to prevent whole page postback...

As per the following Code

<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:ListBox ID="lbxTitle" runat="server" style="width:400px;height:100px;" OnSelectedIndexChanged="lbxTitle_SelectedIndexChanged" AutoPostBack="true">
                <asp:ListItem value="2" Text="abc" />
                <asp:ListItem value="3" Text="def" />
            </asp:ListBox>
            <br />
            <fieldset><asp:Label ID="lblContent" runat="server" style="height:200px;" />
            </fieldset>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="lbxTitle" />
        </Triggers>
    </asp:UpdatePanel>

Answer 2

Add AutoPostback and after you create your dialog move it back to the form:

$("#dialog").parent().appendTo($("form:first"));

Try this:

<script type="text/javascript">

    $(function() {
        <% if (Page.IsPostback) { %>
            $('id of your listbox').change();
        <% } %>
    });

</script>