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

Do you want a postback to happen? You are using asp.net button that perform postback and reload the page. Put an html item with client code only. — Amiram Korach
– Amiram Korach, Commented Jul 23, 2012 at 14:31
@AmiramKorach - I would like both the postback and js event to happen. — Roooss
– Roooss, Commented Jul 23, 2012 at 14:34
If this is the case, consider applying the js code after the postback with RegisterStartupStript msdn.microsoft.com/en-us/library/z9h4dk8y.aspx — Amiram Korach
– Amiram Korach, Commented Jul 23, 2012 at 14:36
@AmiramKorach - hey that worked a treat cant believe i didnt think of that sooner!! thanks if you make it a real answer i shall upvote this! — Roooss
– Roooss, Commented Jul 23, 2012 at 14:52

Amiram Korach · Accepted Answer · 2012-07-23 14:55:25Z

1

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

answered Jul 23, 2012 at 14:55

Amiram Korach

13.3k3 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaizen Programmer · Accepted Answer · 2012-07-23 15:01:38Z

0

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.

edited Jul 23, 2012 at 15:01

answered Jul 23, 2012 at 14:45

Kaizen Programmer

3,8181 gold badge16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Jquery Hide with asp.net postback

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related