Script works for Computers but won't work in mobile platforms such as iPhone...code included
Okay so I got my page up and running and grabbing JSON and outputting it with no problems on my browsers such as Safari, Google Chrome, and Firefox. Problem is the site doesn't work on iPhone of Android. I am guessing the DOM maybe different? As my script doesn't work for them.
Taking advice from a fellow user I changed alot to Jquery. Still having same problem though.... Updated code as follows:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
<script>
function games(){
$.ajax({
url: "http://allencoded.com/test3.php",
dataType: 'json',
success: function (data) {
var fetchTeam = $("#team").val(); //value from selection
var homeTeams = [];//home Teams
var visitorTeams = [];//visitor teams
var dayPlayed = [];//day of the game ex.Mon
var homeTeamFull = [];
var visitorTeamFull = [];
var gameTime = [];
var quarter = [];
var visitorScore = [];
var homeScore= [];
for (var i =0; i < data.gms.length; i++){
homeTeams[i]=data.gms[i].h }
for (var i =0; i < data.gms.length; i++){
visitorTeams[i]=data.gms[i].v }
for (var i = 0; i < data.gms.length; i++) {
dayPlayed[i]=data.gms[i].d}
for (var i = 0; i < data.gms.length; i++) {
homeTeamFull[i]=data.gms[i].hnn}
for (var i = 0; i < data.gms.length; i++) {
visitorTeamFull[i]=data.gms[i].vnn}
for (var i = 0; i < data.gms.length; i++) {
gameTime[i]=data.gms[i].t}
for (var i = 0; i < data.gms.length; i++) {
quarter[i]=data.gms[i].q}
for (var i = 0; i < data.gms.length; i++) {
homeScore[i]=data.gms[i].hs}
for (var i = 0; i < data.gms.length; i++) {
visitorScore[i]=data.gms[i].vs}
//for statements to get team user team...
for(i=0; i<homeTeams.length; i++)
{if (homeTeams[i] == fetchTeam || visitorTeams[i]==fetchTeam)
{
$("span#hometeam").html(homeTeamFull[i]);
$("span#homescore").html(homeScore[i]);
$("span#awayteam").html(visitorTeamFull[i]);
$("span#awayscore").html(visitorScore[i]);
$("span#gametime").html(quarter[i]);
}
}
}
});
}
</script>
<style type="text/css">
#body{
background-color: #7f007f;
}
#wrapper {
}
#header {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #FFF;
line-height:28px;
text-shadow: rgba(255,255,255,.2) 0 1px 1px;
}
#hometeam {
min-width: 200px;
width: 200px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: left;
color: #FFF;
line-height:28px;
padding-left: 10px;
}
#homescore {
min-width: 200px;
width: 200px;
font-weight: bold;
line-height: 28px;
padding-left: 10px;
color: white;
font-size: 18px;
text-align: left开发者_如何学Go;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}
#awayteam {
width: 200px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: left;
color: #FFF;
line-height:28px;
padding-left: 200px;
}
#awayscore {
width: 200px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: left;
color: #FFF;
line-height:28px;
padding-left: 200px;
}
#formselect {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 12px;
text-align: center;
color: #FFF;
line-height:35px;
padding-left: 10px;
}
#gametime {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 12px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body id="body">
<div id="wrapper">
<div id="header">NFL Score Zone</div>
<div id="formselect"><form id="teamSelect"><select name="team" id="team">
<option value="ARI">Arizona Cardinals</option>
<option value="ATL">Atlanta Falcons</option>
<option value="BAL">Baltimore Ravens</option>
<option value="BUF">Buffalo Bills</option>
<option value="CAR">Carolina Panthers</option>
<option value="CHI">Chicago Bears</option>
<option value="CIN">Cincinnati Bengals</option>
<option value="CLE">Cleveland Browns</option>
<option value="DAL">Dallas Cowboys</option>
<option value="DEN">Denver Broncos</option>
<option value="DET">Detroit Lions</option>
<option value="GB">Green Bay Packers</option>
<option value="HOU">Houston Texans</option>
<option value="IND">Indianapolis Colts</option>
<option value="JAC">Jacksonville Jaguars</option>
<option value="KC">Kansas City Chiefs</option>
<option value="MIA">Miami Dolphins</option>
<option value="MIN">Minnesota Vikings</option>
<option value="NE">New England Patriots</option>
<option value="NO">New Orleans Saints</option>
<option value="NYG">New York Giants</option>
<option value="NYJ">New York Jets</option>
<option value="OAK">Oakland Raiders</option>
<option value="PHI">Philadelphia Eagles</option>
<option value="PIT">Pittsburgh Steelers</option>
<option value="SD">San Diego Chargers</option>
<option value="SF">San Francisco 49ers</option>
<option value="SEA">Seattle Seahawks</option>
<option value="STL">St. Louis Rams</option>
<option value="TB">Tampa Bay Buccaneers</option>
<option value="TEN">Tennessee Titans</option>
<option value="WAS">Washington Redskins</option>
</select>
<input type="button" value="submit" onClick="games();"/>
</form></div>
<center><span id="gametime">Game Time Remaining</span></center>
<center><span id="hometeam"></span><span id="awayteam"></span></center>
<center><span id="homescore"></span><span id="awayscore"></span></center>
</div>
</body>
</html>
Problematic script is not population fields:
<script>
function games(){
$.ajax({
url: "http://allencoded.com/test3.php",
dataType: 'json',
success: function (data) {
var fetchTeam = $("#team").val(); //value from selection
var homeTeams = [];//home Teams
var visitorTeams = [];//visitor teams
var dayPlayed = [];//day of the game ex.Mon
var homeTeamFull = [];
var visitorTeamFull = [];
var gameTime = [];
var quarter = [];
var visitorScore = [];
var homeScore= [];
for (var i =0; i < data.gms.length; i++){
homeTeams[i]=data.gms[i].h }
for (var i =0; i < data.gms.length; i++){
visitorTeams[i]=data.gms[i].v }
for (var i = 0; i < data.gms.length; i++) {
dayPlayed[i]=data.gms[i].d}
for (var i = 0; i < data.gms.length; i++) {
homeTeamFull[i]=data.gms[i].hnn}
for (var i = 0; i < data.gms.length; i++) {
visitorTeamFull[i]=data.gms[i].vnn}
for (var i = 0; i < data.gms.length; i++) {
gameTime[i]=data.gms[i].t}
for (var i = 0; i < data.gms.length; i++) {
quarter[i]=data.gms[i].q}
for (var i = 0; i < data.gms.length; i++) {
homeScore[i]=data.gms[i].hs}
for (var i = 0; i < data.gms.length; i++) {
visitorScore[i]=data.gms[i].vs}
//for statements to get team user team...
for(i=0; i<homeTeams.length; i++)
{if (homeTeams[i] == fetchTeam || visitorTeams[i]==fetchTeam)
{
$("span#hometeam").html(homeTeamFull[i]);
$("span#homescore").html(homeScore[i]);
$("span#awayteam").html(visitorTeamFull[i]);
$("span#awayscore").html(visitorScore[i]);
$("span#gametime").html(quarter[i]);
}
}
}
});
}
</script>
Maybe because you're not defining the type of the script? Have you tried the following:
<script type="text/javascript">
//code here
</script>
For the tags instead of just <script></script>? Sometimes when you add the type="text/javascript it makes the scripts work because the browser knows what type of script it is when you add that in.
Update:
It is actually working for me on my iPhone with the newest firmware installed (iOS 4.3.5) on Mobile Safari:
加载中,请稍侯......
精彩评论