Javascript confirmation dialog - ASP.NET

Question

I saw a couple of similar questions on the same topic, but none of them addressed my issue.

I've got a asp.net website, and want to show a status message (asp:label that will disappear in 5 seconds) to the user after the database was updated.

i want to assign the text to the label, and then hide it with javascript.

i got the js part sorted out, the only problem is how do i call js function after i assigned the text to the control?

let's say i'm updating something in the database with following code:

<asp:Button ID="btnUploadFiles" runat="server" OnClick="buttonSubmit_Click" Text="Update"  />

code behind

protected void buttonSubmit_Click(object sender, EventArgs e)
    { try{// update the database  
          // change label text to tell the user update succeeded}
      catch(Exception ex){...}
    }

please help!

UPDATE: no jquery please, just plain javascript

Answer 1

Are you posting back via Ajax or a normal postback? If it's a normal postback, just register some javascript on the page that sets a timer and calls your function that hides the label after the timer expires. The following example uses jQuery to make sure the DOM is loaded before the timer is started, but there are other ways. It will hide the label after 5s has elapsed.

function hideLabel(label)
{
   $(label).hide();
}

$(document).ready( function() {
    var label = $('#labelID');
    setTimer(function() { hideLabel(label); ),5000);
});

The idea is basically the same if you are using AJAX, except you set the timer in the onSuccess callback for the AJAX call instead of on document load.

Answer 2

I'd personally use jQuery for this, but if you want to use plain old JavaScript then something like this will probably do the trick:

<script type="text/javascript">
function hideLabel()
{
    // replace yourLabelID with <%=YourLabelID.ClientID%> if it's a .NET Label control
    document.getElementById('yourLabelID').style.display = 'none';
}
setTimeout('hideLabel()', 5000);
</script>

If necessary you could also embed the script block in a Literal control and only make it visible when you update your label text.

Answer 3

To answer your question "How do i call js function after i assigned the text to the control?". You can just add a call to 'RegisterClientScriptBlock' inside of your button click event to output the JavaScript provided by Luke.

protected void buttonSubmit_Click(object sender, EventArgs e)
{ 
    try
    {
       // update the database  
       // change label text to tell the user update succeeded
       label.Text = "Message";
       string js = "function hideLabel(){document.getElementById('" + label.ClientID + "').style.display = 'none'};setTimeout(hideLabel, 5000);"
       ClientScript.RegisterClientScriptBlock(this.GetType(), "test", js ,true);
    }
    catch(Exception ex){...}
}