www.webdeveloper.com
Results 1 to 4 of 4

Thread: ajax loading data to my phone web browser

  1. #1
    Join Date
    Jan 2013
    Posts
    4

    ajax loading data to my phone web browser

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    863
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2013
    Posts
    4
    i have tried this on android mobile device using opera mini and it's not loading data .

  4. #4
    Join Date
    Jan 2013
    Posts
    4
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles