Take the 2-minute tour ×

I am creating a really simple mobile app for our local track club. The app seems to be working fine when I test it on my localhost but when I change the links to point to my remote server and then package the app nothing seems to render. I am hoping that this is a really easy fix. Here is a page that I would like to populate using a JSON object into a HTML frame using Javascript.

<!DOCTYPE html>
<meta charset="UTF-8">
<title>United Track Club</title>
<link href="jquery-mobile/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application. -->

<script src="jquery-mobile/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>

<!--a name="viewport"content="width=device-width, initial-scale=1"> -->

<div data-role="page" id="runnerListPage">
<div data-role="header">
<div data-role="content">

     <ul id="runnerList" data-role="listview" data-filter="true">

   <div data-role="navbar">
        <li><a href="index.html" data-icon="home">Home</a></li>
        <li><a href="#searchListPage" data-icon="search">Search</a></li>
        <li><a href="#scheduleListPage" data-icon="grid">Schedule</a></li>


Here is the JS that I created to populate the above code.

$.getJSON('http://unitedtrack.org/Mobile/TF/getrunnerlist.php', function(data){
var object = data.items,
runnerCount = object.length, 
target = document.getElementById('runnerList'),

if (runnerCount>0){
    for (i =0 ; i< runnerCount; i=i+1){
        var unitrun=object[i],
        EventDt = unitrun.First_Nm,
        MeetNm = unitrun.Last_Nm;
target.innerHTML +='<li><a href="#">'+ EventDt +', ' +MeetNm +' </a></li>';
else {
    alert('there are no runners');


Thank you in advance for your help.

share|improve this question
Does the page that calls $.getJSON() also come from "unitedtrack.org"; or is it on your local machine (or somewhere else)? If so, that's your problem. –  Pointy Jan 17 '13 at 23:49
The page that is being called in the $getJSON() is on the remote server. –  custom_concept Jan 17 '13 at 23:51
Is this in fact your HTML code? Because you have your script calls all commented. If not, please edit your question so that people won't be confused. –  Hernan Jan 18 '13 at 0:00
So many technologies. Can't you narrow down the problem to just one of them? –  Lightness Races in Orbit Jan 18 '13 at 0:17
I am sorry. I was cleaning up some of the code when I copied it over. The script calls are not supposed to be commented out. –  custom_concept Jan 18 '13 at 0:28

1 Answer 1

You need to set proper headers on the page you are querying (e.g. http://unitedtrack.org/Mobile/TF/getrunnerlist.php).

You need to set Access-Control-Allow-Origin header. See the link for more informations about cross-origin requests.

share|improve this answer
There is also a formatting error in the json file, it should be "items": instead of "items:" –  Hernan Jan 18 '13 at 2:23

Your Answer


