locked
jQuery and UpdatePanel.Cannot save jQuery action result. RRS feed

  • Question

  • User1335250097 posted

    I know well there is huge number of articles and posts regarding this problem. Seemed I tried all of them but with no success.
    Ok, so what I'm trying to do is:

    1. Change GridView orders from jQuery by manipulating tr.
    2. Post new rows positions to webservice.
    3. Notify users by server side event about changes.

    Everything work fine till the moment when I press Button1 - all changes revert back, but when page reloaded, I see that all changes saved. GridView and Button are web controls existing on UserControl. Here is UserControl markup.

    %@ Control Language="C#" AutoEventWireup="true" CodeBehind="TaskGrid.ascx.cs" Inherits="CDSOnline.controls.TaskGrid" %>
    <h1 runat="server" id="h1Header"></h1>
    <asp:UpdatePanel runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <section>
                <asp:DropDownList ID="ddlEmployees" runat="server" DataTextField="EmpName" DataValueField="EmpId" OnSelectedIndexChanged="ddlEmployees_SelectedIndexChanged" AutoPostBack="True" AppendDataBoundItems="True">
                    <asp:ListItem>Please Select Tester</asp:ListItem>
                </asp:DropDownList>
                <asp:Button ID="Button1" runat="server" Text="Notify Tester" OnClick="Button1_Click" />
            </section>
            <asp:GridView ID="gridItems" runat="server" AutoGenerateColumns="False" CssClass="style1" PagerStyle-CssClass="gridpagerstyle" Style='width: auto' DataKeyNames="EntityId">
                <Columns>
                    <asp:TemplateField HeaderStyle-HorizontalAlign="Left" ItemStyle-CssClass="entitydata">
                        <ItemTemplate>
                            <asp:Literal ID="lit1" runat="server" Text='<%# Bind("EntityType") %>'></asp:Literal>
                            <asp:Literal ID="lit2" runat="server" Text='<%# Bind("EntityId") %>'></asp:Literal>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Title" HeaderStyle-Width="25%">
                        <ItemTemplate>
                            <asp:HyperLink ID="Hyperlink1" runat="server" CssClass="SimpleHyperLink" NavigateUrl='<%# GetUrl(Convert.ToString(Eval("EntityType")), Convert.ToString(Eval("EntityId"))) %>' Text='<%# Eval("EnityTitle") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Project" SortExpression="ProjectId" HeaderStyle-Width="25%">
                        <ItemTemplate>
                            <asp:HyperLink ID="hlProj" runat="server" NavigateUrl='<%# GetUrlProject(Convert.ToInt32(Eval("EntityId"))) %>' Text='<%# Eval("ProjectName") %>' ToolTip='<%# Eval("ProjectName") %>' />
                            <asp:Label runat="server" ID="lblProj" Text='<%# Eval("ProjectName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Priority" HeaderText="Priority" />
                    <asp:BoundField DataField="Responsible" HeaderText="Responsible" HeaderStyle-Width="20%" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Image ID="ImageButton1" runat="server" ToolTip="move up" ImageUrl="~/images/moveitem_up.ico" CssClass="up" />
                            <asp:Image ID="ImageButton2" runat="server" ToolTip="move down" ImageUrl="~/images/moveitem_down.ico" CssClass="down" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Image ID="ImageButton3" runat="server" ToolTip="move to top" ImageUrl="~/images/moveitem_top.ico" CssClass="top" />
                            <asp:Image ID="ImageButton4" runat="server" ToolTip="move to bottom" ImageUrl="~/images/moveitem_bottom.ico" CssClass="bottom" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <EmptyDataTemplate>
                    No records found
                </EmptyDataTemplate>
            </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlEmployees" EventName="SelectedIndexChanged" />
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

    And here is WebForm:

     <script type="text/javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MoveRows);
            function MoveRows() {
                $(".up,.down,.top,.bottom").on('click', function () {
                    var ri = $(this).closest('tr').prevAll().length; // 
                    var row = $(this).parents("tr:first");
                    if ($(this).is(".up")) {
                        if (ri > 1) {
                            row.insertBefore(row.prev());
                        } else {
                            return false;
                        }
                    } else if ($(this).is(".down")) {
                        row.insertAfter(row.next());
                    } else if ($(this).is(".top")) {
                        row.insertAfter($("#ctl00_MainArea_TaskOrder2_gridItems tr:first"));
                    } else {
                        row.insertAfter($("#ctl00_MainArea_TaskOrder2_gridItems tr:last"));
                    }
                    //Все ряды кроме первого
                    var rows = $("#ctl00_MainArea_TaskOrder2_gridItems tr:gt(0)");
                    //Сохраняем позици каждого ряда
                    rows.each(function () {
                        var entid = $(this).find("td.entitydata").text().match(/\d+/);
                        var rowindex = $(this).index() === 0 ? $(this).index() : $(this).index() - 1;
                        var json = '{"entid": ' + entid + ', "rowindex": ' + rowindex + '}';
                        $.ajax({
                            type: "POST",
                            contentType: "application/json",
                            url: "Positions.asmx/UpdatePositions",
                            data: json,
                            success: {},
                            failure: function () {
                                alert("Failed to move rows.");
                            }
                        });
                    });
                });
            }
            //$(document).ready(MoveRows);
        </script>
        <tg:TaskGrid ID="TaskOrder2" runat="server"></tg:TaskGrid>

    Saturday, April 4, 2015 6:48 AM

Answers

  • User1711366110 posted


    what I'm trying to do is:

    1. Change GridView orders from jQuery by manipulating tr.
    2. Post new rows positions to webservice.
    3. Notify users by server side event about changes.

    Everything work fine till the moment when I press 


      As per your case, you can try like below jQuery :

    <script type="text/javascript">
         $(document).ready(function () { 
    		Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%=this.ClientID%>_ctlEndRequestHandler); 
    		function <%=this.ClientID%>_ctlEndRequestHandler(sender, args){
                $(".up,.down,.top,.bottom").on('click', function () {
                    var ri = $(this).closest('tr').prevAll().length; // 
                    var row = $(this).parents("tr:first");
                    if ($(this).is(".up")) {
                        if (ri > 1) {
                            row.insertBefore(row.prev());
                        } else {
                            return false;
                        }
                    } else if ($(this).is(".down")) {
                        row.insertAfter(row.next());
                    } else if ($(this).is(".top")) {
                        row.insertAfter($("#ctl00_MainArea_TaskOrder2_gridItems tr:first"));
                    } else {
                        row.insertAfter($("#ctl00_MainArea_TaskOrder2_gridItems tr:last"));
                    }
                    //Все ряды кроме первого
                    var rows = $("#ctl00_MainArea_TaskOrder2_gridItems tr:gt(0)");
                    //Сохраняем позици каждого ряда
                    rows.each(function () {
                        var entid = $(this).find("td.entitydata").text().match(/\d+/);
                        var rowindex = $(this).index() === 0 ? $(this).index() : $(this).index() - 1;
                        var json = '{"entid": ' + entid + ', "rowindex": ' + rowindex + '}';
                        $.ajax({
                            type: "POST",
                            contentType: "application/json",
                            url: "Positions.asmx/UpdatePositions",
                            data: json,
                            success: {},
                            failure: function () {
                                alert("Failed to move rows.");
                            }
                        });
                    });
                });
            }
            });
    </script>
    

    --
    with regards,
    Edwin

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 7, 2015 5:26 AM