jquery mobile dynamic page refresh with load method
I want to first thank Mr. Ray Camden for putting up with me with several dumb questions (he's truly awesome ;)
I had tried trigger.('create'), .page(), etc, etc and nothing worked...but just a reference to the data-role, destroy and .page() seemed to do the trick.
Start by creating your jquery mobile main page:
<div data-role="page" id="newsMainPage">
<div data-role="header">
<a href="../index.html" data-role="button" data-inline="true" data-icon="home">Home</a>
<h1>News</h1>
</div>
<div data-role="content" data-content-theme="c">
<div id="status" ></div>
<ul id="newsList" data-role="listview" data-inset="true"></ul>
</div>
</div>
<script type="text/javascript" src="../js/feed.js"></script>
Notice how I have my script tag at the end of the "page" content; the reason I placed it there is because I was having issues before everything loaded on top of my script and didnt' had a chance to 'refresh' all styles.
Now, this is what is inside for my feed.js file
$('#newsMainPage').bind('pageinit', function(event) {
getNewsList();
});
function getNewsList() {
$('#newsList li').remove();
$("#newsList").load("http://localhost/jqm/services/feed.cfm", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#status").html(msg + xhr.status + " " + xhr.statusText);
}
$('#newsList').listview('refresh'); //-- I had the problem where this was outside of function and listview wasn't refreshing...duh (thanks Ray for pointing this obvious thing out ;)
});
};
My details page is a very simple and it looks like this:
<div data-role="page" id="newsContentPage">
<div id="loader"></div>
</div>
And the feeddetail.js it's A LOT simpler:
// detail page with live pageshow
$('#newsContentPage').live('pageshow', function(event) {
var id = getUrlVars()["link"];
getNewsDetail(id);
});
function getNewsDetail(id) {
$('#loader').empty().html('
');
$('#loader').load('http://localhost/jqm/services/feed.cfm?type=detail&link='+id,function(data){
$( "div#newsContentPage[data-role=page]" ).page( "destroy" ).page();
});
};
// code from the web (use to parse urls)
function getUrlVars() {
var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{ hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }
at last, my coldfusion page is just querying a feed (in this case Ray Camden's) and I'm just passing the link as the ID.
Notice how I just put different parameters to create a Query of queries (qoq) to display either the list or the details:
<cfparam name="url.link" default="" />
<cfparam name="url.type" default="" />
// Ray's awesome blog feed
<cffeed action="read" source="http://feeds.feedburner.com/RaymondCamdensColdfusionBlog" query="entries" />
<cfquery dbtype="query" name="rs">
select title, publisheddate, rsslink, content from entries where 0=0
<cfif trim(url.link) neq "" >
and upper(rsslink) = <cfqueryparam value="#ucase(url.link)#" cfsqltype="cf_sql_varchar" />
</cfif>
order by updateddate desc
</cfquery>
<cfif rs.recordcount>
<cfif trim(url.link) eq ''>
<cfoutput query="rs">
<li class="arrow"><a href="newsdetail.html?link=#rs.rsslink#" data-ajax="false" >#rs.title#</a></li>
</cfoutput>
</cfif>
<cfelse>
<li data-icon="alert"><a href="##">No Records Founds</a></li>
</cfif>
<cfif rs.recordcount gt 0 and trim(url.link) neq '' and trim(url.type) neq '' and trim(url.type) eq 'detail'>
<cfoutput>
<div data-role="header">
<a href="##newsMainPage" data-rel="back" data-icon="back" >back</a>
<h1>#rs.title#</h1>
</div><!-- /header -->
<div data-role="content">
<p>#rs.content#</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer content</h4>
</div><!-- /footer -->
</cfoutput>
</cfif>
While talking to Ray we came to conclusion that this might not be the best way to pass data through ajax.
The prefered method will be to use json and parse individual pieces (separating your logic from design).
But as I needed this for a particular piece on my project, I figured this works and it meets my needs.
Hope somebody finds this useful.
And that's it!
Comments
- Isaac
-
Very nice. But wouldn't the owfloling be preferable?$(document).ready(function() { $('body').hide().fadeIn(2000); });Advantages: no need for an extra tag; and works if JavaScript is disabled as our container element isn't hidden via CSS.
- April 2, 2012, 6:25 AM
- Reply
- Jackp
-
I did something siamlir to my website but noticed the effect of loading does not run well when you have many images and other stuff in the page, also, as usual, the quality in IE sucks at least the way I did it
- April 2, 2012, 6:27 AM
- Reply
- Berbel
-
I placed the code in ehader.php and the single.php's code. Only a text saying tweet' is displayed instead of the whole button. Upon click, it works. But visually, it's not right. I'm confused.You didn't say what to replace with YOUR TWITTER HANDLE..-= Sajib s last blog .. =-.
- April 2, 2012, 9:07 AM
- Reply
- Hugh
-
formatting data is to erase data but if you format it, and then made no cahgnes, there is possible way to recover them, just go to the nearest data recoverer center, and they could recover yours but if you do any other commands, like formatting again, or copy files on it I HAVE TO TELL YOU, I am very so sorry
- April 2, 2012, 10:02 AM
- Reply
- Aman
-
I'm curious to find out what blog ysstem you are working with? I'm experiencing some minor security issues with my latest website and I would like to find something more risk-free. Do you have any recommendations?
- April 2, 2012, 10:24 AM
- Reply
- Auth
-
I have a couple teosqiuns about your Clearview theme. I am not a designer so please bear with my lack of knowledge. I need to create a new website for my company (we compose music and sound effects for games) and I'm interested in possibly using Clearview. So my teosqiuns are the following: 1) Music functionality: Is Clearview able to accomodate auto-playing music files when you land on a page. For the site I'm planning to build, I'd like to have the ability to have music auto-playing when you reach the homepage and possibly different music auto-playing when you reach other pages, as well as the ability for the user to toggle music on/off 2) On the homepage, you have a window with rotating images. Can that rotating image be hyperlinkable on each image OR can there be a text overlay created that is hyperlinkable to other pages?Eric
- April 2, 2012, 11:41 AM
- Reply
- Ravinder
-
Now I can see the problem loud and clear Lily, The %SUB-IMAGES% token is not meant to be used in an image tag's orusce attribute. Instead it should be the only thing on its line of code. This is because the %SUB-IMAGES% token needs to possibly make more then one image tag, if you want to style the sub images, I would recommend wrapping the %SUB-IMAGES% token with a div tag that has a specific class. Also each sub image will automatically be wrapped in the appropriate anchor tag for the LightBox.Example:<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> <div class="catablog-items-sub-images"> %SUB-IMAGES% </div> </div> <h3 class='catablog-title'>%TITLE%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div></div>I hope that has helped, cheers!
- April 2, 2012, 12:14 PM
- Reply
- Lisa
-
diyor ki:My wife and i were quite happy when Emmanuel managed to do his iuiqnry through your ideas he gained through your weblog. It is now and again perplexing to just happen to be offering guidance that many some other people may have been trying to sell. We really acknowledge we now have you to appreciate for this. All the illustrations you've made, the easy site menu, the friendships you can help to promote it's got most wonderful, and it's really facilitating our son and our family recognize that this matter is exciting, which is certainly very vital. Thank you for the whole lot!
- April 2, 2012, 1:02 PM
- Reply
- Shefa
-
Hi Zach,I've followed this atherd (and other ones) but couldn't solve my LightBox problem.It worked fine till couple of weeks. Since then few things happened: 1. LightBox was gone 2. I'm almost positive that the fonts were changed could it be?Today I also updated the Catablog plugin as well to the latest.I made sure jQuery selector is set to .catablog-image I tried few templates (default) you've posted above.I'm currently using this: %MAIN-IMAGE% %SUB-IMAGES% %TITLE% [%PRODUCT-CODE%] %DESCRIPTION% %BUY-NOW-BUTTON%Can you assist on this please?Thanks,Dave
- April 2, 2012, 1:26 PM
- Reply
- Romeo
-
ZachIt looks like the main catalog page and cogrtaey pages might be using different stylesheets. The Category pages seem to look fine and mirror the styles in my WordPress theme, but the page with the entire catalog presents the text in a different font (the main catalog page displays in a serif font similar to Times New Roman, and the cogrtaey catalog pages display in a sans-serif font similar to Arial). Any ideas if this a a setting I can fix in Catablog or if it is a theme issue?
- April 2, 2012, 3:16 PM
- Reply
- Kim
-
BTW I also tried<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> <div class="catablog-items-sub-images"> %SUB-IMAGES% </div> </div> <h3 class='catablog-title'>%TITLE%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div></div>with no luck
- April 2, 2012, 4:04 PM
- Reply
- Guido
-
diyor ki:Hey I know this is off topic but I was wondering if you knew of any wegdits I could add to my blog that automatically tweet my newest twitter updates. I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.
- April 2, 2012, 4:30 PM
- Reply
- Mohammed
-
diyor ki:Undeniably believe that which you stetad. Your favorite justification seemed to be on the net the easiest thing to be aware of. I say to you, I certainly get annoyed while people think about worries that they plainly do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects , people could take a signal. Will likely be back to get more. Thanks
- April 2, 2012, 5:24 PM
- Reply
- Amin
-
diyor ki:There are a handful of snfcinatiag points in time in this article but I don't know if they all center to heart. There's some validity but I most certainly will take hold opinion until I explore it further. Good post , thanks and now we want far more! Added onto FeedBurner in addition
- April 2, 2012, 9:49 PM
- Reply
- Daniela
-
HiThank you so much for the fantastic toturial, it is so clear and I wish I had found it sooner.I adapted your toturial slightly and used it with the templates I had already made for my website and it has worked very well, just a little more styling to do and then it will go live.I couldn't have done it without your great instructions.Thank you.
- April 3, 2012, 3:53 AM
- Reply
- Bouchta
-
Such a plugin is psloibse. Off the top of my head, this would require adding a field in the comments table to store the location of the image.Do you intend to use your existing set of post avatars or images uploaded to a different location?But with plugins like and even built-in gravatar support in WordPress 2.5 I don't think such a plugin is really all that necessary.
- April 3, 2012, 5:21 AM
- Reply
- Nima
-
You have the monopoly on useful information-aren't monopolies illgeal? ;)
- April 3, 2012, 6:44 AM
- Reply
- Juto
-
I am really enyjoing the theme/design of your website. Do you ever run into any browser compatibility issues? A small number of my blog audience have complained about my site not operating correctly in Explorer but looks great in Chrome. Do you have any recommendations to help fix this problem?
- April 3, 2012, 7:48 AM
- Reply
