ASP.Net 2012 JQuery and Update Panel Not Working: One binded listbox and populating my results into another listbox using jquery

Question

My listboxes are within the UpdatePanel. I am using this code to transfer data from a binded listbox to an empty listbox to get my results. I am using a dropdown to populate my results for the binded listbox. What am I doing wrong here:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#lstright").bind("click", function lstRight() {
            var options = $("[id*=lstListTenants1] option:selected");
            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();
                $(options[i]).clone();
                $("[id*=lstListTenants2]").append(opt);
            }
        });

        $("#lstleft").bind("click", function lstLeft() {
            var options = $("[id*=lstListTenants2] option:selected");
            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();
                $(options[i]).remove();
                //$("[id*=lstEmailAddress]").append(opt);
            }
        });
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function (s, e) {
        $(function () {
            $("#lstright").bind("click", function lstRight() {
                var options = $("[id*=lstListTenants1] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).clone();
                    $("[id*=lstListTenants2]").append(opt);
                }
            });

            $("#lstleft").bind("click", function lstLeft() {
                var options = $("[id*=lstListTenants2] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).remove();
                    //$("[id*=lstEmailAddress]").append(opt);
                }
            });
        });
    });
</script>

How do I get jquery to work with my UpdatePanel so this will work properly?

Here is my aspx code:

            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <table>
        <tr>
            <td class="h4" colspan="2">
                <asp:Label ID="Label1" runat="server" Text="Name and Address of Property Where Incident Occurred:"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="lblPropName" runat="server" Text="Name:"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="ddlPropName" runat="server" OnSelectedIndexChanged="ddlPropName_SelectedIndexChanged" AutoPostBack="True" Height="30px"></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label2" runat="server" Text="BU Number:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtBUNum" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label3" runat="server" Text="Address1:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label4" runat="server" Text="Address2:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
            </td>
        </tr>
        </table>
    <table>
        <tr>
            <td class="h4">
                <asp:Label ID="lblListTenants" runat="server" Text="List of Affected Tenants:"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:ListBox ID="lstListTenants1" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
            </td>
            <td>
                <input id="lstLeft" type="button" value="<<" />
                <input id="lstRight" type="button" value=">>" />
                <%--<asp:Button ID="btnLeft" runat="server" Text="<<" OnClick="btnLeft_Click" />
                <asp:Button ID="btnRight" runat="server" Text=">>" OnClick="btnRight_Click" />--%>
            </td>
            <td>
                <asp:ListBox ID="lstListTenants2" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
            </td>
        </tr>
    </table>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlPropName" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>

Nothing happens. I try add my results to the other listbox with a simple button but nothing happens. Nothing is brought over to the other listbox. — sshackles, Dec 17 '13 at 16:01

Bharadwaj · Answer 1 · 2013-12-17T16:06:11.833

0

For updatepannels, since they do partial postback, the jquery looses it's bind after partial postback. In this case you need to rebind the jquery function after postback.

var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function (s, e) { // call your function here });

edited Dec 17 '13 at 16:06

answered Dec 17 '13 at 16:00

Bharadwaj

2,535
1
22
35

How do I rebind the jquery function after postback? I'm not sure how to do that. This is the issue that I am having. I just do not know how to do it. – sshackles Dec 17 '13 at 16:02
Still not sure where to put the var prm. Where do I put that code? I have tried just about everything and I think I may be just placing the code in the wrong place. Can you tell me with my code above where to put this code so it knows to rebind after postback? – sshackles Dec 17 '13 at 16:07
In the script block you have your main code. After your code add var prm and add your main code inside. – Bharadwaj Dec 17 '13 at 16:12
Can you show me with code? Sorry, I am just really new to this. – sshackles Dec 17 '13 at 16:13
– Bharadwaj Dec 17 '13 at 16:15
Are you using script manager? Add script manage. And try adding the script block after update panel – Bharadwaj Dec 17 '13 at 16:26
Refer http://stackoverflow.com/questions/4223837/run-javascript-function-after-postback – Bharadwaj Dec 17 '13 at 16:27
I am using AjaxToolkit Script Manager. – sshackles Dec 17 '13 at 16:29
Best way to debug javascript is to place alert after every line or use debugger; if using alert, faulty line will break the execution and the next alert Message won't appear. – Bharadwaj Dec 17 '13 at 16:31
Nothing seems to be working. The only thing I can do is use the button_Click events but then I am having issues getting the results to post. – sshackles Dec 17 '13 at 16:47

ASP.Net 2012 JQuery and Update Panel Not Working: One binded listbox and populating my results into another listbox using jquery

1 Answers1