Jquery Mobile persistent footer - change content on all pages

Question

I have a problem with persistent footer on my page. I am creating a web app with Jquery Mobile.

link to my project site When I click the Add1 button my footer updates"Order(1)" and increments, but when I navigate to the second page I only see "Order" and no number.

My question is, how can I fix that?

I want to keep the same footer for all pages.

Answer 1

I viewed your Project site and your code has some Bugs. Ill explain one by one.

You are using the same ID name (objednavka) more than once. The ID name must be unique in a document and not used more than once.

If you want to update many elements that have the same name use class instead.

You don't need to use pagebeforecreate as you have a multi-page template (many pages) in one document and only the first gets loaded at pageload. You need to create all the navbars at once to update the Orders and the totals simultaneously.

To add 1 to a variable a better method is to use plus plus (myvar++)

Instead of Updating the whole Order button again that includes the (Order) text when you click Add 1 use a span with a class="objednavka" next to Order and update the new number there.

We don't use $(document).ready(function() { in Jquery Mobile as its a framework and has its own events. Instead use any of these variety of JQM events as you need them. http://api.jquerymobile.com/category/events/

Another nice guide for Jquery Mobile Page events can be found here. http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

trigger create has deprecated and not used anymore although it still works. You don't need to use it in you code.

Demo

http://jsfiddle.net/fq8hp6rw/

Your new code

 $('<div>').attr({'data-role':'footer','data-theme':'a','data-position':'fixed','data-
 id':'footer', 'data-tap-toggle': "false"}).append('\
 <div data-role="navbar">\
 <ul>\
 <li class="lii"><a href="#mypanel" data-icon="shop">Order (<span class="objednavka">0</span>)</a> 
 </li>\
 <li><a href="#ucet" data-icon="gear" >My acc</a></li>\
 </ul>\
</div>').appendTo('#jidlo, #napoje, #ucet');    

var cisloKliku = 1;

$( document ).on( 'click', '.button', function () {

    $( ".objednavka" ).text(cisloKliku)

        cisloKliku++;
    });

HTML changes

<h2 class='ucet_nadpis'>Moje objednávky: <span class="objednavka"></span></h2>