Jquery and gridview inside in update panel issue
i have one update panel and inside a update panel i have one datagrid. with in datagrid template panel i have one label and datalist. i was trying generate a master detail sort of output. when user will select option from combo then i bind datagrid and datalist. i saw it is working fine. but with the help of jquery script i tried to hide div what has datalist inside. my script is not working after async postback. i saw the page source after async postback and found no update data but i got the right output.
i have couple of question
1) why changes is not showing after partial postback with the help of update panel. 2) why my jquery script is not working.
please tell me how could i hide my div after partial postback with jquery and also mention where i am making the mistake.
here i am giving my aspx code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BBADummyWebSite.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
.layer1
{
margin: 0;
padding: 0;
width: 500px;
}
.heading
{
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content
{
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function foo() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
alert("pp");
}
function endRequestHandler(sender, args) {
// Do your stuff
alert('Update Panel work is done');
VisibilityToggle();
}
/* Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
alert("pp");
VisibilityToggle();
开发者_如何学Python }*/
function VisibilityToggle() {
$(document).ready(function () {
var div = $(this).parent().find('div[id*=divProb]');
$('#heading').click(function () {
var div = $(this).parent().find('div[id*=divProb]');
if (div.css('display') == 'none')
div.show();
else if (div.css('display') == 'block')
div.hide();
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<font face="Arial" size="2">
<asp:Label ID="lblMake" runat="server" Text="Vehicle Make"></asp:Label>
<asp:DropDownList ID="cmbMake" runat="server"></asp:DropDownList>
<asp:Button ID="btnGo" runat="server" OnClick="btnGo_Click" Text="Go" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" border="0" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<!--<legend>UpdatePanel</legend>-->
<asp:DataGrid ID="dgCat" runat="server" Caption="Categories" CellPadding="4"
ForeColor="#333333" GridLines="Horizontal" AllowSorting="True"
ShowHeader="False" Width="276px"
OnItemDataBound="dgCat_ItemDataBound" Height="231px"
AutoGenerateColumns="False" BackColor="White">
<Columns>
<asp:TemplateColumn HeaderText="Category">
<ItemTemplate>
<table class="style1">
<tr>
<td>
<p class="heading"> <font face="Arial" size="2"> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl=""
Text='<%# DataBinder.Eval(Container, "DataItem.CatagoryName") %>'></asp:HyperLink></font></p>
</td>
</tr>
<tr>
<td>
<div id="divProb" class="content" >
<asp:DataList ID="lstProb" runat="server" BackColor="White" >
<ItemTemplate>
<table>
<tr>
<td><asp:HyperLink ID="hypProb" runat="server" Text='<%# Eval("Problem") %>' NavigateUrl="http://www.bba-reman.com"></asp:HyperLink>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<EditItemStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataGrid>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGo" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</font>
</form>
</body>
</html>
Try to remove Foo() funciton, let endRequest event handler to be directly inside tag. If this won't help, try to register VisibilityToggle() javascript from code-behind in OnPreRender page event, using ScriptManager.RegisterClientScriptBlock.
加载中,请稍侯......
精彩评论