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 my javascript and html code.

The JS:

var start = new Date().getTime(); 
var elapsed = '0.0'; 
var t;
var timer_is_on=0;

function timedCount() {
    var time = new Date().getTime() - start;
    elapsed = Math.floor(time / 100) / 10; 
    if(Math.round(elapsed) == elapsed) { elapsed += '.0'; } 
    document.getElementById('txt').value=elapsed;
    t=setTimeout("timedCount()",50);
}

function doTimer() {
    if (!timer_is_on) {
        start = new Date().getTime(); 
        timer_is_on=1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on=0;
}

function resetCount() {
    document.getElementById('txt').value='0.0';
    var elapsed = '0.0';
}

The HTML:

<!-- Page Level 1-1 start --> 
<div id="level-one-1" data-role="page"  >

  <div data-role="header">
    <h1>StarKids</h1>
  </div>

  <div data-role="content">

    <table>

      <tr>
        <td id="level-1">Level 1</td>
        <td colspan="3" id="center-top"></td>
        <td id="txt">

        </td>
      </tr>

      <tr>
        <td id="settings">Setting</td>
        <td colspan="3" id="center-top">Which animal is monkey?</td>
        <td id="overallscore"></td>
      </tr>

      <tr>

        <td colspan="2"><a onclick="checkAnswer1a()"><img id="tortoise" src="images/duck.png" ></a></td>
        <td><img id="elephant" src="images/duck.png" onclick="checkAnswer1a()"></td>
        <td colspan="2"><img id="giraffe" src="images/duck.png" onclick="checkAnswer1a()"></td>

      </tr>

      <tr>

        <td colspan="2"><img id="monkey" src="images/duck.png" onclick="checkAnswer1a()"></td>
        <td></td>
        <td colspan="2"><img id="owl" src="images/duck.png" onclick="checkAnswer1a()"></td>

      </tr>

      <tr>
        <td colspan="5" id="next"><a href="#level-one-2" onclick="stopCount();">Next</a></td>
      </tr>

    </table>
  </div>

  <div data-role="footer">
    <!--  Copyright &copy; anitaagustina 2013 -->
  </div>

</div>

<!-- Page Level 1-1 end -->

<!-- Page Level 1-2 start --> 
<div id="level-one-2" data-role="page" onload="doTimer()">

  <div data-role="header">
    <h1>StarKids</h1>
  </div>

  <div data-role="content" >

    <table id="tabel-soal">

      <tr>
        <td id="level-1">Level 1</td>
        <td colspan="3">&nbsp;</td>
        <td id="txt">



        </td>
      </tr>

      <tr>
        <td id="settings">Setting</td>
        <td colspan="3">Match each word to its picture</td>
        <td id="overallscore"></td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>image:elephant</td>
        <td>image:elephant</td>
        <td>image:elephant</td>
        <td>&nbsp;</td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>empty-box</td>
        <td>empty-box</td>
        <td>empty-box</td>
        <td>&nbsp;</td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>answer-choice-1</td>
        <td>answer-choice-2</td>
        <td>answer-choice-3</td>
        <td>&nbsp;</td>
      </tr>

      <tr>
        <td colspan="5">Next</td>
      </tr>

    </table>
  </div>

  <div data-role="footer">
    <!--  Copyright &copy; anitaagustina 2013 -->
  </div>

</div>

<!-- Page Level 1-2 end -->

回答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:

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");

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">

回答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/

来源：https://stackoverflow.com/questions/21729045/ibm-worklight-how-to-re-use-a-function-in-a-multipage-app

标签

javascript

jquery

ibm-mobilefirst