[Countdown Mobile] countdown mobile

[Countdown Mobile] countdown mobile

  
Forge Component
(0)
Published on 26 Feb by Pedro Rodrigues
0 votes
Published on 26 Feb by Pedro Rodrigues

I have problem after using countdown mobile plugin. it's look like image below :

Do you know how to solve this error?

I tried implementing this plugin and just can't figure it out.  There are some really interesting plugins in Forge, but a common issue, I find, is a lack of doc on how to implement them.  Just a few lines of instructions would go a long way.

I'm getting a $ is not defined error.

I'm not sure why a Javascript function would be assigned to a local variable... that's what you're seeing.  Are you referencing the Local Variable "JavaScriptText" on your screen?

Hi Anggun, this plugin is not working as expected. As David states, there is the $ is not defined error. In addition, the web block was also missing the reference to the jquery javascript script. 

I send you in attach a working version of this module. I've split the web block into two, the CountdownUntilDate, in which you need to pass the date you want to have as the deadline, and the CountdownUntilText, in which you can pass the time you want to countdown, e.g. +1d + 30m. See if this suits your needs.

The underlying javascript component has many more possibilities that those exposed by the web blocks. For more details on what is possible, see: http://keith-wood.name/countdown.html

Pedro Rodrigues wrote:

Hi Anggun, this plugin is not working as expected. As David states, there is the $ is not defined error. In addition, the web block was also missing the reference to the jquery javascript script. 

I send you in attach a working version of this module. I've split the web block into two, the CountdownUntilDate, in which you need to pass the date you want to have as the deadline, and the CountdownUntilText, in which you can pass the time you want to countdown, e.g. +1d + 30m. See if this suits your needs.

The underlying javascript component has many more possibilities that those exposed by the web blocks. For more details on what is possible, see: http://keith-wood.name/countdown.html

Thanks pedro, this work for me

but we want to put the countdown in multiple screen with the timers still countinue to countdown. How to achive that?


Thanks,

Anggun Nurani

Anggun Nurani wrote:

Pedro Rodrigues wrote:

Hi Anggun, this plugin is not working as expected. As David states, there is the $ is not defined error. In addition, the web block was also missing the reference to the jquery javascript script. 

I send you in attach a working version of this module. I've split the web block into two, the CountdownUntilDate, in which you need to pass the date you want to have as the deadline, and the CountdownUntilText, in which you can pass the time you want to countdown, e.g. +1d + 30m. See if this suits your needs.

The underlying javascript component has many more possibilities that those exposed by the web blocks. For more details on what is possible, see: http://keith-wood.name/countdown.html

Thanks pedro, this work for me

but we want to put the countdown in multiple screen with the timers still countinue to countdown. How to achive that?


Thanks,

Anggun Nurani

Anggun,

Please send me oml file.


P Roy wrote:

Anggun Nurani wrote:

Pedro Rodrigues wrote:

Hi Anggun, this plugin is not working as expected. As David states, there is the $ is not defined error. In addition, the web block was also missing the reference to the jquery javascript script. 

I send you in attach a working version of this module. I've split the web block into two, the CountdownUntilDate, in which you need to pass the date you want to have as the deadline, and the CountdownUntilText, in which you can pass the time you want to countdown, e.g. +1d + 30m. See if this suits your needs.

The underlying javascript component has many more possibilities that those exposed by the web blocks. For more details on what is possible, see: http://keith-wood.name/countdown.html

Thanks pedro, this work for me

but we want to put the countdown in multiple screen with the timers still countinue to countdown. How to achive that?


Thanks,

Anggun Nurani

Anggun,

Please send me oml file.


This is my oml 


Please write appropriate code in BLOCK and reuse that BLOCK where you want

P Roy wrote:

Please write appropriate code in BLOCK and reuse that BLOCK where you want

i want to countdown still continue when i move to another screen


but when in another screen, the countdown start from begining 


Anggun Nurani wrote:

P Roy wrote:

Please write appropriate code in BLOCK and reuse that BLOCK where you want

i want to countdown still continue when i move to another screen


but when in another screen, the countdown start from begining 



While redirecting user to other screen, please pass counter value in the form of variable and to another screen you can use a function to parse the URL query string:


Note: val is the variable which you'll get from source screen 


var qsParm = new Array();
function qs() {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i < parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0) {
            var key = parms[i].substring(0, pos);
            var val = parms[i].substring(pos + 1);
            qsParm[key] = val;
        }
    }
}

P Roy wrote:

Anggun Nurani wrote:

P Roy wrote:

Please write appropriate code in BLOCK and reuse that BLOCK where you want

i want to countdown still continue when i move to another screen


but when in another screen, the countdown start from begining 



While redirecting user to other screen, please pass counter value in the form of variable and to another screen you can use a function to parse the URL query string:


Note: val is the variable which you'll get from source screen 


var qsParm = new Array();
function qs() {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i < parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0) {
            var key = parms[i].substring(0, pos);
            var val = parms[i].substring(pos + 1);
            qsParm[key] = val;
        }
    }
}

actually, i don't know where i put the function like that. please give me the tutorial step by step

Thanks,

Anggun Nurani

Hi Anggun, I believe you are using the ContdownUntilText, right? If that is the case, I suggest you use the CountdownUntilDate. As long as you use the same date on all screens, the countdown will continue from where it was in a different screen.

The problem you are left with is how to translate the UntilText into the UntilDate. You can use the built-in Date functions to achieve this. You can get the current date (CurrDate()), and you can use the AddDays, AddHours, AddMinutes, AddSeconds functions to obtain the date that is to be used as UntilDate. You could store this date in the client database or you could pass it between screens.

Does this help you somehow?

Pedro Rodrigues wrote:

Hi Anggun, I believe you are using the ContdownUntilText, right? If that is the case, I suggest you use the CountdownUntilDate. As long as you use the same date on all screens, the countdown will continue from where it was in a different screen.

The problem you are left with is how to translate the UntilText into the UntilDate. You can use the built-in Date functions to achieve this. You can get the current date (CurrDate()), and you can use the AddDays, AddHours, AddMinutes, AddSeconds functions to obtain the date that is to be used as UntilDate. You could store this date in the client database or you could pass it between screens.

Does this help you somehow?


thanks for reply, 

can you give me an example for the case?


Thanks, 

Anggun Nurani

Hi Anggun, I'm sending an example of the idea I had in mind. Check the CountdownMobileDemo module. In this module you find two screens, each having its own countdown web block on it and each having a button to switch to the other screen. The countdown web block on both screens is fed with a date time value present in the (only) record present in the local entity Deadline.

The moment the application starts, all records in the entity Deadline are deleted and a new record is created (see action OnApplicationReady). This record contains the current date time plus 2 hours and 30 minutes. That is why, immediately after the application starts, you see it counting down from 02:30:00. When you switch between screens, you can see that the countdown proceeds from where it was. As far as I understood, this is the behaviour you were looking for. Let me know if this helps you proceeding.

Cheers, pedro 

Pedro Rodrigues wrote:

Hi Anggun, I'm sending an example of the idea I had in mind. Check the CountdownMobileDemo module. In this module you find two screens, each having its own countdown web block on it and each having a button to switch to the other screen. The countdown web block on both screens is fed with a date time value present in the (only) record present in the local entity Deadline.

The moment the application starts, all records in the entity Deadline are deleted and a new record is created (see action OnApplicationReady). This record contains the current date time plus 2 hours and 30 minutes. That is why, immediately after the application starts, you see it counting down from 02:30:00. When you switch between screens, you can see that the countdown proceeds from where it was. As far as I understood, this is the behaviour you were looking for. Let me know if this helps you proceeding.

Cheers, pedro 

Thanks for reply pedro,


This very helpful for me, but i want to asking something. 


Is create deadline action should be placed on onapplicationready? because when I need the countdown not when application ready, but I need it when opening a page that requires mobile countdown. so i tried put it on oninitialize. it does work, but when I go back to the previous screen, the next screen will count from the beginning.


Thanks,

Anggun Nurani

Hi Anggun, you are not obliged to create the deadline on onapplicationready. You can do it whenever you want, even on the oninitialize. 

In order to be able to help you, I need a more detailed description of your use case. You are saying that you want to start counting from the moment the user accesses a given page. But you don't want to restart counting every time the user accesses this page. In which cases do you want to reset the counter, i.e. start counting down again and in which cases do you want to proceed with the counting?

Pedro Rodrigues wrote:

Hi Anggun, you are not obliged to create the deadline on onapplicationready. You can do it whenever you want, even on the oninitialize. 

In order to be able to help you, I need a more detailed description of your use case. You are saying that you want to start counting from the moment the user accesses a given page. But you don't want to restart counting every time the user accesses this page. In which cases do you want to reset the counter, i.e. start counting down again and in which cases do you want to proceed with the counting?

Hello Pedro, in my case i want to start countdown when i open the page, not when application ready. so i put the action create deadline on the oninitialize. But when i back in screen 1, and then i next to screen 2, countdown in screen 2 count from begining.

I give you my oml.


Thanks, 

Anggun Nurani

Hi Anggun, now it's working :) See oml attached.

What did I do?

a) created action onapplicationready; in this action all deadlines are removed

b) HomeScreen; removed oninitialize action; changed action GetDeadlinesOnAfterFetch so that if there are no deadlines, a new one is created


How does the application work right now? When the application is started, all deadlines are deleted from the local storage. The first time the user accesses the home screen, a new deadline is created. This deadline will be used in both the home screen and screen 1, independently of how often you switch between these two screens.


Why was it not working? It has to do with the fact that the oninitialize on the home screen is called every time you navigate to that screen; in addition, the GetDeadlines is run in parallel with the oninitialize action. Here, the explanation in detail:

The first time you navigate to the home screen, the counter starts counting down from 30 minutes. You navigate to screen 1 and the counter continues from where it was. Screen 1 does not set the counter. 

When you navigate back to the home screen, both the GetDeadlines and the oninitialize action are run in parallel (check this page for an explanation of when the scree lifecycle events take place). If the GetDeadlines finishes first, you see the counter continuing counting down from where it was when you left screen 1. Afterwards, the oninitialize is run and so all deadlines are deleted and a new one is set. You don't see that the counter has been reset in this screen though. 

When you switch back to screen 1, you will find it strange as the counter seems to start from a different moment than where it was when you left the home screen. That is because the counter was reset the moment you went to the home screen. You stayed on that screen for a while and that is why you see the counter not starting counting down from 30 minutes but from 29:45 for example.


Hope this helps :)

Pedro Rodrigues wrote:

Hi Anggun, now it's working :) See oml attached.

What did I do?

a) created action onapplicationready; in this action all deadlines are removed

b) HomeScreen; removed oninitialize action; changed action GetDeadlinesOnAfterFetch so that if there are no deadlines, a new one is created


How does the application work right now? When the application is started, all deadlines are deleted from the local storage. The first time the user accesses the home screen, a new deadline is created. This deadline will be used in both the home screen and screen 1, independently of how often you switch between these two screens.


Why was it not working? It has to do with the fact that the oninitialize on the home screen is called every time you navigate to that screen; in addition, the GetDeadlines is run in parallel with the oninitialize action. Here, the explanation in detail:

The first time you navigate to the home screen, the counter starts counting down from 30 minutes. You navigate to screen 1 and the counter continues from where it was. Screen 1 does not set the counter. 

When you navigate back to the home screen, both the GetDeadlines and the oninitialize action are run in parallel (check this page for an explanation of when the scree lifecycle events take place). If the GetDeadlines finishes first, you see the counter continuing counting down from where it was when you left screen 1. Afterwards, the oninitialize is run and so all deadlines are deleted and a new one is set. You don't see that the counter has been reset in this screen though. 

When you switch back to screen 1, you will find it strange as the counter seems to start from a different moment than where it was when you left the home screen. That is because the counter was reset the moment you went to the home screen. You stayed on that screen for a while and that is why you see the counter not starting counting down from 30 minutes but from 29:45 for example.


Hope this helps :)

Thanks Pedro you save my day :D


This very helpful :D


Thanks,

Anggun Nurani

Pedro Rodrigues wrote:

Hi Anggun, now it's working :) See oml attached.

What did I do?

a) created action onapplicationready; in this action all deadlines are removed

b) HomeScreen; removed oninitialize action; changed action GetDeadlinesOnAfterFetch so that if there are no deadlines, a new one is created


How does the application work right now? When the application is started, all deadlines are deleted from the local storage. The first time the user accesses the home screen, a new deadline is created. This deadline will be used in both the home screen and screen 1, independently of how often you switch between these two screens.


Why was it not working? It has to do with the fact that the oninitialize on the home screen is called every time you navigate to that screen; in addition, the GetDeadlines is run in parallel with the oninitialize action. Here, the explanation in detail:

The first time you navigate to the home screen, the counter starts counting down from 30 minutes. You navigate to screen 1 and the counter continues from where it was. Screen 1 does not set the counter. 

When you navigate back to the home screen, both the GetDeadlines and the oninitialize action are run in parallel (check this page for an explanation of when the scree lifecycle events take place). If the GetDeadlines finishes first, you see the counter continuing counting down from where it was when you left screen 1. Afterwards, the oninitialize is run and so all deadlines are deleted and a new one is set. You don't see that the counter has been reset in this screen though. 

When you switch back to screen 1, you will find it strange as the counter seems to start from a different moment than where it was when you left the home screen. That is because the counter was reset the moment you went to the home screen. You stayed on that screen for a while and that is why you see the counter not starting counting down from 30 minutes but from 29:45 for example.


Hope this helps :)

Hi pedro, I have one question again hehe

how do we know that the countdown has run out?

Hi Anggun, the count down mobile is built on top of the jQuery countdown. As you can see in the documentation of this jQuery component, it is possible to associate a callback to the moment the countdown has run out. Check the onExpiry property. You could expand the countdown web block made available so that it, for instance, produces a feedback message the moment the countdown reaches 0.

Pedro Rodrigues wrote:

Hi Anggun, the count down mobile is built on top of the jQuery countdown. As you can see in the documentation of this jQuery component, it is possible to associate a callback to the moment the countdown has run out. Check the onExpiry property. You could expand the countdown web block made available so that it, for instance, produces a feedback message the moment the countdown reaches 0.

Thanks, Pedro :D


Pedro Rodrigues wrote:

Hi Anggun, the count down mobile is built on top of the jQuery countdown. As you can see in the documentation of this jQuery component, it is possible to associate a callback to the moment the countdown has run out. Check the onExpiry property. You could expand the countdown web block made available so that it, for instance, produces a feedback message the moment the countdown reaches 0.

Hi Pedro, I want to ask again


i want to send value the parameter output in my screen. but i don't know how to send it from countdownmobile to my screen. 


Thanks pedro

Hi Anggun, could you explain, from a purely functional perspective, what you would like to happen when the countdown has reached 0? Should something happen on the screen? Should a background process start?

greetings, pedro 

Pedro Rodrigues wrote:

Hi Anggun, could you explain, from a purely functional perspective, what you would like to happen when the countdown has reached 0? Should something happen on the screen? Should a background process start?

greetings, pedro 

Hi Pedro, 

In my application, When the countdown has reached 0, i must do something for the next step. 

and i need to know that the countdown has reached 0. 


I want to delete All the list when the countdown has reached 0.


Thanks,

Anggun Nurani



Solution

Hi Anggun, I just uploaded a new version of the countdown mobile (v. 1.0.2). With this version you can call a screen action the moment the countdown reaches 0. 

I'm also sending you in here an application that exemplifies how this can be done. In the home screen of this application you have two counters, one using the CountdownUntilDate web block and one using the CountdownUntilText web block. The former is scheduled to reach 0 within 5 seconds and the former is scheduled to reach 0 within 10s. In both cases, a feedback messaged is shown on the screen the moment the countdown finished. The feedback messages are defined in screen actions on the home screen itself. I'm presenting feedback messages but you can do whatever you want.

Hope this helps.

Solution

Pedro Rodrigues wrote:

Hi Anggun, I just uploaded a new version of the countdown mobile (v. 1.0.2). With this version you can call a screen action the moment the countdown reaches 0. 

I'm also sending you in here an application that exemplifies how this can be done. In the home screen of this application you have two counters, one using the CountdownUntilDate web block and one using the CountdownUntilText web block. The former is scheduled to reach 0 within 5 seconds and the former is scheduled to reach 0 within 10s. In both cases, a feedback messaged is shown on the screen the moment the countdown finished. The feedback messages are defined in screen actions on the home screen itself. I'm presenting feedback messages but you can do whatever you want.

Hope this helps.

Hi Pedro,

Thanks pedro, you save my day


:) you're welcome. Nice programming!

Hey, nice code!

I want to implement this code,  I would like to imput a button to start the coutdown and the time in coutdown is setted by the user, but I don't know how to do this, someone can help me?