weird issue. Found a few answers pertaining to modal boxes, but not specific to my question, so I figured I'd ask here. Also, those issues were happening when the datapager was contained withing the listview, which is weird, but my DataPager control is not within the listview it's paginating...so idk...
I have a filter menu with checkboxes to filter specific categories that opens and closes with slideToggle(), and on page refresh or initial load, it works without fail, but if you paginate with the results below it, the open/close filter button does not work. Here is the ASP:Panel that contains the listview and the datapager:
<asp:Panel ID="PanelMyRecipes" CssClass="wrap" runat="server">
<asp:LinqDataSource ID="ldsRecipes" runat="server" OnSelecting="ldsRecipes_Selecting">
</asp:LinqDataSource>
<asp:ListView ID="lvMyRecipes" runat="server" DataSourceID="ldsRecipes" >
<EmptyDataTemplate>
<p class="empty">There are currently no recipes that meet your search criteria.</p>
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr>
<th class="first header-column-1">
<ep:ColumnHeader ID="chBrand" runat="server" Text="Brand" Type="SORTABLE" CommandArgument="BrandName" />
</th>
<th class="header-column-2">
<ep:ColumnHeader ID="chRecipeName" runat="server" Text="Recipe Name" Type="SORTABLE" CommandArgument="RecipeName" />
</th>
<th class="header-column-3">
<ep:ColumnHeader ID="chStatus" runat="server" Text="Status" Type="SORTABLE" CommandArgument="CurrentStatusName" />
</th>
<th class="header-column-4">
<ep:ColumnHeader ID="chActions" runat="server" Text="Actions" />
</th>
<th class="header-column-5">
<ep:ColumnHeader ID="chTasks" runat="server" Text="Tasks" />
</th>
<th class="header-column-6">
<ep:ColumnHeader ID="chVersion" runat="server" Text="Version" Type="SORTABLE" CommandArgument="Version" />
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<asp:PlaceHolder runat="server" ID="phRow">
<tr <%# (Container.DataItemIndex % 2 != 0) ? "class=\"alt\"" : "" %>>
<td class="column-1">
<%# Eval("BrandName") %>
</td>
<td class="column-2">
<a href='<%# Eval("RecipeLink") %>'><%# Eval("RecipeName") %></a>
</td>
<td class="column-3">
<ep:RecipeStatusMenu ID="rsmStatus" runat="server" Text='<%# Eval("CurrentStatusName") %>' ThisRecipeId='<%# Eval("RecipeID") %>' />
</td>
<td class="column-4">
<asp:Label ID="lRecipeActionsTarget" runat="server" Text="Choose" SkinID="DropDownExtender" />
<asp:Panel ID="pRecipeActionsDropDown" runat="server" SkinID="DropDownExtender">
<ep:RecipeActions ID="cRecipeActions" runat="server" RecipeLink='<%# Eval("RecipeLink") %>' ThisRecipeId='<%# Eval("RecipeID") %>'></ep:RecipeActions>
</asp:Panel>
<asp:DropDownExtender ID="ddeRecipeActions" runat="server" TargetControlID="lRecipeActionsTarget"
DropDownControlID="pRecipeActionsDropDown" />
</td>
<td class="column-5">
<asp:LinkButton ID="lbRecipeTasks" runat="server" CssClass="tasks-button" Text="Tasks" CommandArgument='<%# Eval("RecipeID") %>' OnClick="lbRecipeTasks_Click" />
</td>
<td class="column-6">
<%# Eval("Version") %>
<asp:Panel ID="pConsumerOperator" runat="server" SkinID="ModalConsumerOperatorResearch">
<h3><asp:Label ID="Label3" runat="server" Text="Consumer/Operator Research" /><asp:HyperLink ID="hlClose" runat="server" SkinID="ModalCloseButton" /></h3>
<div class="research-content-wrap">
<asp:TabContainer ID="tcConsumerOperator" runat="server">
<asp:TabPanel ID="tpComments" runat="server" HeaderText="Comments">
<HeaderTemplate>
<asp:Label ID="Label9" runat="server" Text="Comments" />
</HeaderTemplate>
<ContentTemplate>
<ep:SectionHeader ID="SectionHeader1" runat="server" SectionTitle="Enter Your General Comments" />
<table class="form">
<tr>
<td>
<asp:TextBox ID="tbComments" runat="server" TextMode="MultiLine" Width="700" Height="150" />
</td>
</tr>
</table>
<div class="button-container">
<ep:ActionButton ID="abSubmitComments" runat="server" Text="Submit" Type="ARROW" CommandArgument='<%# Eval("RecipeID") %>' OnClick="abSubmitComments_Click" />
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpDocuments" runat="server" HeaderText="Documents">
<HeaderTemplate>
<asp:Label ID="Label1" runat="server" SkinID="TabSeparator"><asp:Label ID="Label2" runat="server" Text="Documents" /></asp:Label>
</HeaderTemplate>
<ContentTemplate>
<ep:SectionHeader ID="SectionHeader2" runat="server" SectionTitle="Documents" />
<table class="form">
<tr>
<td>
<asp:FileUpload ID="fuConsumerOpDocument" runat="server" />
<ep:ActionButton ID="abUpload" runat="server" Text="Upload" Type="ADD" CommandArgument='<%# Eval("RecipeID") %>' OnClick="abUpload_Click" />
</td>
</tr>
</table>
<asp:LinqDataSource ID="ldsDocuments" runat="server" ContextTypeName="EpicPepper.Data.DataContext" TableName="RecipeDocuments"
Where="DocumentTypeID == 4 && RecipeID == @RecipeID && DisplayName != String.Empty">
<WhereParameters><asp:ControlParameter ControlID="abUpload" PropertyName="CommandArgument" Name="RecipeID" DbType="Int32" /></WhereParameters>
</asp:LinqDataSource>
<asp:ListView ID="lvDocuments" runat="server">
<LayoutTemplate>
<table class="listings">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr <%# (Container.DataItemIndex == 0) ? "class=\"first\"" : "" %>>
<td>
<asp:HyperLink ID="hlDocument" runat="server" Text='<%# Eval("DisplayName") %>' NavigateUrl='<%# EpicPepper.ContentHandler.Content.GetDocumentUrl((Guid)Eval("Guid")) %>' Target="_blank" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="mpeConsumerOperator" runat="server"
TargetControlID="btnHidden"
PopupControlID="pConsumerOperator"
CancelControlID="hlClose" />
<asp:Button runat="server" ID="btnHidden" style="display:none" />
</td>
</tr>
</asp:PlaceHolder>
</ItemTemplate>
</asp:ListView>
<div class="pager">
<asp:DataPager ID="dpRecipes" runat="server" PageSize="10" PagedControlID="lvMyRecipes" Visible="false">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" ShowNextPageButton="false" ButtonCssClass="button previous first" FirstPageText="First" />
<asp:NextPreviousPagerField ButtonType="Link" ButtonCssClass="button previous" PreviousPageText="Previous" ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" ButtonCount="3" />
<asp:NextPreviousPagerField ButtonType="Link" ButtonCssClass="button next" NextPageText="Next" ShowPreviousPageButton="false" />
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true" ShowPreviousPageButton="false" ShowNextPageButton="false" ButtonCssClass="button next last" LastPageText="Last" />
</Fields>
</asp:DataPager>
</div>
<div class="spacer"></div>
</asp:Panel>
then the javascript that is broken on pagination is in a main.js file and looks like so:
$(function () {
$(".filter-icon").click(function () {
$(".status-panel").slideToggle();
});
$(".filter-text").click(function () {
$(".status-panel").slideToggle();
});
$("ul.toolsMenu li:nth-child(2n + 0)").addClass("lighterDarkGrey");
$("#dashboard #main table tr:even td:nth-child(1n)").addClass("alt-column-1");
$("#dashboard #main table tr:even td:nth-child(2n)").addClass("alt-column-2");
$("#dashboard #main table tr:even td:nth-child(3n)").addClass("alt-column-3");
$("#dashboard #main table tr:even td:nth-child(4n)").addClass("alt-column-4");
$("#dashboard #main table tr:even td:nth-child(5n)").addClass("alt-column-5");
$("#dashboard #main table tr:even td:nth-child(6n)").addClass("alt-column-6");
});
FIXED!
For reference, the answer I used was here: Jquery code doesn't work after paging?
In my case the following worked:
This is the important part:
You can obviously change the function name and content, just make sure you pass the function to the add_endRequest() method.
Thanks all!