Make label message dissapear after a few seconds

Question

User-1767698477 posted

I just updated my database and I want the message to display and go away. Neither of these codes below is displaying the message after the executenonquery.

 cmdupdate.ExecuteNonQuery()
        GridView1.DataBind()
        lblresult.Text = " Details Updated Successfully"
        lblresult.Visible = True
        For i As Int16 = 1 To 5000

        Next
        lblresult.Visible = False

cmdupdate.ExecuteNonQuery()
        lblresult.Text = " Details Updated Successfully"
        lblresult.Visible = True
        For i As Int16 = 1 To 5000

        Next
        lblresult.Visible = False
        GridView1.DataBind()

I went to my old way of making this work which is to just redirect to the same page. Is there another way to make the message appear for 3 seconds and then dissappear without refreshing the page?

cmdupdate.ExecuteNonQuery ()
        lblresult.Text = " Details Updated Successfully"
        lblresult.Visible = True
        GridView1.DataBind()
        CType(Master.FindControl("metaRefresh"), HtmlMeta).Attributes.Add("content", 3 & ";url=Mortgage_application_7.aspx")

Answer 1

User409696431 posted

The reason the code you tried does not display the lable is that they both end with

  lblresult.Visible = False

The code behind executes on the server, then, when done executing, sends the new page information to the browser.  It does not talk to the browser in the middle of executing.  The last thing you told it was to make the label not visible, so the label is not visible.

There is no way to make the label appear then disappear in one page cycle using only code behind.  You need to involve JavaScript/JQuery

For a JavaScript alert (which the user would have to OK to dismiss), add, at the end of your successful updating event:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alertscript", "<script>alert('Successfully Inserted.....!');</script>");

Using JQuery, you can have a message display then fade out.  Put an html element with id="message" in your page where you want the notice to display.  Start with the element being empty.  Example:

 <b><em><span id="message"></span>&nbsp;</em></b>

Then, at the end of your successful  cmdupdate.ExecuteNonQuery() updating event, set a string called "message" to the value you want to display, then call the script:

Page.ClientScript.RegisterClientScriptBlock(this, this.GetType(), "script", "$('#message').html('" + message + "').show().fadeOut(2000);", true);

Answer 2

User-1767698477 posted

Hi Kathy,

I tried to implement your code. A couple of things. FIrst this has to be registered as an object. At least I get an error message.

I put it like this per one of the multiple suggestions provided.

Partial Class users_app_Mortgage_application_7
    Inherits System.Web.UI.Page

    Public Property this As Object

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then

No problem pasting the message into the aspx page.

I had put

  Dim uid As Integer = Convert.ToInt32(cmdinsert.ExecuteScalar())
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alertscript", "<script>alert('Successfully Inserted.....!');</script>")

System.NullReferenceException
  HResult=0x80004003
  Message=Object reference not set to an instance of an object.
  Source=App_Web_iv5qb51u

Answer 3

User475983607 posted

Simple jQuery solution.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="default.aspx.vb" Inherits="WebFormsVBDemo._default9" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="TempAlert">
        <asp:Label ID="Label1" runat="server" Text="My message to hide after clicking a submit button."></asp:Label>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>   
</asp:Content>

Public Class _default9
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Page.ClientScript.RegisterStartupScript(Me.GetType(),
            "alertscript",
            "<script>$('.TempAlert').hide(5000);</script>")
    End Sub
End Class

Answer 4

User-1767698477 posted

I tried this and while I didn't get an error, my message which I made visible did not dissappear.

             <center>
                        <div class="TempAlert">
                            <asp:Label ID="lblresult" runat="server" ForeColor="Green" />
                        </div>
                    </center>

    Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)
        Dim cn As New SqlConnection(ConfigurationManager.ConnectionStrings("sqlConnectionString").ConnectionString)
        Dim cmdupdate As New SqlCommand("update Liabilities SET [Type] = @Type, [Name] = @Name, [Street] = @Street, [Unitdesignator] = @Unitdesignator, [Unitnum] = @Unitnum, [City] = @City, [State] = @State, [Zip] = @Zip, [Acctnum] = @Acctnum, [Mopmt] = @Mopmt, [Mortgagetype] = @Mortgagetype, [Pmtincltax] = @Pmtincltax, [Pmtinclins] = @Pmtinclins, [Creditlimit] = @Creditlimit, [Molefttopay] = @Molefttopay, [Balance] = @Balance, [Paceloan] = @Paceloan, [Paidatclosing] = @Paidatclosing, [PaidPTC] = @PaidPTC, [Resub] = @Resub, [Omit] = @Omit WHERE LiabID=@LiabID", cn)
        cmdupdate.Parameters.AddWithValue("@Type", ddliabtype.SelectedValue)
        cmdupdate.Parameters.AddWithValue("@Name", txtliabname.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Street", txtliabstreet.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Unitdesignator", ddunitdesignator.SelectedValue)
        cmdupdate.Parameters.AddWithValue("@Unitnum", txtliabunitnum.Text)
        cmdupdate.Parameters.AddWithValue("@City", txtliabcity.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@State", txtliabstate.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Zip", txtliabzip.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Acctnum", txtliabaccountnum.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Mopmt", txtliabmopmt.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Mortgagetype", ddliabmtgtype.SelectedValue)
        cmdupdate.Parameters.AddWithValue("@Pmtincltax", cbliabtaxes.Checked)
        cmdupdate.Parameters.AddWithValue("@Pmtinclins", cbliabins.Checked)
        cmdupdate.Parameters.AddWithValue("@Creditlimit", txtliabcreditlimit.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Molefttopay", txtliabmoleft.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Balance", txtliabbal.Text.Trim)
        cmdupdate.Parameters.AddWithValue("@Paceloan", cbliabpaceloan.Checked)
        cmdupdate.Parameters.AddWithValue("@Paidatclosing", cbliabpoff.Checked)
        cmdupdate.Parameters.AddWithValue("@PaidPTC", cbliabpdbefore.Checked)
        cmdupdate.Parameters.AddWithValue("@Resub", cbliabresubord.Checked)
        cmdupdate.Parameters.AddWithValue("@Omit", cbliabomit.Checked)
        cmdupdate.Parameters.AddWithValue("@LiabID", HiddenField2.Value)
        cmdupdate.CommandType = System.Data.CommandType.Text
        cmdupdate.Connection = cn
        cn.Open()
        cmdupdate.ExecuteNonQuery()
        lblresult.Text = " Details Updated Successfully"
        lblresult.Visible = True
        GridView1.DataBind()
        Page.ClientScript.RegisterStartupScript(Me.GetType(),
            "alertscript", "<script>$('.TempAlert').hide(5000);</script>")
        'CType(Master.FindControl("metaRefresh"), HtmlMeta).Attributes.Add("content", 3 & ";url=Mortgage_application_7.aspx")
    End Sub

Answer 5

User475983607 posted

The code sample I shared above was tested.  I tested it again and it still works. 

Answer 6

User-1767698477 posted

Your message appeared for me but it didn't vanish.

Partial Class Default9
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Page.ClientScript.RegisterStartupScript(Me.GetType(),
            "alertscript",
            "<script>$('.TempAlert').hide(5000);</script>")
    End Sub
End Class

<%@ Page Title="" Language="VB" MasterPageFile="~/templates/Home.master" AutoEventWireup="false" CodeFile="Default9.aspx.vb" Inherits="Default9" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
     <div class="TempAlert">
        <asp:Label ID="Label1" runat="server" Text="My message to hide after clicking a submit button."></asp:Label>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>   
</asp:Content>

Answer 7

User475983607 posted

Your message appeared for me but it didn't vanish.

The message vanishes on my end.  I'm not sure what you are doing wrong.  Have you tried debugging?  Maybe you do no have a jQuery references and your code is throwing an error?

Answer 8

User-1767698477 posted

Ok, I placed <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

in my header and it works now. Except there is a problem. I load the page, and there is no message at this time displaying "message updated" or "record deleted" or "record added'. When I click my edit icon the popup appears and when I click the update button to save the record, the message appears and scrolls away after a few second just fine.

The second time I click on a different edit icon, immediately the message "message updated" is displayed at the same time the popup window appears for me to edit the record. Of course, I have not yet clicked the update button, but the message "record updated" is there regardless.

How do I fix this? Can it be fixed?

Dim uid As Integer = Convert.ToInt32(cmdinsert.ExecuteScalar())
        lblresult.Text = "Record Added Successfully"
        lblresult.Visible = True
        GridView1.DataBind()
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "alertscript", "<script>$('.TempAlert').hide(5000);</script>")

Answer 9

User-939850651 posted

Hi sking,

How do I fix this? Can it be fixed?

Each update button event is a postback, it will update the state of the Label control, you can reset it in Page_Load. like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        lblresult.Visible = False
        If Not Page.IsPostBack Then
            'some code of GridView databind ...
        End If
    End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
       lblresult.Visible = True
       Page.ClientScript.RegisterStartupScript(Me.GetType(),
            "alertscript",
            "<script>$('.TempAlert').hide(5000);</script>")
End Sub

Hope this can help.

Best regards,

Xudong Peng

       

Answer 10

User-1767698477 posted

Thanks XuDong,

I tried lblresult.visible in the page load but it didn't work. I was able to get it working but putting it into the two subs that initialize the popup. Now the message doesn't appear the instant the popup appears, but only after I click the add or insert button on the popup.

 Protected Sub editbtn_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
        btnUpdate.Text = "Update"
        lblresult.Visible = False

 Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As EventArgs)
        lblresult.Visible = False

Answer 11

User-1767698477 posted

This is working for me with one gridview. The problem is I have 2 gridviews on the same page. (soon to be 3)  I have renamed my labels to lblresult1, lblresult2 but when calling the script, both of the labels under their respective gridviews are being triggered.  How to I get the appropriate message to display and go away? I tried naming the lower gridview to TempAlert2  and this worked for the lower gridview only. When I edited a record on the upper gridview, both of the messages appeared. The same thing happens without adding the 2 at the end. Is there a to make it work with any number of gridviews?

 <center>
                        <div class="TempAlert">
                            <br />
                            <br />
                            <asp:Label ID="lblresult" runat="server" ForeColor="Green" Text="" Visible="false"></asp:Label>
                        </div>
                    </center>

 <center>
                        <div class="TempAlert2">
                            <br />
                            <br />
                            <asp:Label ID="lblresult2" runat="server" ForeColor="Green" Text="" Visible="false"></asp:Label>
                        </div>
                    </center>

 GridView2.DataBind()
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "alertscript", "<script>$('.TempAlert2').hide(7000);</script>")

Answer 12

User-939850651 posted

Hi sking,

With the right markup, I think this is achievable. Something like this:

<body>
    <form id="form1" runat="server">
        <div style="height: 300px; overflow: auto; width: 616px;">
            <asp:GridView runat="server" ID="GridView1" ClientIDMode="AutoID" ShowHeader="true" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting">
                <PagerStyle Wrap="True" />
                <Columns>
                    <asp:BoundField DataField="Column1" HeaderText="Column1" />
                    <asp:BoundField DataField="Column2" HeaderText="Column2" />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Action">
                        <ItemTemplate>
                            <asp:ImageButton ID="deletebtn" ImageUrl="~/img/delete.png" runat="server" Width="20" Height="20" CommandName="Delete" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
            <asp:GridView runat="server" ID="GridView2" ClientIDMode="AutoID" ShowHeader="true" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting">
                <PagerStyle Wrap="True" />
                <Columns>
                    <asp:BoundField DataField="Column1" HeaderText="Column1" />
                    <asp:BoundField DataField="Column2" HeaderText="Column2" />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Action">
                        <ItemTemplate>
                            <asp:ImageButton ID="deletebtn" ImageUrl="~/img/delete.png" runat="server" Width="20" Height="20" CommandName="Delete" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <br />
        <div class="TempAlert1">
            <asp:Label Text="" ID="result1" runat="server" />
        </div>
        <br />
        <div class="TempAlert2">
            <asp:Label Text="" ID="result2" runat="server" />
        </div>
    </form>
</body>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        result1.Visible = False
        result2.Visible = False
        If Not Page.IsPostBack Then
            Dim dt As New DataTable
            dt.Columns.Add("Column1")
            dt.Columns.Add("Column2")
            dt.Columns.Add("Description")
            dt.Rows.Add("content11", "content21", "Item1")
            dt.Rows.Add("content12", "content22", "Item2")
            dt.Rows.Add("content13", "content23", "Item3")
            dt.Rows.Add("content14", "content24", "Item4")
            dt.Rows.Add("content15", "content25", "Item5")
            GridView1.DataSource = dt
            GridView1.DataBind()

            GridView2.DataSource = dt
            GridView2.DataBind()
        End If
    End Sub

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView1.RowDataBound
        'Dim showothercol As Boolean = False

        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim delete As ImageButton = CType(e.Row.FindControl("deletebtn"), ImageButton)
            'Dim lab As Label = e.Row.FindControl("Description")
            delete.OnClientClick = "return confirm('Are you sure you want to delete this liability from " & e.Row.Cells(2).Text & "?')"
            'Dim text As String = "Are you sure you want to delete this liability " & " from" & e.Row.Cells(2).Text & "?"
        End If
    End Sub

    Protected Sub GridView1_RowDeleting(sender As Object, e As GridViewDeleteEventArgs)
        Dim gv As GridView = CType(sender, GridView)
        Dim num As String = gv.ID.Chars(gv.ID.Length - 1)
        Dim control As Label = Page.FindControl("result" + num)
        control.Visible = True
        control.Text = "this row has been deleted from Gridview" + num
        Page.ClientScript.RegisterStartupScript(Me.GetType(),
            "alertscript",
            "<script>$('.TempAlert" + num + "').hide(5000);</script>")
    End Sub

Note: The same data source is used in the test, but the test result has nothing to do with it, and the label content can be displayed and hidden correctly.

Best regards,

Xudong Peng