1

Hello I am stuck with an android application I am trying to build using phonegap. The application I try to build retrieves a feed from a wordpress site which i have installed locally. I have already installed and tested JSON-API plugin and it worked correctly.

But when i created an android application using phonegap with eclipse I do not get the feed loaded via javascript.

I have created an html file under projectfolder/assets/www folder where the code is 

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery.js"></script>
        <script src="cordova.js"></script>
        <script>
                jQuery.support.cors = true;
                var target_div = "#contents";
                var nextID = null;
                var prevID = null;
                var api_read_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&id=";
                var init_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&p=1";
                function getID(url) {
                    var str = new String(url);
                    var x = str.split("=");
                    var id = x[1];
                    return id;
                }

            function readSinglePost (url,target_div) {
                var URL = url+"&callback=?";

                console.log(URL);
                jQuery.ajax({
                        url: URL,
                        dataType: "json",
                        jsonp: null,
                        jsonpCallback: null,
                        success: function(data) {
                            alert(data);
                            jQuery(target_div).html("");
                            try{
                                jQuery(target_div).append("<h1>"+data.post.title+"</h1>");
                                jQuery(target_div).append(data.post.content);
                                jQuery(target_div).append("<small>"+data.post.date+"</small>");
                            } catch (e){
                                console.log("error console");
                            } 
                            try {
                                nextID = getID(data.next_url);
                            }
                            catch (e) {
                                ;
                            }
                            try {
                                prevID = getID(data.previous_url);
                            }
                            catch (e) {
                                ; // you should include some of your own error-handling code or
                            }
                } ,
                        error: function(error){
                            console.log("error console");
                        }
            });
            }
            //Renew next and previous buttons
            function getNext(){
                jQuery("#next").click(function(){
                    var id = nextID;
                    var nextURL = api_read_url + id;
                    readSinglePost(nextURL, target_div);
                });
            }
            function getPrevious(){
                jQuery("#previous").click(function(){
                    var id= prevID;
                    var prevURL = api_read_url + id;
                    readSinglePost(prevURL, target_div);
                })
            }

            jQuery(document).ready(function() {
                readSinglePost(init_url, target_div);
                getNext();
                getPrevious();
            });
        </script>
    </head>
    <body>
        <div id="main">
            <button type="button" id="previous">Previous</button>
            <button type="button" id="next">Next</button>
            <div id="title"></div>
            <div id="contents"></div>
        </div>
    </body>
</html>

When I open this file using firefox and firebug I obtain the following error in the console.

SyntaxError: invalid label
"status": "ok",

I understand what has happened. As it is a crossbrowser interaction json gets sent in jsonp format and thus the json value gets sent wrapped in a function. How can i get the value correctly?

I have read several threads and articles but unfortunately I have found no solution. The example comes from the tutorial included in the book "WordPress Mobile Applications with PhoneGap"

Juan Etxenike
  • 49
  • 1
  • 4
  • If the server is sending it back in JSONP, you need to use a JSONP callback to actually use the data. Please read the answer on this question and see if it makes sense: http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp – MBillau Oct 01 '13 at 13:32
  • Thank you for the answer. According to the answer you provided and reading jquery's docs. I find that I can use the url without adding +"&callback=?"; as long as I define dataType="jsonp" since this definition would add the callback. So that's what I did and yet I get a new type of error [SyntaxError: missing ; before statement - "status": "ok",] – Juan Etxenike Oct 02 '13 at 08:52
  • I'm not sure whats going on, but I'd guess that you are not doing JSONP right. Try this question that seems pretty similar: http://stackoverflow.com/questions/15824421/syntaxerror-invalid-label-using-jquery-ajax – MBillau Oct 02 '13 at 13:03

0 Answers0