ajax loading data to my phone web browser

**cnjiru** · 01-05-2013 10:08 AM

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.

**Sup3rkirby** · 01-05-2013 05:16 PM

First things first, and I hate when I have to say this but please use one of the code tags when pasting source code on the forums.

Now, could you please elaborate on what issues you are having with mobile? Which mobile devices have you tested and which of those do not work? I have just successfully run this code on mobile safari (iPhone) with no issues. So this brings me to ask if it is only certain mobile devices (or browsers) with the issue and if so, which ones?

Not every mobile device supports AJAX for starters. Most (if not all) smartphones should support it (with at least one of the available browser apps) but on more basic mobile devices I'd imagine you won't really have much success. I'm not a big jQuery user but as far as AJAX goes, there is not any special way to get it to work on browsers/devices that do not support it initially. At best you would need to implement an iframe trick to give the appearance of AJAX, loading additional data via a hidden frame and then grabbing and displaying that data via javascript. Things like that have been done to get around cross-domain AJAX issues and AJAX form submissions/uploads and should work for a scenario like this, though it's really not a great 'solution' to the problem.

**cnjiru** · 01-06-2013 01:38 AM

i have tried this on android mobile device using opera mini and it's not loading data .

**cnjiru** · 01-06-2013 06:19 AM

the ajax is returning data but it's not appending the json data on the table on the mobile browser but works well with desktop browser

Thread: ajax loading data to my phone web browser

Thread Tools

Display

ajax loading data to my phone web browser

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions