jquery - How to insert variable into jqm pageshow function -
i'm not sure if possible i'm wondering how can pass page id pageshow function below. suspect wrong way go answer has alluded me. example passing page , appending page id in pageshow - #qanda_entry_1 or #qanda_entry_2 etc correspond series of pages in 1 document.
updated: code per below dgs
the page transition taking place there no update or rendering of page. data comes global variable 'articles_data'. can't see how value of 'article' in click function can passed new page? alert 'alert(article);' not being fired on pageshow.
additionally - multipage document.
$(document).on("click",".articlelink",function () { $(this).addclass('clicked_button'); var page = $(this).attr('data-page'); var article = $(this).attr('data-id'); //alert(article); $.mobile.changepage(page, { transition: 'slide', }); }); $('div[data-role="page"]').on('pageshow',function(){ var page_id = $(this).prop('id'); var article = $('.articlelink.clicked_button').attr('data-id').substr(4); alert(article); $('.articlelink.clicked_button').removeclass('clicked_button'); $('#qandahead h1').empty(); $('#qanda_text div').empty(); jquery.map(articles_data, function(obj) { if(obj.id === article){ $('#qandahead').html('<h1>'+ obj.title + '</h1>'); $('#qanda_text').html('<h2>'+ obj.title + '</h2>' + '<p>' + obj.introtext + '</p>'); } }); });
my listview link structure generated dynamically
<li><a class="articlelink ui-link-inherit" data-page="#qanda_entry_0" data-id="art_18"></li> <li><a class="articlelink ui-link-inherit" data-page="#qanda_entry_1" data-id="art_9"></li>
etc
use code similar below. give id of element fired pageshow event
$('div[data-role="page"]').on('pageshow',function(){ var page_id = $(this).prop('id'); });
change code to
$(document).on("click",".articlelink",function () { $(this).addclass('clicked_button'); var page = $(this).attr('data-page'); $.mobile.changepage(page); }); $('div[data-role="page"]').on('pageshow',function(){ var page_id = $(this).prop('id'); var article = $('.articlelink.clicked_button').attr('data-id').substr(4); $('.articlelink.clicked_button').removeclass('clicked_button'); $('#qanda_text div').empty(); $('#qandahead h1').empty(); jquery.map(articles_data, function(obj) { if(obj.id === article){ $('#qandahead').html('<h1>'+ obj.title + '</h1>'); $('#qanda_text').html('<h2>'+ obj.title + '</h2>' + '<p>' + obj.introtext + '</p>'); } }); });
this generalize pageshow handler without needing set dynamically. bit worried html since have referenced 2 elements id , id should appear on 1 page @ time.
Comments
Post a Comment