Basically when I hit the first page and click on the button, it should display the first 2 dynamic posts. Unfortunately no post is displayed until I hit the refresh button on my browser before the first 2 posts appears.
I have spent hours trying to figure out what I am missing in this code:
$(document).ready( function () {
var data = $.getJSON("http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories", function(data) {
var $postsList = $('#postlist'),
$loadMore = $postsList.parent().find('.load-more'),
currentPage = 0,
postsPerPage = 2;
var showMorePosts = function () {
var offset = currentPage * postsPerPage,
posts = data.posts.slice(offset, offset + postsPerPage);
$.each(posts, function ( i, val ) {
$('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('').appendTo($postsList);
});
if( posts.length !== postsPerPage ) {
$loadMore.hide();
}
currentPage++;
$postsList.listview('refresh');
};
$postsList.listview();
showMorePosts();
$loadMore.on('click', showMorePosts);
});
});
HTML:
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My Devotion">
<div data-role="listview">
Daily Devotional Messages
</div><!-- links -->
</div><!-- page -->
<!-- Page: Daily Devotional Messages -->
<div id="devotion" data-role="page" data-title="My Devotion">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Daily Devotional Messages</h2></div><!-- header -->
<ul data-theme="d" id="postlist"> </ul><!-- content -->
<div class="load-more">Load More Posts...</div>
</div><!-- page -->
Also seeing this error:
Uncaught TypeError: Cannot read property 'jQuery1101005234554712660611' of undefined
I notice you are not adding callback parameter "callback=?" to your json request url, It shouldnt matter if your code is from the same server.
also, the "#postlist" is empty, it doesnt contain any li elements,
the error is caused when "$postsList.listview();" is called.
maybe because your ul is empty.
You can inspect element the "#postlist" to find it empty
Related
I am working with a free responsive web template that I have edited to make a small portfolio site for a friend. The issue that I am having is that when I choose a specific image gallery and view in the Fancybox window, it will continue to click through all of the images, and not just the ones in that specific gallery.
I have been searching and found this solution (https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o), but I don't really have a knowledge of javascript so I'm unsure if this would work for me or how to implement it into the template's code. I've included a portion of the html and what I believe is the related js below:
HTML
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Photography</li>
<li>All Images
</li>
<li>People
</li>
<li>Places
</li>
<li>Things
</li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 people">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="John" href="_include/img/work/full/people-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/people-01.jpg" alt="Print Number 1–10">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 things">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Garden Wall" href="_include/img/work/full/things-07-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/things-07.jpg" alt="Print Number 1–22">
</li>
<!-- End Item Project -->
JS
BRUSHED.filter = function() {
if ($('#projects').length > 0) {
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
Any insight would be greatly appreciated and please let me know if I need to give anymore information.
Thanks!
Your live link was really helpfull to try something.
Nice presentation, by the way.
So... The solution to your issue was, like I said in comments yesterday, to change the data-fancybox-group attribute... And you have to do it on click of a category link.
The pictures IN the selected category must NOT be in the FancyBox group "gallery"... But in a "selected" gallery. Only pictures with the same gallery name as the one that was clicked to trigger FancyBox will then be displayed.
Here is the code I added:
// find the clicked category
var fancyBoxClassToShow = $(this).attr("data-option-value");
// reset all data-fancybox-group (in case of a previous selection)
$("#thumbs").find(".item-thumbs").each(function(){
$(this).find("a").attr("data-fancybox-group","gallery")
});
// change all data-fancybox-group that IS a child of the clicked category
$("#thumbs").find(fancyBoxClassToShow).each(function(){
$(this).find("a").attr("data-fancybox-group","gallerySelected")
});
I added only these lines in your $optionLinks.click function, right above var $this = $(this);.
And that's it.
See CodePen here.
So I've been building a site based off a template I found online, a would appreciate any help getting it to function how I want it to. Currently its set up with filters that allow you to sort through multiple thumbnails. However I want the links that currently act as "filters" to instead replace the div where all the thumbnails show up.
I've searched around here looking at jQuery, to replace div content, including replacing the contents of the div, and hiding divs and showing them on click. Nothing I seem to do works though.
Ideally, I'd wrap the current UL in a div named "designprojects" and then when I click a filter that div gets replaced with a new one that has project info in it.
Here is the current HTML and Javascript that the site uses to make the filters function:
filter = function() {
if ($('#projects').length > 0) {
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Projects</li>
<li>All Projects</li>
<li>Starbucks CSR Project</li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul class="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 StarbucksCSR">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/url.jpg" alt="Project info">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
To recap, when I click "All Projects" I want to see thumbnails that I can click and make full screen (current function, also want this to be the default).
When I click a project name, I want the div that holds all the thumbnails to be replaced with a paragraph about the project, and additonal thumbnails that can be clicked to extend to full screen.
My current progress can be seen at www.codyshipman.com
Look in the jQuery's .html() function. If you want to replace content of a <div> element, pass the new content as parameter to the .html(newContentAsString) function, for that <div> element. Look at the documentation for more info.
I'm writing a very simple app in PhoneGap + jQuery Mobile.
The aim is to become more confident in writing PhoneGap applications.
The app is very simple: it has an HomePage with a navbar.
The navbar has three buttons: Contacts, Calendar and Docs.
The buttons manage three tabs in the <div data-role="content"> element.
I have hidden those three tabs.
When the user tap on the navbar, I can navigate through the tab correctly.
Now, the problem: I successfully load the Contacts in the first tab but, when I navigate to it, I see only the dividers!
Instead, if I do not hide the Contact tab in the home, I can see the contacts correctly.
I'd like to load all the data while the user is still in the home page. So, while he decide what to do, the app should has enough time to load them.
The following screenshots show what I mean:
Why does this happens?
If you need my code, here it is (only significant part! ;) )
HTML:
<!-- Home jQueryMobile page -->
<div data-role="page" id="homePage" data-dom-cache="true">
<!-- Header -->
<div data-role="header" id="homePageHeader" data-position="fixed">
<h1>Frankie App</h1>
</div>
<!-- android style navbar. If the device is not an android, it
will not be shown -->
<div data-role="navbar" id="androidNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
<!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
<div data-role="content">
<div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
<div id="tabs">
<div id="homeTab">
<p align="center">
<img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
</p>
</div>
<div id="contactsTab">
<h1>Contacts</h1>
<ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
</ul>
</div>
<div id="calendarTab" hidden>
<h1> Calendar </h1>
</div>
<div id="docsTab" hidden>
<h1> Documents </h1>
</div>
</div>
</div>
<!-- Footer -->
<div data-role="footer" id="homePageFooter" data-position="fixed">
<!-- iOS style navbar. If the device is not an iPhone, it
will not be shown -->
<div data-role="navbar" id="iOSNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
</div>
</div>
JS:
$('#homePage')
.bind('pageinit',
function(){
//Comment the next line to remove the logger from the home page
$("#homeLogger").show();
$("#homeLogger").text("jQuery Initialized");
//Registering to PhoneGap/Cordova lifecycle events
$(document).bind('deviceready', initialize)
});
// ============ //
// Initializers //
// ============ //
function initialize()
{
$("#homeLogger").text("device ready");
initNavBar();
initContacts();
}
function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
navbar = $("#androidNavBar");
$("#homeLogger").text("show Android navBar");
} else {
//If the platform is not an android, I keep the bottom
//navbar because I prefer its look
navbar = $("#iOSNavBar");
$("#homeLogger").text("show iOS navBar");
}
if(navbar) //safety check to avoid null reference.
navbar.show(); //jQuery show() method
}
function initContacts(){
$("#homeLogger").text("loading contacts...");
var contManager = new ContactManager();
contManager.getAllContacts(["id", "name"],
function(retrievedContacts){
for(var i=0; i<retrievedContacts.length; i++){
var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
$("#contactList").append(toAppend);
$("#homeLogger").text("element appended "+i);
}
$("#homeLogger").text("element "+$("#contactListview"));
$("#contactList").listview('refresh');
$("#homeLogger").text("list refreshed");
},
function(error){
$("#homeLogger").text("error: "+error);
});
}
// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
$("#homeLogger").text("Selected Tab: "+tab);
$("#tabs").find("div").hide();
$("#"+tab.id).show();
}
Thank you very much for your help.
Rik
Have your tried to recreate the content page after dynamically adding content?
$('[data-role="content"]').trigger('create');
I gues your should do this b4 refreshing your ListViews (but after your for-loop has finished).
I'm bringing external data via JSON for my app. The loading of data is OK.
The problem is when I display this data. I have this page:
<!-- cinema -->
<div data-role="page" id="cinema">
<div data-role="header">
<h1>WGBN Cinema Salvador</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d" id="programa">
</ul>
</div>
</div>
and this javascript to this page:
$(document).delegate("#cinema", "pageinit", function(data) {
// loop nas salas
$.each($.objCinema, function(key,value) {
$("#programa").append('<li data-role="list-divider">'+value.sala+'</li>').trigger('create');
$.each(value.filmes, function(a,b) {
$.each(b, function(c,d) {
$("#programa").append('<li>'+d+'</li>').trigger('create');
});
});
});
});
And even using .trigger("create") elements inserted in the page are not being styled by jQuery Mobile, I'm doing something wrong?
Try this -
$("#programa").listview("refresh");
/edit
I forgot to mention to try this listview refresh after your inner for each loop.
I need help. I can't find my mistake. For some reason I get duplicate li when I append a ul. I created an AJAX search that searches for results upon keyup. The problem is that when I leave the page, for example if I click on profile and come back, if I search the same keyword, I get duplicate results. Which is very weird because I empty() my ul before typing anything in. It might be something very simple but I cannot find it.
Here is my jQuery that appends my ul:
$(document).delegate("#search", "pageshow", function() {
$("#search input").focus(function() {
$("ul#search_list").empty();
$(this).val("");
localStorage.search = "";
});
$("#search input").keyup(function() {
$("ul#search_list").empty();
localStorage.search = $("#search input").val();
var result = "";
$.ajax({
url: '/app/users/search/'+localStorage.search,
dataType: 'jsonp',
jsonp: 'jsoncallback',
success: function(data) {
$.each(data, function(i,item){
var result = '<li><a href="#friend_profile" class="friend_profile" data-search_user_id="'
+ item.id +
'"><img class="round" src="'
+ item.picture + '" /><h3>'
+ item.name +
'</h3><p>' + item.location + '</p></a></li>';
$("ul#search_list").append(result);
$("ul#search_list").listview('refresh');
});
},
error: function(){
$("ul#relationships_list").text('Sorry, you dont seem to have any friends.');
}
});
});
});
Here is the HTML ul that is being appended:
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<a data-rel="back">Back</a>
<h1>Search</h1>
Settings
</div><!-- /header -->
<div data-role="content">
<ul id="search_list" data-role="listview" data-filter="true">
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Dash</li>
<li>Points</li>
<li>Claim</li>
<li>Search</li>
<li>Profile</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
Here is a screenshot of what appears. In case you want the visual:
Thanks everyone!
I had that issue once where I cleared the results on page hide. I'm not sure what version of JQueryMobile you're using, but I had this issue in 1.0. The ajax event doesn't seem to destroy the page on pagehide, so I had to remove the elements on pagehide. I don't know if this helps.
None of these options worked. But I found a quick fix that removes duplicates in a ul. It is the only thing that has worked so far. Here is a link to the solution:
jquery remove duplicate li