I have the following code and I would like to know where to place the code to show the Spinner image every time a Dynamic Post is clicked or when you navigate back to the main List Page:
function initialize() {
var feed = new google.feeds.Feed("http://howtodeployit.com/category/daily-devotion/feed/");
feed.setNumEntries(8);
feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
var posts = '<ul data-role="listview" data-filter="true">';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
posts += '<li>';
posts += '<a href="#articlepost" onclick="showPost(' + id + ')">';
posts += '<div class="ui-li-heading">' + entry.title + '</div>' ;
posts += '<div class="ui-li-desc">' + n_date + '</div>';
posts += '</a>';
posts += '</li>';
}
posts += '</ul>';
// Append each list of posts to #devotionlist in html page
$("#devotionlist").append(posts);
//$("#devotionlist").listview('refresh');
}
});
}
google.setOnLoadCallback(initialize);
I have tried some codes seen but none works for me...
OK I did figure this out the simplest way. I added the following code in the Function that calls and displays each clicked Posts:
function showPost(id) {
$('#articlecontent').html('<div id="ui_loader"><img src="css/images/ajax-loader.gif" class="ajax_loader"/></div>');
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#articlecontent').html(output);
with the following CSS:
#ui_loader {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
.ajax_loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
Note: I took out the opacity from the CSS since the Loader was looking too dark and too white when I increase or decrease the opacity settings, so what I did was to generate a new Loader with transparent background from AJAX Loader Site
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.