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….
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