Home/ Questions/Q 9255633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:45:22+00:00

Can someone please show me how to initiate the javscript within each page? Let

  • 0

Can someone please show me how to initiate the javscript within each page? Let me know if you have any questions. I followed the advice of http://jquerymobile.com/demos/1.2.0/docs/api/events.html

http://jsbin.com/ikemuh/3/

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta charset=utf-8 />
<script>


function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;


$("#clock").html(currentTimeString);

}
$(document).bind('pageinit', function() {
setInterval('updateClock()', 1000);
});
</script>

<title>Clock</title>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div data-role="page" id="page1">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page2">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page3">Finished!</a>
</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1><span id="clock">&nbsp;</span></h1>
</div>
<div data-role="content">
<p>Content<br/>
<a data-role="button" href="#page1">Finished!</a>
</p>
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are looking for a slightly different event than jQuery’s normal onDOMReady ($(function() {})). Take a look at this page of the documentaiton. Specifically:

    $(document).bind('pageinit', function() {
  //call to any JavaScript you want to run when your view is initialized
});

    Looking at your code I see there are actually a few changes you need to make (here is a demo). First I switched to the pageshow, second, because you actually have 3 spans with the id of ‘Clock‘ I switched to a class (ID‘s should be unique in a document, and because jQuery Mobile uses a single document to represent multiple pages you need to take special care with your element selectors. I updated the the JavaScript to look for a class (so it changes all three spans), and finally I replaced the setInterval from this:

    setInterval('updateClock()', 1000);

    to this:

    setInterval(updateClock, 1000);

    Because eval is evil

    • 0