Jquery Hide with asp.net postback
Question
I have the following code.....
<head>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/hidepanel.js" type="text/javascript"></script>
</head>
<body>
<div id="outboundForm">
<p>
<asp:Button ID="btnSubmit" ClientIDMode="Inherit" runat="server" TabIndex="17" CssClass="btnSubmit"
OnClick="btnSubmit_Click" meta:resourcekey="btnSubmitResource1" />
<asp:Button ID="btnReset" runat="server" CssClass="btnReset" OnClick="btnReset_Click"
meta:resourcekey="btnResetResource1" />
</p>
</div>
<div id="MailPreviewDiv">
<asp:Label ID="lblPreview" runat="server" Visible="false" Text="" />
</div>
my hidepanel.js looks like this....
$(document).ready(function () {
d = new Date();
d = d.getTime();
if ($('#reloadValue').val().length == 0) {
$('#reloadValue').val(d);
$('#MailPreviewDiv').
} else {
$('#reloadValue').val('');
}
$('#MainContent_btnSubmit').click(function () {
$('#outboundForm').hide("slow");
$('#MailPreviewDiv').show("slow");
});
});
Now, by default i would like MailPreviewDiv to be hidden and ONLY when i click btn_submit do i want the MailPreviewDiv to be seen. this works fins with traditional HTML but as soon as i add this to .NET crazy things happen. When i click submit i can see the transition take place but then i am left with both div's still being displayed and the outboundForm div is still visible.
What i have observed is that the javascript even gets fired and then after my .net mouse click even is fired, after which i can see a transition and am left with both div's visible. Can anybody offer some advice please...
This may have something to do with a partial postback happening but i am not sure....
2 answers
solution1
1 ACCPTED 2012-07-23 14:55:25
You page is performing a postback so all html elements immediately loose the jquery effect. You need to register the js code in server side after the postback with RegisterStartupScript http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx
solution2
0 2012-07-23 14:45:24
Maybe try setting outboundForm to runat="server" and in the server-side setting it's visibility to false.
<div runat="server" id="outboundForm" >
Code-behind
outboundForm.Visible = false;
It seems that the JS is running fine, but that the server is reloading the hidden div on the postback.
Your JS has a syntax error $('#MailPreviewDiv'). <-- incomplete
But I assume that's because you were simplifying for posting here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.