Menu
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>© 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.
481
The jQuery code uses getJSON() method to fetch the data from the file's location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data. The each() function is used to iterate through all the objects in the array.
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.
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.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
