Home ›
ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX UI » Start Client Timer from Server Event and start server Event from client event

Start Client Timer from Server Event and start server Event from client event

Last post 06-04-2007 1:36 AM by chetan.sarode. 15 replies.

Sort Posts:

  • Start Client Timer from Server Event and start server Event from client event

    05-23-2007, 1:26 PM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    All of you, I have a big challenge which i'm not able to resolve.

    I need some experts with samples on this.

    Situation for a webbased quiz system I have a data set with e.g. 5 questions.

    The process should be like

    1. Load Question 1 from database, there is also a picture and a MP3 sound file

    2. I connect the MP3 sound file to a webcontrol I've written to play Mp3 with a flashmovie.

    3. Once this mp3 is played (the question is read for people with reading problems) an Event should be raised from the client to the server.

    4. The event from 3 should start a Countdown timer (15 seconds ) which shows as a progressbar in the client form WITHOUT posting back

    Now there are two options

    a. the time elapsed (15 seconds) then I need a server event kicked to show the next question (start at 1)

    b. The user entered the answer and presses Next question. We stop the timer , load the next question and start at 1

     

    So I can't connect a client script to an onclick event since no one can click on a button

    I found several articles about javascript timers, calling javascript from server side but to be honest I'm no javascript nor clientsidescriptmanager expert.

     

    Who can help me on this with working samples

    preferable language vb

    platform vs2005

     

    Looking forward to posts from the real gurus

     

    Peter

    Peter van de Put
    www.prave.nl
    Filed under: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-28-2007, 3:28 AM
    Answer

     Hello Peter,

    I'm not familiar with flash movie, so I assume you are already able to raise event on client when it finishes playing mp3.

    Please try this :

     

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    
    [System.Web.Services.WebMethod]
    public static void Mp3PlayingEnd()
    {
    }

    [System.Web.Services.WebMethod]
    public static string GetQuestion()
    {
        return "New question generated on " + DateTime.Now.ToString();
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

var timer;
var count = 0;
function Button1_onclick() {
    PageMethods.Mp3PlayingEnd(); // call server method
    timer = window.setInterval(startCounting, 1000);
}

function answer_onclick() {
    endCounting();
}

function startCounting() {
    count++;
    $get("progress").value = count;
    if(count > 15)
    {
        endCounting();
    }
}

function endCounting() {
    count = 0;
    $get("progress").value = count;
    window.clearInterval(timer);
    PageMethods.GetQuestion(onComplete); // call server method
}

function onComplete(result) {
    $get("question").value = result;
}

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
        </asp:ScriptManager>
    
    </div>
    <input type="text" id="progress" disabled="disabled" />
        <input id="Button1" type="button" value="Use this button to simulate the mp3 playing end" onclick="return Button1_onclick()" />
        <input id="Button2" type="button" value="Answer" onclick="return answer_onclick()" />
        
    <input type="text" id="question" disabled="disabled" style="width: 637px" />
    </form>
</body>
</html>
      Hope this helps.

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-30-2007, 11:56 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond

    ,

    Good answer but i can not convert it to VB. I get a message PageMethods does not exist.

    Can you provide the same sample in Vb with correct syntax please

    Peter

    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-30-2007, 10:38 PM

     

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub
    
    <System.Web.Services.WebMethod()> _
    Public Shared Sub Mp3PlayingEnd()
        
    End Sub
    
      
    <System.Web.Services.WebMethod()> _
    Public Shared Function GetQuestion() As String
        Return "New question generated on " + DateTime.Now.ToString()
    End Function
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

var timer;
var count = 0;
function Button1_onclick() {
    PageMethods.Mp3PlayingEnd(); // call server method
    timer = window.setInterval(startCounting, 1000);
}

function answer_onclick() {
    endCounting();
}

function startCounting() {
    count++;
    $get("progress").value = count;
    if(count > 15)
    {
        endCounting();
    }
}

function endCounting() {
    count = 0;
    $get("progress").value = count;
    window.clearInterval(timer);
    PageMethods.GetQuestion(onComplete); // call server method
}

function onComplete(result) {
    $get("question").value = result;
}

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
        </asp:ScriptManager>
    
    </div>
    <input type="text" id="progress" disabled="disabled" />
        <input id="Button1" type="button" value="Use this button to simulate the mp3 playing end" onclick="return Button1_onclick()" />
        <input id="Button2" type="button" value="Answer" onclick="return answer_onclick()" />
        
    <input type="text" id="question" disabled="disabled" style="width: 637px" />
    </form>
</body>
</html>
      

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 3:44 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond,

    I tried your sample but when pushing the Button I get a javascript error telling me that object doesn't support this method.

    This line applies to the

    PageMethods.Mp3PlayingEnd(); // call server method

    Also yesterday I saw that PageMethods is not supported in VB or do I need another reference?

     

    Peter

    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 3:51 AM
    Peter, Did you copy my sample or just wrote a similar one? Please note the EnablePageMethods property of the ScriptManager instance on the page should be set to true.

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 4:12 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond,

    I used your code exactly in a new Asp.Net VB WebProject on the default.aspx Page

    I pasted this one

    <%@ Page Language="VB" %>

    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI" TagPrefix="asp" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

     

    <script runat="server">

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

    End Sub

     

    <System.Web.Services.WebMethod()> _

    Public Shared Sub Mp3PlayingEnd()

     

    End Sub

     

     

    <System.Web.Services.WebMethod()> _

    Public Shared Function GetQuestion() As String

    Return "New question generated on " + DateTime.Now.ToString()

    End Function

     

    </script>

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head id="Head1" runat="server">

    <title>Untitled Page</title>

    <script language="javascript" type="text/javascript">

    // <!CDATA[

    var timer;

    var count = 0;

    function Button1_onclick() {

    PageMethods.Mp3PlayingEnd(); // call server method

    timer = window.setInterval(startCounting, 1000);

    }

    function answer_onclick() {

    endCounting();

    }

    function startCounting() {

    count++;

    $get(    "progress").value = count;if(count > 15)

    {

    endCounting();

    }

    }

    function endCounting() {

    count = 0;

    $get(    "progress").value = count;

    window.clearInterval(timer);

    PageMethods.GetQuestion(onComplete); // call server method

    }

    function onComplete(result) {

    $get("question").value = result;

    }

    // ]]>

    </script>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">

    </asp:ScriptManager>

     

    </div>

    <input type="text" id="progress" disabled="disabled" />

    <input id="Button1" type="button" value="Use this button to simulate the mp3 playing end" onclick="return Button1_onclick()" />

    <input id="Button2" type="button" value="Answer" onclick="return answer_onclick()" />

     

    <input type="text" id="question" disabled="disabled" style="width: 637px" />

    </form>

    </body>

    </html>

     

     

    I manually added the reference for the scriptmanager

    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    There is nothing in the code behind page (.vb) and nothing changed to a default web.config

     

    Why it doesn't work I dont know.

    Peter

    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 4:26 AM

    I copied your code and it's working fine.

    Have you installed the Ajax Extension? Have you tried other ajax functions? Are they working fine? 

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 10:03 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond, Indeed it works, I needed to add a lot of stuff in the web.config

    Thanks for your help

     

    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 11:57 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond, Sorry to get back to you once more.

    My final issue is I want to call a javascript function to start the timer from a code behind method.

    So this function

    function Button1_onclick() {

    PageMethods.Mp3PlayingEnd();

    timer = window.setInterval(startCounting, 1000);

    }

    i would like to change to

    function starttimer() {

    timer = window.setInterval(startCounting, 1000);

    }

    in code behind I have a method that should call the javascript function starttimer

    the question is HOW??

    Peter
    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    05-31-2007, 9:31 PM

    You can't call the javascript function from code behind directly.

    An workaround is to use  ScriptManager.RegisterStartupScript() method, in which calling the function you need to run upon the postback.

     

  • Re: Start Client Timer from Server Event and start server Event from client event

    06-01-2007, 2:23 AM
    • Loading...
    • pvdput
    • Joined on 06-29-2004, 10:20 AM
    • France
    • Posts 14

    Raymond,

    I know you can call clientscript via this method or linking it to an onclick or onload event however it seems strange that I'm the first developer that wants to call clientscript from code behind.

    A server based timer might be an alternative but I can not show the progess in the client.

    Any ideas?

    Peter

    Peter van de Put
    www.prave.nl

  • Re: Start Client Timer from Server Event and start server Event from client event

    06-01-2007, 2:55 AM