Start Stop timer using jQuery in ASP.Net

Hi anvina,

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Timer ID="timerShowDirectory" runat="server" Interval="2000">
    </asp:Timer>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                UserName:-
            </td>
            <td>
                <asp:TextBox ID="txtUserName" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                Password:-
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Button ID="btnLogin" Text="Login" runat="server" />
            </td>
            <td>
            </td>
        </tr>
    </table>
</div>
<div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=txtUserName],[id*=txtPassword]').focus(function () {
                var timer = $find('<%= timerShowDirectory.ClientID %>');
                timer._stopTimer();
                // timer._startTimer(); like this way you can start time on successfull ajax call.
                alert('Timer Stopped');
            });
        });
    </script>
</div>

ScreenShot

anvina says:

any thoughts on reason why the timer is not stopping?

 cant really tell why its behaving like this because as you tried in new page and it worked correctly so put debugger and cross check your code you might be missing something as we cant check your code remotely.

anvina says:

Also how can i stop it server side with the ajax call ?

You can't.

The whole point of [WebMethod]s is that they don't run the ASP.Net page lifecycle. This way, they're fast and parallelizable. Your controls don't exist.