0

I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/

My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.

I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.

If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!

In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".

Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.

Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.

So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!

Jeppe Schaumburg Jensen
  • 17
  • 5

1 Answers1

0

So, I found a way to fix it, but not really a solution to the original problem.

I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.

Jeppe Schaumburg Jensen
  • 17
  • 5