0

Using Jquery mobile for the first time for the basis for a web app...

I have an <aside> element on all my pages, that I'm only showing at desktop sizes. It currently sits within a <div data-role="page"> on every page.

It displays fine on full page loads but not when pages are loaded in via the default AJAX/HIJAX method - for some reason the content in the <aside> (or in the test below it is a different div that doesn't render correctly) just doesn't show (I can see it in the DOM via Web Inspector, it just isn't being rendered) unless I click refresh.

How do I markup the <aside> so that it persists across HIJAX page loads?

Here's a test url: http://benfrain.com/test/

If you click 'slat 1' under 'Header 1', you'll see the page (stage2.html) load in. However, if you click 'refresh' on that page you'll see what should have displayed.

Oddly however, once you have refreshed stage2.html, clicking the 'slat 1' under 'Header 2 on that page loads in stage3.html correctly and retains everything as it should be.

Ben Frain
  • 2,510
  • 1
  • 29
  • 44
  • What CSS is applied to the ` – Jasper Aug 30 '12 at 18:07
  • Hi Jasper, just added a test url in the original post. Hope that helps you help me! – Ben Frain Aug 30 '12 at 21:13
  • I see what you mean, but this is non-standard jQuery Mobile code so I'm not sure what's going on. What code is responsible for creating the second view-able page (the one on the right)? – Jasper Aug 30 '12 at 22:30
  • Hi Jasper, each html page just follows the same conventions as the jquery mobile homepage with two mobile 'pages' side by side within a single HTML page. One has a style of .content-first and the other .content-second. Each page also has the ` – Ben Frain Aug 31 '12 at 08:44

0 Answers0