Reputation: 1127

using jquery mobile with jquery

Hi all I have the following code

<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.js" type="text/javascript"></script>

but for some reason in Chrome and on any android it just crashes the page and at the bottom I just get a "Loading" message

does anyone know why?

thanks

Upvotes: 0

Answers (2)

Gajotres

Reputation: 57309

Solution

Don't use jQuery 2.0 with jQuery mobile 1.3.1

jQuery Mobile is locked to a certain jQuery version range. Use only jQuery 1.7 up to 1.9.X

And you have several errors in your live example.

CSS should be initialized before js files and your HTML tag was missing. Also DIV containing the page must have data-role="page" attribute.

EDIT :

Your final code should look like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="pageHead" data-role="page">
<div id="logo"><img src="images/packerForbesLogo.jpg" width="226" height="106" alt="Packer Forbes" /></div>
  <div id="socMedia"><a href="http://www.pmlive.com/pmhub/healthcare_public_relations/packer_forbes_communications" target="_blank"><img src="/images/socIconPM.jpg" width="35" height="40" alt="PMLive" /></a><a href="http://www.linkedin.com/company/packer-forbes-communications?trk=top_nav_home" target="_blank"><img src="/images/socIconIN.jpg" width="35" height="40" alt="LinkedIn" /></a><a href="https://twitter.com/PackerForbes" target="_blank"><img src="/images/socIconTW.jpg" width="35" height="40" alt="Twitter" /></a><a href="http://www.youtube.com/playlist?list=PL4D83CC0DD394EF97&feature=view_all" target=_"blank"><img src="/images/socIconYT.jpg" width="35" height="40" alt="YouTube" /></a></div>

  <div id="mainNav" role="navigation"> 
  <a href="#nav" title="Show navigation" class="mobileonly">Show navigation</a> 
  <a href="#" title="Hide navigation" class="mobileonly">Hide navigation</a>
    <ul id="nav" class="clearfix">
      <li><a href="/index.html" class="selected">Home</a></li>
      <li><a href="/what-we-do/index.html">What We Do</a>
          <ul>
            <li><a href="/what-we-do/market-access/index.html">Market Access</a></li>
            <li class="navIndent"><a href="/what-we-do/market-access/case-studies.html">Case Studies</a></li>
            <li><a href="/what-we-do/pr/index.html">Public Relations</a></li>
            <li class="navIndent"><a href="/what-we-do/pr/case-studies.html">Case Studies</a></li>
            <li><a href="/what-we-do/medical-education/index.html">Medical Education</a></li>
            <li class="navIndent"><a href="/what-we-do/medical-education/case-studies.html">Case Studies</a></li>
            <li><a href="/what-we-do/digital/index.html">Digital</a></li>
            <li class="navIndent"><a href="/what-we-do/digital/case-studies.html">Case Studies</a></li>
          </ul>
      </li>
      <li><a href="/about-us/index.html">About Us</a>
        <ul>
          <li><a href="/about-us/awards.html">Awards</a></li>
          <li><a href="/about-us/the-team.html">The Team</a></li>
          <li><a href="/about-us/life-at-packer-forbes.html">Life at Packer Forbes</a></li>
          <li><a href="/about-us/our-values.html">Our Values</a></li>
        </ul>
      </li>
      <li><a href="/clients/index.html">Clients</a></li>
      <li><a href="/news/index.html">News</a></li>
      <li><a href="/careers/index.html">Careers</a>
        <ul>
          <li><a href="/careers/training.html">Training</a></li>
          <li><a href="/careers/internships.html">Internships</a></li>
          <li><a href="/careers/benefits.html">Benefits</a></li>
          <li><a href="/careers/current-vacancies.html">Current Vacancies</a></li>
        </ul>
      </li>
      <li><a href="/contact/index.html">Contact</a></li>
      <li><a href="http://downloads.packerforbes.com" target="_blank">Download Centre</a></li>
    </ul>
  </div>
  <div id="mainBanner"><a href="/news/index.html"><img src="images/twentyBanner.gif" alt="We Are Twenty!" width="400" height="80" border="0" class="homeBanner" /></a></div>
  </div>
  
  <div id="mainBody">
    <div id="contentWrapper">
  <p class="brandStrip">&nbsp;</p>
        <div id="mainColumn">
            <!--<h1>Who We Are</h1>-->
            <h2>What We Do</h2>
            <div id="marketAccess"> <a href="/what-we-do/market-access/index.html"><img src="images/marketAccess.jpg" width="160" height="160" alt="Market Access" /></a>
            <h3><a href="/what-we-do/market-access/index.html">Market Access</a></h3>
            </div>
            <div id="communications"> <a href="/what-we-do/pr/index.html"><img src="images/communications.jpg" width="160" height="160" alt="Communications" /></a>
              <h3><a href="/what-we-do/pr/index.html">Public Relations</a></h3>
            </div>
            <div id="medicalEducation"> <a href="/what-we-do/medical-education/index.html"><img src="images/medicalEducation.jpg" width="160" height="160" alt="Medical Education" /></a>
            <h3><a href="/what-we-do/medical-education/index.html">Medical Education</a></h3>
            </div>
            <div id="digital"><a href="/what-we-do/digital/index.html"><img src="images/digital.jpg" width="160" height="160" alt="Digital" /></a>
              <h3><a href="/what-we-do/digital/index.html">Digital</a></h3>
            </div>
            <p class="firstParaHome">Packer Forbes is an award-winning independent healthcare communications consultancy, specialising in medical communications.  Our integrated approach ensures that our clients benefit from a compelling fusion of bespoke market access, public relations, medical education and digital communications approaches, all built on insight developed from years of experience.</p>
            <p class="dividerLong"><span class="dividerLongMore"><a href="/what-we-do/index.html">Find Out More»</a></span></p>
            <p class="mobileindexorgslogos">
                <a href="http://www.hca-uk.org/" target="_blank"><img src="images/logoHCA.jpg" width="102" height="109" alt="HCA" /></a>
                <a href="http://www.emig.org.uk/" target="_blank" class="mobileindexorgslogosemig"><img src="images/logoEMIG.jpg" width="102" height="109" alt="EMIG" /></a>
                <a href="http://www.investorsinpeople.co.uk/" target="_blank"><img src="images/logoIIP.jpg" width="121" height="109" alt="IIP" /></a>
                <a href="http://www.abpi.org.uk/about-us/membership/Pages/general-affiliate-list.aspx#p" target="_blank"><img src="images/abpi_new.jpg" width="102" height="109" alt="IIP" /></a>
                <div class="mobileclear"></div>
            </p>

      </div>
        <div id="sideColumn"></div>
        <p class="brandStrip">&nbsp;</p>
    </div>
</div>
<div id="pageFoot">
    <ul>
        <li>1.09 Harbour Yard, Chelsea Harbour, London, SW10 0XD</li>
        <li>t: +44 (0)20 7036 8550</li>
        <li>f: +44 (0)20 7036 8569</li>
        <li><a href="mailto:[email protected]">e: [email protected]</a></li>
        <li><a href="/contact/cookie-policy.html">cookie policy</a></li>
    </ul>
    <p>Registered office: Packer Forbes Communications Ltd, 1.09 Harbour Yard, Chelsea Harbour, SW10 0XD Registered number: 3753460  </p>

</div>


</body>
</html>

Upvotes: 1

yeyene

Reputation: 7380

If you are using JQM 1.3.1, you can use this 2 script files.

jQuery JavaScript Library v1.9.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.js

jQuery Mobile 1.3.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.mobile.min.js

`Loading` message error

If you want to hide this message, try to use this as soon as on load.

$(document).ready(function() {
    $('.ui-loader').hide();
});