Answered by:
jQuery and UpdatePanel.Cannot save jQuery action result.

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:- Change GridView orders from jQuery by manipulating tr.
- Post new rows positions to webservice.
- 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:- Change GridView orders from jQuery by manipulating tr.
- Post new rows positions to webservice.
- 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