framework7

Open full view…

Framework7 With Template7

ofoefulechristian
Mon, 09 Jan 2017 10:25:56 GMT

i am actually building a little mobile app for a friend with F7, and i got stock. The app is supposed to search db for users via ajax and when u click on a search result item, it should take to a more detailed page of the searched result been clicked Now i got the ajax to work, and i see a list of users, but the problem is when i click on an item on the list, i want to pass its contents to the next page (details page) without having to query the db again. So i tried using template7 as stated in their tutorial, but its not replacing the data from the url to the results page. Here is what i did. PS ill truly be grateful if anyone can help me out with this Big Cheers Javascript Code for initializing F7 var myApp = new Framework7({ modalTitle: '', // Enable Material theme material: true, template7Pages: true, // enable Template7 rendering for Ajax and Dynamic pages template7Data: { // This context will applied for page/template with "about.html" URL 'url:results.html': { firstname: 'John Doe', lastname: 'Apple', age: 38 }, } }); AJAX CODE WITH RESULTS var query = getAppHost()+'search.php?squery='+encodeURIComponent(searchbox); myApp.showIndicator(); $$.ajax({ url: query, type: "GET", success: function(data, textStatus ){ myApp.hideIndicator(); var userData = JSON.parse(data); var results = '<ul>'; $$.each(userData, function(key, val) { results += '<li id="' + key + '"><a href="results.html?firstname=John&lastname=Doe&age=33" class="item-link item-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">' + val.bizname + '</div><div class="item-after">17:14</div></div><div class="item-subtitle">Price range: '+val.lowprice.toFixed(0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g , "$1,")+' to '+val.highprice.toFixed(0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/ g, "$1,")+'</div><div class="item-text">'+val.location+'</div></div></a></li>'; }); results += '</ul>'; $$('.searchcontainer').html(results); }, error: function(xhr, textStatus, errorThrown){ // We have received response and can hide activity indicator myApp.hideIndicator(); myApp.addNotification({message: 'Something went wrong, please try again: '+errorThrown}); //$$('#loginpass').val(''); } }); HTML VIEW PAGE (RESULTS.HTML) <div data-page="results" class="page"> <div class="navbar"> <div class="navbar-inner"> <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div> <div class="center">Results</div> <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div> </div> </div> <div class="page-content"> <div class="content-block-title"></div> <div class="content-block"> <p>Helloa, my name is {{url_query.firstname}} {{url_query.lastname}}. I am {{url_query.age}} years old.</p> </div> </div> </div>