Jquery Mobile persistent footer - change content on all pages -
i have problem persistent footer on page. creating web app jquery mobile.
link project site when click add1 button footer updates"order(1)" , increments, when navigate second page see "order" , no number.
my question is, how can fix that?
i want keep same footer pages.
i viewed project site , code has bugs. ill explain 1 one.
you using same id name (objednavka) more once. id name must unique in document , not used more once.
if want update many elements have same name use class
instead.
you don't need use pagebeforecreate have multi-page template (many pages) in 1 document , first gets loaded @ pageload. need create navbars @ once update orders , totals simultaneously.
to add 1 variable better method use plus plus (myvar++)
instead of updating whole order button again includes (order) text when click add 1 use span class="objednavka"
next order , update new number there.
we don't use $(document).ready(function() {
in jquery mobile framework , has own events. instead use of these variety of jqm events need them. http://api.jquerymobile.com/category/events/
another nice guide jquery mobile page events can found here. http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/
trigger create
has deprecated , not used anymore although still works. don't need use in code.
demo
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>
Comments
Post a Comment