Response title
This is preview!
- Screen name: yahya Elgoud
yahya Elgoud's Profile
3 Posts
8 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- Hi all,I am planning to get posts from my wordpress site using JSON.. and the posts going to grow each day. my question here is it possible to get the posts as a listview even with large number of items lets say over 1000 items with no crash!If not, then what is the best layout solution to list the posts.note that the posts appears as a title and when click slide a new page with post description.Thanks,
- Hello all,I am testing new mobile app project and fetching data from the server by getJSON(); and the list take some time to be loaded. what i want is loading dialog to appear in the center of the list container. I tried $.mobile.loading but it appears in the middle of the page not inside the list container !here is my code
- <body>
- <div id="home-page" data-role="page">
- <div id="home-header" data-role="header">
- <h1><i class="icon-home"></i> Header</h1>
- </div><!-- /#header -->
- <div id="home-content" data-role="content">
- <ul id="category_list" data-filter="true" data-theme= "a" data-inset="true"> </ul>
- </div>
- <div id="footer" data-role="footer">
- <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
- </div><!-- /#footer -->
- </div>
-
- </body>
- $.ajax({
- url: 'http://api.ihackernews.com/page?count=2&format=jsonp',
- crossDomain: true,
- dataType:'jsonp',
- type:'GET',
- cache: false,
- success: function(data){
- var loading = $.mobile.loading('show');
- $('#category_list').append(loading);
- $(data.items).each(function(index, val) {
- category = '<li><a href="posts.html" onclick="postList('+val.id+', '+val.post_count+')"> \
- '+val.title+' \
- </a></li>';
- $('#category_list').append(category);
-
- });
- }
- });
- Hope someone can help me, I am working on my first jquery mobile app. I am still new on this, I have one index page which includes three data role pages(get category, get posts, get posts content). and using getJSON() to fetch the data from my wordpress website. my problem is the delay of the listview. page appears empty for about 5 seconds then the lists appears in one time. I want the list appears one by one. not waiting for the all list to complete. also I want to know how to do lazy loading for the page. if you have any other solution for my problem. i will be appreciated. hope someone can help me on this. Thanks
-
- <!DOCTYPE html>
- <!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
- <!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <title>Touch Marketing & Advertising</title>
- <!-- the three things that jQuery Mobile needs to work -->
- <link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
- <script src="js/jquery.js" type="text/javascript"></script>
- <script src="js/jquery1.js" type="text/javascript"></script>
- <script src="js/jquery-ui.js" type="text/javascript"></script>
- <script src="js/my_jquery.js" type="text/javascript"></script>
- <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
- <link rel="stylesheet" href="css/style.css" />
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- </head>
- <body>
- <div id="home-page" data-role="page">
- <div id="home-header" data-role="header">
- <h1><i class="icon-home"></i> Header</h1>
- </div><!-- /#header -->
- <div id="home-content" data-role="content">
- <ul data-role="listview" id="category_list" data-filter="true" data-theme= "a" data-inset="true"> </ul>
- </div>
- <div id="footer" data-role="footer">
- <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
- </div><!-- /#footer -->
- </div>
- <!----------------------------SECOND Page(Posts List)--------------------------------------------------->
- <div id="SecondPage" data-role="page">
- <div id="home-header" data-role="header">
- <a href="#home-page" class="ui-btn-right">Back</a>
- <h3>Posts List</h3>
- </div><!-- /#header -->
- <div class="ui-content" data-role="content">
- <ul data-role="listview" id="posts" data-filter="true" data-inset="true"> </ul>
- </div>
- <div id="footer" data-role="footer">
- <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
- </div><!-- /#footer -->
- </div>
- <!-----------------------------Third Page(Post Content)------------------------------------------------------>
- <div id="thirdPage" data-role="page" data-prefetch="true">
- <div id="content-header" data-role="header">
- <a href="#home-page" class="ui-btn-right">Back</a>
- <h1 id="PostTitle">Post Title</h1>
- </div><!-- /#header -->
- <div id="PostContnet" class="ui-content" data-role="content">
- </div>
- <div id="footer" data-role="footer">
- <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
- </div><!-- /#footer -->
- </div>
- <!------------- GET JSON URL---------------------------------------->
- <script type="text/javascript" src="http://touch.ly/api/get_category_index/?callback=ShowCategory"></script>
- </body>
- </html>
-
- /*---------------------------- This FUNCTION TO GET ALL CATEGORIES-----------------------------------------*/
- function ShowCategory(data){
- var output = '';
- $.each(data['categories'], function(k, val){
- output += '<li><a href="#SecondPage" onclick="ShowPosts('+val['id']+')"> \
- '+val['title']+' <span class="ui-li-count">'+val['post_count']+'</span>\
- </a></li>';
- });
- $('#category_list').append(output);
- }
- /*--------------------------------------------THIS FUNCTION TO GET CATEGORY POSTS----------------------------*/
- function ShowPosts(id){
- var postslist = '';
- $.getJSON('http://touch.ly/?json=get_category_posts&id=' + id + '&callback=?', function(data){
- $.each(data['posts'], function(k, val){
- $('#posts').empty();
- var input = val['date'];
- input = input.split("T")[0];
- var date = $.datepicker.parseDate("yy-mm-dd", input);
- var newDateString = $.datepicker.formatDate("dd-mm-yy", date);
- var Post_title = val['title'];
- postslist += '<li><a href="#thirdPage" onclick="CatPostContent('+val['id']+')"> \
- '+val['title']+' <br />\
- <p class="ui-li-aside">'+newDateString+'</p></a></li>';
- $('#posts').append(postslist);
- $('#posts').listview('refresh');
- });
- });
- }
- /*-------------------------------------GET POSTS CONTENT-----------------------------------------*/
- function CatPostContent(id){
- $.getJSON('http://touch.ly/?json=get_post&id=' + id + '&callback=?', function(data){
- var title= '<h2> '+ data.post.title+' </h2>';
- var content = '<p> '+ data.post.content +' </p>'
- $('#PostTitle').html(title);
- $('#PostContnet').html(content);
- console.log(title);
- });
- }
- «Prev
- Next »
-
Moderate user : yahya Elgoud
© 2013 jQuery Foundation
Sponsored by and others.
