$().attr not working on second pagebeforechange event
I am using this code to show a week overview of lectures. It is a listview
wich is populated based on the week_id passed to the page using a q
variable in the url e.g. /week.html?q=32
The footer of the page has two buttons to navigate to the previous/next
week, which is the same page. The /week.html?q= is updated using
$("#week_prev").attr("href", '/week.html?q='+ weeknumber_prev);
$("#week_next").attr("href", '/week.html?q='+ weeknumber_next);
$("#text_week").text(week_id);
This code works flawless when I use the pageshow event listener.
Now I prefer to use the pagebeforeshow event listener, because the page is
then updated before the transition start. For some reason when using
pagebeforeshow event the footer href and text are not updated, but the
listview is. Variables are present and valid as I checked using alert()
Any help is very much appreciated.
Javascript
// Get dynamic data for specified week
//
// this is working:
// $(document).on('pageshow','#onderwijs_week', function(e, data){
//
// this isn't
$(document).on('pagebeforeshow', "#onderwijs_week", function (event,
data) {
var parameters = $(this).data("url").split("?")[1];
var week_id = parameters.replace("q=","");
//var week_id = getUrlVars()['q'];
$.getJSON("/json.php",{
section: "onderwijs",
query: week_id
},
function(json){
var mydate = new Date();
weeknumber_next = parseInt(week_id) + 1;
weeknumber_prev = parseInt(week_id) - 1;
week_id = "Week " + week_id;
if (json.onderwijs) {
$("#week_list").empty();
$.each(json.onderwijs,function(i,item){
date2check = new Date(item.date);
if (areSameDate(mydate, date2check)){
$("#week_list").append('<li
data-role="list-divider" role="heading"
data-theme="e">'+item.datum+
'</li><li data-theme="e">'+
'<h5
class="no-ellipsis"><strong>'+item.title
+'</strong></h5>'+
'<p>'+item.speaker+'</p>'+
'<p
class="ui-li-aside"><strong>'+item.time+'</strong></p></li>');
week_id = "Deze Week";
} else {
$("#week_list").append('<li
data-role="list-divider"
role="heading">'+item.datum+
'</li><li>'+
'<h5
class="no-ellipses"><strong>'+item.title
+'</strong></h5>'+
'<p>'+item.speaker+'</p>'+
'<p
class="ui-li-aside"><strong>'+item.time+'</strong></p></li>');
}
});
//
// This is the part failing using
pagebeforechange and is working using pageshow
$("#week_prev").attr("href", '/week.html?q='+
weeknumber_prev);
$("#week_next").attr("href", '/week.html?q='+
weeknumber_next);
$("#text_week").text(week_id);
} else {
$("#week_list").empty();
$("#week_list").append('<li
data-role="list-divider"
role="heading">'+week_id+' 2013'+
'</li><li>'+
'<h5><strong>Nog geen
programma
bekend</strong></h5>'+
'<p>Dit wordt meestal ca 2
weken voor het begin van
de maand
gepubliceerd</p></li>');
$("#week_prev").attr("data-rel", "back");
$("#week_next").remove();
$("#text_week").text(week_id);
}
$("#week_list").listview('refresh');
});
});
HTML
<html>
<head>
</head>
<body>
<!-- Begin Page -->
<div data-role="page" id="onderwijs_week" data-theme="c">
<div data-role="header" data-id="navbar" data-position="fixed"
data-theme="f">
<a href="#main_panel" data-icon="bars" data-iconpos="notext"
class="ui-btn-left" data-transition="slide">Panel</a>
<h1>Onderwijs</h1>
<a href="/colofon.html" data-icon="info" data-iconpos="notext"
class="ui-btn-right" data-transition="fade">Colofon</a>
</div>
<div data-role="content">
<ul data-role="listview" id="week_list" data-dividertheme="c"></ul>
</div>
<div data-role="footer" data-position="fixed" data-id="footer"
data-theme="c" id="week_footer">
<a id="week_prev" href="" data-role="button" data-icon="arrow-l"
class="ui-btn-left" data-iconpos="notext" data-transition="slide"
data-direction="reverse">Vorige</a><h1 id="text_week"></h1><a
id="week_next" href="" data-role="button" data-icon="arrow-r"
class="ui-btn-right" data-iconpos="notext"
data-transition="slide">Volgende</a>
</div>
<div data-role="panel" id="main_panel" data-position="left"
data-display="reveal">
<ul data-role="listview" data-divider-theme="a">
<li data-role="list-divider" role="heading">Hoofdmenu</li>
<li><a href="/home.html" data-transition="slide">Home</a></li>
<li><a href="/content/mp/" data-transition="slide">Medische
protocollen</a></li>
<li><a href="#main_panel">Onderwijs</a></li>
<li><a href="/onderzoek.html">Onderzoek</a></li>
</ul>
</div>
</div>
</body>
</html>
No comments:
Post a Comment