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!

jquery mobile dynamic page refresh with load method

Categories