Am working on a project where i query data from fusion table with ajax. my code is working on all desktop web browsers but does not load data on mobile web browsers. This project is meant for mobile users. Please help.
Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IEBC | Registered Voters</title>
<link href="style/mobile.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function(doc) {

var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}

if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}

}(document));
</script>

<script type="text/javascript">
$(document).ready(function(e) {
var getCountyList = function(){
$.ajax({
url: "http://api.iebc.or.ke/county/?token=afd3877583a07e5b77e447332bb98a80",
async: true,
dataType: 'json',
success: function(data){
var counties = data.region['locations'];
$('#county').html("<option value='all'>Select County</option>")
$.each(counties, function(c, county){
$option = $('<option value="'+county.code+'">'+county.name+'</option>');
$('#county').append($option)
getTotals("http://vote.iebc.or.ke/totals/?type=county&name="+county.name, "County",county.name)
})
}
});
}

$('#county').change(function(){
$('#mobile-ps-body').html("")
val = $(this).children("option:selected").val()
getConstituencyList(val)
});

var getConstituencyList = function(county){
$('#constituency').html('<option value="select">Select Constituency</option>').removeAttr('disabled');
$.ajax({
url:"http://api.iebc.or.ke/constituency/?county="+county+"&token=afd3877583a07e5b77e447332bb98a80",
async:true,
dataType:'json',
success:function(data){
$('#constituency').html('<option value="all">All Constituencies</option>').removeAttr('disabled');
var constituencies = data.region['locations'];
$.each(constituencies, function(c, constituency){
$option = $('<option value="'+constituency.code+'">'+constituency.name+'</option>');
$('#constituency').append($option)
getTotals('http://vote.iebc.or.ke/totals/?type=constituency&name='+constituency.name,"Constituency", constituency.name)
})
}
});

}

$('#constituency').change(function(){
$('#mobile-ps-body').html("")
var val = $(this).children("option:selected").val()
var txt = $(this).children("option:selected").text()
getWardList(val)
getTotals('http://vote.iebc.or.ke/ward/?constituency='+txt, "Ward", txt);
});

var getWardList = function(concode){
$('#ward').html('<option value="select">Select Ward...</option>')
$('#mobile-ps-body').html("")
$.ajax({
url: "http://api.iebc.or.ke/ward/?constituency="+concode+"&token=afd3877583a07e5b77e447332bb98a80",
async: true,
dataType: 'json',
success: function(data){
$('#ward').html('<option value="all">All Wards</option>').removeAttr('disabled');
counties = data.region['locations'];
$.each(counties, function(c, wards){
$option = $('<option value="'+wards.name+'">'+wards.name+'</option>');
$('#ward').append($option)
})
}
});
}
var setWardData = function(wtotals){
$.each(wtotals, function(p, pols){
var color;
if(pols.percentage>100){
color="#eeca02"
}
else{
color="#46A24A"
}
var $ps = $("<span></span>");
if(pols.percentage!=undefined){
$ps = $("<div class='result-row'> \
<div class='title'><strong>"+pols.name+"Ward</strong></div> \
<div class='perc' style='color:"+color+"'>"+pols.percentage+"%</div> \
<table> \
<tr> \
<td>Registered: "+pols.registered+"</td> \
</tr> \
<tr> \
<td>Estimated: "+pols.estimated+"</td> \
</tr> \
<tr> \
<td>Population: "+pols.population+"</td> \
</tr> \
</table> \
</div>");
$('#mobile-ps-body').append($ps)
}
//

})
}
var getTotals = function(url, ed, name){
$.ajax({
url: url,
async: true,
dataType: 'json',
success: function(data){
pols = data.results;
if(ed=="Ward"){
setWardData(pols)
}
else{
var color;
if(pols.percentage>100){
color="#eeca02"
}
else{
color="#46A24A"
}
var $ps = $("<span></span>");
if(pols.percentage!=undefined){
$ps = $("<div class='result-row'> \
<div class='title'><strong>"+name+" "+ed+"</strong></div> \
<div class='perc' style='color:"+color+"'>"+pols.percentage+"%</div> \
<table> \
<tr> \
<td>Registered: "+pols.registered+"</td> \
</tr> \
<tr> \
<td>Estimated: "+pols.estimated+"</td> \
</tr> \
<tr> \
<td>Population: "+pols.population+"</td> \
</tr> \
</table> \
</div>");
$('#mobile-ps-body').append($ps)
}
//
}
}
})
}
getCountyList()
});
</script>
</head>
<body>
<div id="mobile-container">

<div id="iebc-title">
<center><a id="logo" href="http://www.iebc.or.ke" target="_blank">Independent Electoral and Boundaries Commission</a></center>
</div><br />
<center>
<div id="mobile-header">REGISTERED VOTERS</div>
</center>
<div id="mobile-body">
<form action="/gadget/" method="POST">
<table>
<tr>
<td class="heading">County: </td>
</tr>
<tr>
<td>
<select name="county" id="county">
<option value="select" selected="selected">Select County...</option>
</select>
</td>
</tr>
<tr>
<td class="heading">Constituency: </td>
</tr>
<tr>
<td>
<select id="constituency" name="constituency" disabled="disabled">
<option value="select" selected="selected">Select Constituency...</option>
</select>
</td>
</tr>
</table>
</form>
<div id="mobile-ps">
<div id="ps-title"></div>
<div id="mobile-ps-body">
</div>
</div>
</div>
</div>
</body>
</html>

Please help.