CODEWITHSUNDEEP
phpmysqljsoncordova
xzibit
xzibit

Reputation: 3487

Fetching web content into Apache Cordova/Phonegap Application using JSON

Hello Folks at Stackover Flow from all over the world! Hope all is well with everyone :-).

My request is the following one:

I'm trying to fetch web content into my Cordova/Phonegap Application using JSON but there's something that is going wrong which I can't figure out. I'm trying to display data as a listview. Here's the code I'm using:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script> 
        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {        
            webdata();
        }); 

         function webdata() {      
         var listdiv = $("#webdataul");
         $.getJSON("http://seekrr.com/canvas/photo.php", function(json){
            $.each(json, function(data){ //The change you requested was made here.
            listdiv.append("<li id='" + data.id + "' class='barlist'><span class='barname'>" + data.name + "</span><span class='address'>" + 
                data.email + "</span></li>";

                });      

            });  

            }           
        </script>
    </head>
    <body>

    <div id="webdata">

    <ul id="webdataul"></ul>   

    </div>     

    </body>
</html>

The Web server content (web service) is on this link http://seekrr.com/canvas/photo.php and I only want to display id, name and address from the php server file. Can anyone of you guide me through this. When I build the app on cordova with android platform added.. I am only getting a blank screen with no web content rendered. THANK YOU.

Upvotes: 0

Views: 3171

Answers (1)

Burak Ozdemir
Burak Ozdemir

Reputation: 5332

If you check the console log you will see that you have a syntax error in your append method, you forgot a closing bracket, also the url gives you Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://seekrr.com/canvas/photo.php. This can be fixed by moving the resource to the same domain or enabling CORS error. The error defines you the problem.

On the other hand with the datatype jsonp, you can access that content but if you are the owner of that website you need to rearrange the output there as jsonp does not work with json formatted results. So the output must be rearranged either you need to change datatype as json again fix the cors error.

This is how you can access with jsonp:

$(function() {      
    var listdiv = $("#webdataul");
    $.ajax({
        url: "http://seekrr.com/canvas/photo.php",
        dataType: 'jsonp', 
        success:  function (data) {
            $.each(data, function(i, item){
            listdiv.append("<li id='" + item.id + "' class='barlist'><span class='barname'>" + item.name + "</span><span class='address'>" + 
            item.email + "</span></li>");
            });  
        }
    });          
});

Upvotes: 1

Related Questions