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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -