Ibm Worklight - How To Re-use A Function In A Multipage App

I have used the function doTimer() on the page level-one-1, and now I'm trying to reuse the function doTimer() on the second page. But it doesn't work. Can anyone help me? Here is

Solution 1:

You do not mention in WHICH .js file you have placed this function nor how do you navigate between pages. This is crucial information. Add this information to your question.

In the context of a Worklight 6.1 application - without knowing anything else about your project - my suggestion is to place this function in the common\js\main.js file. This main.js file is referenced in the HEAD of your Worklight application's index.html file.

To reuse this function, you can then for example navigate between "pages" by replacing the contents of a DIV within the index.html file by using jQuery's load API method. This way the function is always available no matter which "page" you are loading.

These are two sample projects that implement "page" loading:

• JQM_multipage_load_changePage.zip - uses either .load or .changePage
• JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow

---

Edit: using the provided demo project in the comments to this answer, I have changed the following in it:

1. Change this:

   $(document).on("pageshow", "#one", function( event ) {
       alert( "page 1 loaded" );
   });
   
   $(document).on("pageshow", "#two", function( event ) {
       alert( "page 2 loaded" );
   });
   

   To this:

   $(document).on("pageshow", "#one", function( event ) {
       alert( "page 1 loaded" );
       stopCount();
       doTimer();
   });
   
   $(document).on("pageshow", "#two", function( event ) {
       alert( "page 2 loaded" );
       stopCount();
       doTimer();
   });
   

   To verify doTimer() is indeed called, you can add an alert inside doTimer(), like alert ("in doTimer");

   To verify stopCount() is indeed called, you can add an alert inside doTimer(), like alert ("in stopCount");

2. Remove the onload from the HTML:

   From:

   <div id="level-one-2" data-role="page" onload="doTimer()">

   To:

   <div id="level-one-2" data-role="page">

Solution 2:

I finally come up with a solution.

Since I'm new to jquerymobile, I just knew that for multipage app, all of the pages are loaded via AJAX which is the problem why all of my function stop working when I navigated to other page. So before, I used mobile changepage to navigate, and now I changed them using href="#nextpage" and I added another attribute of data-rel="external". And now it's finally working.

my reference : http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/