Custom countdown timer to continue countdown on every webpage

Question

0.00/5 (No votes)

See more:

Below are my coding (C#) for the Login webpage (using Visual Studio) to activate a countdown timer at the Master page when I clicked on the "Login" button at the Login Page. The system are able to redirect to the StaffWelcome Page but the Timer() function (javascript.js) at the master.site was not executed. But if I removed the Respond.Redirect statement the Timer() function at the master.site was executed successfully. Thus, I need the expertise advice on how to make the Timer() continue to countdown on every webpage while redirect to the Welcome Page upon authentication successfully.

protected void LoginBtn_Click(object sender, EventArgs e) //Staff Login
{
    if (AuthenticateUser(txtUserName.Text, txtPassword.Text))
    {
        Master.Timer();

        Session["username"] = txtUserName.Text;

        Response.Redirect("~/StaffWelcomePage.aspx?UserName=" + txtUserName.Text);

    }
    else
    {
        MsgBox("Invalid User Name and/or Password");
        lblMessage.Text = "Invalid User Name and/or Password";
    }
}

The coding method at the site.master are shown below.

public void Timer()
{
    //lblTimer.Text = "TimerActivated";
    Page.ClientScript.RegisterStartupScript(GetType(), "Javascript", "countdownJS()", true);
}

The Countdown script file at the script folder are as shown below:

function countdownJS() 
{

    //document.getElementById('timer').innerHTML = 6 + ":" + 00;
    startTimer();

    function startTimer() {
        var presentTime, timeArray, m, s, x;
        presentTime = document.getElementById('lblTimer').innerHTML;
        timeArray = presentTime.split(/[:]+/);
        m = timeArray[0];
        s = checkSecond((timeArray[1] - 1));

        x = m.toString() + s.toString();

        if (s == 59) { m = m - 1 }

        if (x == 500) { window.open("http://asc-insilico/ASCDomainFB/Reminder5Min.aspx", "CountdownTimer", "height=200,width=500"); }

        if (x < 1) { window.location = "http://asc-insilico/ASCDomainFB/LoginPage.aspx"; }


        document.getElementById('lblTimer').innerHTML = m + ":" + s;

        setTimeout(startTimer, 1000);
    }

    function checkSecond(sec) {
        if (sec < 10 && sec >= 0) { sec = "0" + sec }; // add zero in front of numbers < 10
        if (sec < 0) { sec = "59" };
        return sec;
    }

}

What I have tried:

CodeProject, W3Schools, Google Search, Stackoverflow.

Posted 11-Apr-17 0:10am

Member 13005002

Updated 11-Apr-17 5:52am

Add a Solution

Comments

Darshan E Ksheerasagar 11-Apr-17 7:02am

Use Ajax Timer

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2017-04-11T05:52:00

Simplistically, you just need to move the Master.Timer() call to the code-behind of the StaffWelcomePage.aspx page.

However, you need to understand how ASP.NET works. When you click on a link, or click on a button, or otherwise cause a post-back or navigation, any Javascript will stop executing. Depending on what you've clicked, the contents of the <form runat="server"> might be submitted to the server. The server will handle the request, execute your server-side code, generate a response, and send it to the client. The client will then load the response, typically replacing the old page with the new response from the server.

That's why your code doesn't currently work: the HTML response that contains the Javascript code to call your countdownJS function is never sent to the client, because the Response.Redirect call tells the browser to immediately request a new page, ignoring any content returned in the current response.

And crucially, moving the call to the StaffWelcomePage will only work if the user stays on that page, without clicking any links or buttons, until the timer fires.

You'll also find that the window.open call will be blocked by the browser's popup blocker, because it's not being opened in response to a user action.