How to insert variable into jqm pageshow function

Question

I'm not sure if this is possible but I'm wondering how I can pass a page id to a pageshow function as below. I suspect this is the wrong way to go but the answer has alluded me. With this example passing page and appending the page id in pageshow - get #qanda_entry_1 or #qanda_entry_2 etc which correspond to a series of pages in one document.

UPDATED: code as per below from DGS

The page transition is taking place but there is no update or rendering of the page. My data comes from a global variable 'articles_data'. I can't see how the value of 'article' in the click function can be passed to the new page? The alert 'alert(article);' is not being fired on pageshow.

Additionally - this is for a 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 is 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

define the variables outside any function, they will be global and can be used by any function. i.e. `var page = '';` — Omar, Aug 26 '13 at 08:28

DGS · Answer 1 · 2013-08-26T08:12:49.023

0

Use code similar to below. This will give you the id of the element that fired the pageshow event

$('div[data-role="page"]').on('pageshow',function(){
    var page_id = $(this).prop('id');
});

Change your 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 will generalize your pageshow handler without needing to set it dynamically. I am a bit worried about your html since you have referenced two elements by id and an id should only appear on one page at a time.

edited Aug 26 '13 at 08:12

answered Aug 26 '13 at 05:29

DGS

6,015
1
21
37

Thanks for your suggestion. I keep get an error `detailed error: TypeError: $(...).prop(...) is undefined` Also not sure where I should place or replace in my function? – Mitchell Aug 26 '13 at 05:59
Code has been updated. I just want to clarify with you the fact that the pageshow event fires after a page has been shown and is not the method by which you change the page. Meaning every time you click `'.articleLink' you will be binding another function to the pageshow event resulting in many duplicate bindings – DGS Aug 26 '13 at 07:50
Thanks for the update - much appreciated. Unfortunately I will have to take a break from this. I will post back here when I can update my code. – Mitchell Aug 26 '13 at 08:24
Updated my original post and included DGSs code. Still not working as expected – Mitchell Aug 27 '13 at 02:14
Please explain what isn't working is the variable article not what you would expect? is the pageshow handler not being executed? Is the content not being populated properly? – DGS Aug 27 '13 at 02:46
Thanks for getting back to me. I'm no longer using any of this code but the problem still remained that the page would transition but no data would be appended to the elements. – Mitchell Aug 30 '13 at 05:53

How to insert variable into jqm pageshow function

1 Answers1