I spend about all the after noon looking to solve that issue (I work with jQuery mobile 1.4.5).
I dynamically create a menu at the footer, this way:
$(document).on("pagebeforecreate", function(event) {
var $maPage = $(event.target);
var html = '<div data-role="navbar">'
+ '<ul id="menu">'
+ '<li><a href="#home" data-rel="location" data-icon="location" data-transition="slide"></a></li>'
+ '<li><a href="#graph" data-rel="graph" data-icon="bars" data-transition="slide"></a></li>'
+ '<li><a href="#alarm" data-rel="alert" data-icon="alert" data-transition="slide" id="link-alarm" class="green"></a></li>'
+ '<li><a href="#preferences" data-rel="preferences" data-icon="gear" data-role="button" data-transition="slide"></a></li>'
+ '<li><a href="#info" data-rel="info" data-icon="info" data-transition="slide"></a></li>'
+ '</ul>'
+ '</div>';
// On transforme mon HTML brut en objet jQuery pour le manipuler facillemrnt
var $navBar = $(html);
// On recupère l'Id de la page en cours
var idPage = $maPage.attr('id');
// On recupère le bouton qui corresponf a l'id de la page en cours, pour lui ajouter les classes ui-btn-active et ui-state-persist
//$navBar.find('a[href="#' + idPage + '"]').addClass('ui-btn-active ui-state-persist');
$maPage.find('div[data-role="footer"]').html($navBar);
});
On the alarm link, the is a class green which add a green background when there is no alarm.
I created a temporary function to change the class. It looking at a localStorage variable which is 0 when the is no alarm, and the number increase depending if the amount of the alarms
function checkRed() {
/*
* Journal
*/
ls_journal = JSON.parse(window.localStorage.getItem('journal'));
//alert(ls_journal.length);
if(ls_journal.length > 0) {
//alert('add red');
$('#link-alarm').removeClass('green').addClass("red");
}
else
{
//alert('add green');
$('#link-alarm').removeClass('red').addClass('green');
}
}
On the Home page, there is map with the localisation of stations. A MySQL request is requesting the status of the station and when a temperature is too low, an alarm ring, and the alarm link background has to be red.
That's works fine as long as I am on the Home page, but when I move to the other page, the transition does not occur. I mean the Alarm link background remains green with the class green.
Sometime it's red, but mostly of the time is green.
I believe my issue may be related to the Handler, but I tried to call the checkRed()
function on different Handler
$(document).on( "pagecontainertransition", function( event, data ) {
checkRed();
//$('#menu').listview(); // That do not work well
});
$(document).on( "pageshow", function( event, data ) {
checkRed();
//$('#menu').listview(); // That do not work well
});
$(document).on( "pagecontainertshow", function( event, data ) {
checkRed();
//$('#menu').listview(); // That do not work well
});
My goal is really simple but I got so issue to make it working, and I would really appreciate your help
ls_journal = JSON.parse(window.localStorage.getItem('journal'));
When ls_journal is greater than 0, then alarm backgroud link must always be green, from all pages after a transition (pagebeforecreate, pageshow, etc).
And when id is equal to zero, the background must be green.
I really wonder, if there is way to refresh the nav, at certain point of time ? I tried without success
$('#menu').listview()
$('#menu').listview('refresh');
Many thanks for your help