Asp.net MVC WebGrid in partial view not updating via Ajax
I have 2 WebGrids each in a different partial view displayed in the view page. Everything works fine, but when I sort or paginate on the WebGrid it doesn't update via ajax. What am I doing wrong?
PartialView1
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%
var grid1var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid1", canSort: true, ajaxUpdateContainerId: "Div1", canPage: true, rowsPerPage: 5);%>
<div id="Div1">
<%=grid1var.GetHtml(htmlAttributes: new { id = "grid1" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
columns: grid1var.Columns(
grid1var.Column(columnName: "Id", header: "ID", canSort: true),
grid1var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
grid1var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
</div>
PartialView2
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%
var grid2var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid2", canSort: true, ajaxUpdateContainerId: "Div2", canPage: true, rowsPerPage: 5);%>
<div id="Div2">
<%=grid2var.GetHtml(htmlAttributes: new { id = "grid2" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
columns: grid2var.Columns(
grid2var.Column(columnName: "Id", header: "ID", canSort: true),
grid2var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
grid2var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
</div>
MainPage:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>" %>
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Content/Styles/Dashboard.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
<%using (Html.BeginForm("Action", "Dashboard", FormMethod.Post)){ %>
<div id="MainDashboardDiv">
<div class="LiveTile">
<div id="PriorityDiv1">
<%Html.RenderAction("RecentRequests", Model); %>
</div> <!--End of PriorityDiv1 -->
<div id="PriorityDiv2">
<%Html.RenderAction("PriorityRequests", Model); %>
</div> <!--End of PriorityDiv2 -->
</div> <!--End of LiveTile -->
</div><!--End of MainDashboardDiv -->
<%} %>
</asp:Content>
Content of the main HEAD page:
<head id="head" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.9.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
<asp:ContentPlaceholder ID="HeadContent" runat="server">
</asp:ContentPlaceholder>
<link href="../../Content/menu.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/menu.js" type="text/javascript"></script>
</head>
Also when I check the console via firebug I saw an error while sorting and paginating: Error:
TypeError: $ (...). parent (...). delegate is not a function
by code:
$ (containerId) .parent (). delegate (containerId + 'a [data-swhglnk = "true"]', 'click', function ()
The above code is generated dynamically by the WebGrid. I am not writing it.
source to share
If webgrid
it includes jQuery, and you reference jQuery as well, then jQuery is defined twice. This will explain your error:
$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()
Disable the link on your webpage and it should work. If you need to work with jQuery 1.9+, and webgrid
uses an older version of jQuery, then replace it with a newer one.
You might get some error if webgrid
not jQuery 1.9+ compatible, then leave a comment for more help.
ADVICE . Check finally the generated HTML to include multiple jQuery.
source to share
Ok, I know the problem, but I'm a newbie. So this will pick me up a bit. The problem is that your partial views are forcing the event listener to sort and propagate to stop listening. You will face the same problem if you try to use Jquery to set up multipage tables; when you switch pages your listeners will disconnect. This happens in jQuery and among other benefits; this is for security reasons, so don't change that. So there are two ways at this point. The first is to reconnect via a callback every time it needs to be attached, and the second is to drop the listening responsibility before the subclass.
I would post examples with an answer, but the bounty almost went up. So I want to get a chance on this, anyway, if you are interested let me know and I will get the code shortly.
source to share