Question

For my mobile app I am using jquery mobile with multipage layout (one html, multiple pages). I referenced a footer on all pages with the same footer id. On one of the pages, the footer text is changed. How to propagate this change to all other footers on the other pages of my multipage jquery mobile app.

    <div data-role="page" id="page1">
  <header data-role="header"></header>      
      <div class="content" data-role="content"></div>
  <footer id="myfooter" data-role="footer"</footer>
    </div>
    <div data-role="page" id="page2">
  <header data-role="header"></header>      
      <div class="content" data-role="content"></div>
  <footer id="myfooter" data-role="footer"</footer>
    </div>
    <div data-role="page" id="page3">
  <header data-role="header"></header>      
      <div class="content" data-role="content"></div>
  <footer id="myfooter" data-role="footer"</footer>
    </div>  

On page 2, the user chooses a date, and this date is included in the footer of page2:

    $('#page2' ).bind('pageshow',function(event){   
       var infoFooter = '<center>Date: ' + date_footer + '</center>';
       $('#myFooter').empty().append(infoFooter);
    });

How to propagate this change to all footers on all pages?

Answer 1

You should be able to update all elements on a page by selecting on another aspect of the elements (besides picking by id using the ‘#’ symbol). The idea is to pick based on an attribute / aspect that they all share such as a class you specifically give them.

Something that I have also found successful is to select on attributes that ‘begin with’ ‘something’ which looks like this:

$("[id^=myFooter]").empty().append(infoFooter);

This would find all the elements that have an id that starts with “myFooter”. You might need to bind to something other than #page2 to cause it to work but there’s also the possibility that it will propagate any way.

You can see other examples here of selecting like this.