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

The non-jquery solutions listed here could end up failing because the DOM isn't loaded when you go to hide the element. You're better off using a framework even if you don't know it yet. — tvanfosson
– tvanfosson, Commented Feb 8, 2009 at 5:43
If you don't want to use a framework or write the equivalent code, you should at least put the script at the bottom of the page (not in header) and so that it runs after the all of the HTML has been parsed. That would probably work reliably in this case, though not for all types of manipulation. — tvanfosson
– tvanfosson, Commented Feb 8, 2009 at 5:45

LukeH · Accepted Answer · 2009-02-07 23:10:38Z

3

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.

answered Feb 7, 2009 at 23:10

LukeH

271k59 gold badges373 silver badges411 bronze badges

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

2 Comments

Matthew Crumley Over a year ago

You don't need to pass 'hideLabel()' as a string. You can pass setTimeout a reference to the function instead: "setTimeout(hideLabel, 5000);". It doesn't make much difference in this case since it's a one-time call with a constant, but it's better to avoid executing strings.

LukeH Over a year ago

@Matthew, You're absolutely right. I was writing the example off the top of my head and wasn't sure whether the non-string version had any potential browser-compatibility issues, so I thought it better to be cautious.

Phaedrus · Accepted Answer · 2009-02-08 16:16:03Z

2

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){...}
}

edited Feb 8, 2009 at 16:16

answered Feb 8, 2009 at 3:07

Phaedrus

8,43128 silver badges28 bronze badges

1 Comment

tvanfosson Over a year ago

If you're going to register it in the codebehind you should at least use the clientid from the control instead of hard-coding it.

tvanfosson · Accepted Answer · 2009-02-07 22:58:33Z

0

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.

answered Feb 7, 2009 at 22:58

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

Javascript confirmation dialog - ASP.NET

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related