Coming from Flex one of the things I’ve struggled a bit with is passing data between views in my jQuery Mobile applications. The template approach with Mustache worked really well, but it also had a lot of overhead. In fiddling around today I found a more hacky way that seems to work pretty well (though I think the Mustache route is still better). It relies on the fact that the pagebeforeshow method provides a prevPage property as part of its data object. That prevPage property is just a representation of everything in DOM of the previous page. That means it’s relatively easy to use selectors and that object to pass data to the new page.
The setup of my pages is as follows. My first page has a list of breweries, and each brewery page has a list of the beers that brewery uses. When you click on any of the beers, it goes to a form that can be used to rate the beers and provide some extra information about them. My goal was to prepopulate some of those forms with the beer data I already had. For instance I know the beer name, brewery, and style of each beer, so I should be able to prepopulate those, but they change for every beer so it has to be dynamic.
Within each page I defined a hidden div with two span elements with ids that represent the brewery name and brewery location (since they’re the same for every beer). Then within the beer list I have a hidden div that contains the beer name and the beer style. Here’s an example:
<div data-role="page" id="aleasylum" data-theme="e" data-add-back-btn="true">
<div data-role="header">
<h1>Ale Asylum</h1>
</div>
<div style="display:none">
<span id="brewernameinfo">Ale Asylum</span>
<span id="brewerlocationinfo">Madison, WI</span>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Year Round Beers</li>
<li>
<a href="#beerdetails">
<img src="images/hopalicious-thumb.gif" />
<h3>Hopalicious</h3>
<p>5.8% abv. Eleven separate additions of cascade hops give this American pale ale its lush citrus aroma and bold hop flavor without crazy bitterness. Hopalicious is available year round in six packs and on tap throughout the Madison and Milwaukee regions.</p>
<div style="display:none">
<span id="beernameinfo">Hopalicious</span>
<span id="beerstyleinfo">IPA</span>
</div>
</a>
</li>
<li>
<a href="#beerdetails">
<img src="images/madtown-nutbrown-thumb.gif" />
<h3>Madtown Nutbrown</h3>
<p>5.5% abv. Our nutbrown ale is velvety smooth with a rich caramel aroma. We blend seven different malts for just the right touch of sweetness and a creamy finish youÔøΩll really dig. Madtown Nutbrown is available year round in six packs and on tap throughout the Madison and Milwaukee regions.</p>
<div id="info" style="display:none">
<span id="beernameinfo">Madtown Nutbrown</span>
<span id="beerstyle">IPA</span>
</div>
</a>
</li>So in order to grab that, I just added an event listener to the pagebeforeshow method that uses selectors to grab the data. One of the critical parts is that jQuery selectors have an optional context property that can be set so that jQuery only selects from that context. In this case, since my pages are all using the same id names for the values, I need to set the context so that the selectors are only pulling from the previous page and not the entire document.
$('#beerdetails').on('pagebeforeshow',function(e,data){ var beername = $('.ui-btn-hover-e #beernameinfo',data.prevPage).text(); var brewername = $('#brewernameinfo',data.prevPage).text(); var brewerlocation = $('#brewerlocationinfo',data.prevPage).text(); var beerstyle = $('.ui-btn-hover-e #beerstyleinfo',data.prevPage).text(); $('#beername').val(beername); $('#brewername').val(brewername); $('#brewerlocation').val(brewerlocation); $('#beerstyle').val(beerstyle); });
The code above executes before anything gets displayed on the new page, grabs the values from the first page with the hidden div tags, and then sets some of the form fields to those new values.
It strikes me as a bit odd that there isn’t an easier way to do this, so it could be that I’m just not googling the correct thing and jQuery Mobile has something built-in to help with this issue. It does seem like this can be done by using URL variables, but what I like about this approach is that it’s a bit more semantic and there’s no required parsing of the URL string.
Tweet
