How To Get Json Data into Jquery Mobile Application

jquery json cordova jquery-mobile

27,908

Working jsFiddle example: http://jsfiddle.net/Gajotres/8uac7/

$(document).on('pagebeforeshow', '#home', function(e, data){      
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});


var ajax = {  
    parseJSONP:function(result){
        $.each( result, function(i, row) {
            $('#movie-data').append('<li><a href="#headline"><img src="http://www.incine.fr/media/photos_films/original/1285_4bc92529017a3c57fe00ee84_1293130970.jpg" class="ui-li-has-thumb"/><h3>' + row.original_name+ '</h3><p>' + row.overview+ '</p></a></li>');
        });
        $('#movie-data').listview('refresh');
    }
}

In your case, just change dataType: "jsonp" to dataType: "json".

EDIT :

document ready should not be used with a jQuery Mobile. Usually it will trigger before a page is loaded into the DOM.

This can be fixed with an appropriate jQuery Mobile page event, like this:

$(document).on('pagebeforeshow', '#home', function(){      
  
});

More information about page events and how they work can be found in this ARTICLE, to be transparent it is my personal blog. Or find it HERE.

$.getJSON vs $.ajax

I prefer $.ajax because it works better with jQuery Mobile, specially if you need to show/hide ajax page loader or do a cross domain call like in my example. But all together it is the same.

27,908

Author by

Kuthay Gumus

some people dreams, some people do.

Updated on June 15, 2020

Comments

Kuthay Gumus almost 4 years

I'm making basic "news" application in dreamviewer with Jquery Mobile.

I made all design but now its time to get the Json data from my api server into my application.

Here is my api server link ; f.e. "http:/mywebapiurl"

i think i need to write Jquery function about getJson but i dont know how to make it ?

How will i put it in to my listview with small article picture, articletitle and articleheadline ?

Here is sample of my listview which i'm going to show the news coming from Json.

<body> 
<div data-role="page" id="home">
<div data-role="header">
    <h1>Post Mobile</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" data-inset="true">
                     <li><a href="#headline">
         <img src=ArticlePicture" class="ui-li-has-thumb"/>
         <h3>ArticleTitle</h3>
         <p>ArticleHeadline</p>
                     </a></li>
                </ul>       
</div>
      <div data-role="footer"  data-position="fixed">
      <h4>&copy; funky app </h4>
</div>

here is the code sample i tried ;

    <script>
  $(document).ready(function() {
   $.getJSON("http://mywebapiurl", function(data) {
      var result= "";
      $.each(data.LatestNews, function(index, value) {
result+= "<ul><li><a href='#'><h3>"+value.TITLE+"</h3><p>"+value.SPOT+"</p></a></li></ul>"; 
});
    $("#articleContainer").html(result);
})
});
</script>

waiting your answer.

Thank you very much.