2

I have this:

    <title>MyMobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<title>My Mobile</title>

<style type="text/css"> 
    table { width:100%; }
    table caption { text-align:left;  }
    table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
    table th, td { text-align:left; padding:6px;border: inset 1pt} 
</style>

If I go to the page manually my table elements look fine. I can see the borders, etc. If I got the page from another mobile page the page loads ok but the table CSS stuff never get applied. No styles. Hit referesh, styled.

What is going on?

Thank you.

edit: not loading my javascript either. refresh. all works again.

edit: does same if I hit the back button to another page. not everything loads.

johnny
  • 19,272
  • 52
  • 157
  • 259
  • If I understood your question properly the CSS is not displaying on a jQuery-loaded page. I have had the same problem recently and you might want to try something like this. He reloaded the CSS without reloading the entire page: http://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page – beta Dec 09 '11 at 22:27
  • All JavaScript must be in the first page that jQM loads – Phill Pafford Dec 10 '11 at 00:18
  • @PhillPafford I do not understand. Do you have a link that explains this? – johnny Dec 10 '11 at 00:53

1 Answers1

7

Whenever you have A tags, JQM by default uses AJAX to load those pages - and then ignores everything but whatever is included inside the div data-role=page element.

You have 3 options:

  1. You can either tell JQM to always disable AJAX (by setting ajaxEnabled to false) and load pages as "normal browsers" do - this will re-load also all javascript includes, stylesheets, etc...

  2. You can include all the different div data-role=page inside ONE .html page, that way JQM will need to load nothing else when navigating between pages

  3. You can still use AJAX and load external files, but then you'll need to include all your code (HTML/CSS/JS) INSIDE the DIV itself. Note that at this option you'll need to attach to different events (pageinit/beforeshow/show/hide) and not $.ready (since JQM will then take care of that and the DOMContentReady is not actually going to fire.

You can read all about this in the documentation

Hope this helps...

Leon
  • 4,532
  • 1
  • 19
  • 24
  • as always... it depends ;) basically on the number of total pages your app has, how big each one is, and how slow you want your users to navigate between pages. Personally, I find option #2 usually the easiest and most performant – Leon Dec 10 '11 at 02:45
  • if this answers your question, please mark as Answer for the other members! 10x – Leon Dec 11 '11 at 01:04