Start Javascript within jQuery mobile

Question

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>

That was a typo. I've added that in where it is in my original code. — Chris Ochsenreither, Feb 07 '13 at 00:14
It's a little besides the point, but _please don't use the `mysql_*` extension anynore_, it's being deprecated! Use either `PDO` or `mysqli_*` (the `i` is short for _improved_) — Elias Van Ootegem, Feb 07 '13 at 00:41

Jason Sperske · Accepted Answer · 2013-02-08T17:27:43.720

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

@ChrisOchsenreither I updated this answer and added a demo that works! :) — Jason Sperske, Feb 08 '13 at 17:28

Start Javascript within jQuery mobile

1 Answers1