Why is jquery mobile not rendering all my html or loading javascript?

Question

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.

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: stackoverflow.com/questions/2024486/… — beta
– beta, Commented Dec 9, 2011 at 22:27
@PhillPafford I do not understand. Do you have a link that explains this? — johnny
– johnny, Commented Dec 10, 2011 at 0:53

Leon · Accepted Answer · 2011-12-10 01:02:56Z

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:

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...
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
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...

answered Dec 10, 2011 at 1:02

Leon

4,5521 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leon Over a year ago

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 Over a year ago

if this answers your question, please mark as Answer for the other members! 10x

Collectives™ on Stack Overflow

Why is jquery mobile not rendering all my html or loading javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related