Question

jQuery noob here:

I have the following message div that shows a message on button click and fades after several seconds. This works fine. However, I would like the message div to hide on page load and display on button click.

So far, I’ve tried adding the hideDiv class to the message div, but then messageDiv doesn’t display at all (on load or on button click). I’ve also tried hiding/showing a parent wrapping Div (not shown here).

Suggestions?

<div id="messageDiv" runat="server" class="alert">Row Deleted</div>

.

<style type="text/css">
.alert{display:block;width:100%;color:#900000;font-size: 1.4em;}
.hideDiv{display:none;}
</style>

.

<script type="text/javascript">
$(document).ready(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert"); setTimeout(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).fadeOut("slow", function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).remove();
});
}, 4000);
});
</script>

.

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 

protected void Button1_Click(object sender, EventArgs e)
{messageDiv.InnerText = "Row Action Completed";}

Answer 1

So I worked out my own solution. I’m sure there’s a more concise solution out there (and I’d be glad to hear it), but I ended up with the following parts:

Solution:

• The message div must be hidden (display:none) on page load.
• I set a page level server-side var to false, to indicate the message should not be shown yet (per solution here)
• Set that var to true in server-side button click event
• Check for var = true in jQuery before calling the code to show/fade the Div
• Remove the existing hidden class from the messageDiv before adding the alert class and fade effects.

So all the working parts:

Server-side script:

<script type="text/C#" runat="server">
    Boolean UserHasClicked = false;
    protected void Button1_Click(object sender, EventArgs e)
    {
        UserHasClicked = true;
        messageDiv.InnerText = "Row deleted successfully.";
    }
</script>

.

Client-side script:

<script type="text/javascript">
var userHasClicked = '<%= this.UserHasClicked %>' == 'True'
$(document).ready(function () {
if (userHasClicked) {
$(document.getElementById('<%= messageDiv.ClientID %>')).removeClass("hideDiv");
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert");
$(document.getElementById('<%= messageDiv.ClientID %>')).delay(4000).fadeOut("slow");      
}
});
</script>

This was an interesting exercise, but I’m sure that there’s a more polished control or solution for showing/fading messages in .net out there somewhere.