0

I have looked at some top StackOverflow responses for how to reuse a header. I cannot get them to work.

  1. I have 5 pages
  2. I changePage between each of them
  3. I have hardcoded the same header for all 5 pages, 5 times replication
  4. I listen to document.ajaxStart() and make a loading animated gif appear
  5. I listen to document.ajaxStop() and make the animated gif disappear
  6. The only way I can get this to work accross all 5 pages is to name the img element to id=loading1, id=loading2, id=loading3,id=loading4,id=loading5
  7. If I do not have unique names for the loading images, then only one image works.
  8. Obviously,the solution is to RE_USE the header so that the img id=same_ID_for_ALL_5_pages
  9. Again, both of the top-rated stack overflow answers are too dense/cryptic for me to understand or reproduce.

Question(s):

  1. Can someone please simplify or explain how I can write proper, elegant code given my simple requirements.
  2. And can someone pat me on the back for trying to do simple things with a poorly written library?

Thank you.

Community
  • 1
  • 1
hunterp
  • 15,716
  • 18
  • 63
  • 115
  • Why write all that text and not provide any code? – Evan Trimboli May 17 '13 at 07:11
  • I literally pasted the code from http://stackoverflow.com/questions/11278306/jquery-mobile-one-footer-fragment-for-whole-site and http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg into my app and both failed – hunterp May 17 '13 at 07:12
  • Are your img elements included into every page? – Gajotres May 17 '13 at 07:37
  • Yes, and the same header, repeated 5 times have unique ids. you understand this is wrong, yes? – hunterp May 17 '13 at 07:41
  • 1
    There's an excellent jQuery Mobile selector called $.mobile.activePage. Basically this selector is your active page. Because of it you can have 5 pages with identical content and when you use it it will get you only active page content. You can find it here: http://jquerymobile.com/demos/1.2.0/docs/api/methods.html – Gajotres May 17 '13 at 07:55
  • 1
    it's easier to give the gif image one `.class` instead of 5 unique ids. imagine you have 100 pages, it's hectic to deal with 100 unique ids. Also, you can inject header to each page dynamically without the need to re-write it in each page, here's an example of a `navbar` for 5 pages. http://jsfiddle.net/Palestinian/Qr97Y/ you can do the same for header or any content. – Omar May 17 '13 at 08:53
  • 1
    @Gajotres submit for answer! – hunterp May 17 '13 at 20:40
  • Done and dona, I hope my comment helped you. – Gajotres May 17 '13 at 20:46

1 Answers1

2

There's an excellent jQuery Mobile selector called $.mobile.activePage. Basically this selector is your active page. Because of it you can have 5 pages with identical content and when you use it it will get you only active page content.

More about it can be found here.

intuitivepixel
  • 23,302
  • 3
  • 57
  • 51
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks a lot. You understood my question exactly, and you gave a very insightful answer that actually worked! – hunterp May 17 '13 at 21:18