Question

I purchased a theme online, and I believe its using the older jquery mobile instead of the new one.

Right now in my header it looks like this:

<!-- Mobile Tags -->
    <meta content="initial-scale=1.0, user-scalable=no, minimum-scale=1, maximum-scale=1" name="viewport" >
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />   
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- You can put your own logo below linking photos for splash screen-->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/images/touch/apple-touch-icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="assets/images/touch/apple-touch-icon.png">
    <!-- / Mobile Tags -->

    <!-- Splash screens -->
    <!-- iPhone 320x460 -->
    <link href="assets/images/splashscreens/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) 640x920 -->
    <link href="assets/images/splashscreens/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 640x1096-->
    <link href="assets/images/splashscreens/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad 768x1004 / 748x1024-->
    <link href="assets/images/splashscreens/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <link href="assets/images/splashscreens/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (Retina) 1536x2008 / 1496x2048 -->
    <link href="assets/images/splashscreens/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <link href="assets/images/splashscreens/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- / Splash Screens -->



    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.1.min.css" type="text/css">


    <link rel="stylesheet" href="assets/css/jquery.mobile.1.0.1.min.css" />
    <link rel="stylesheet" href="assets/css/add2home.css"><!-- Iphone Bubble  -->
    <link rel="stylesheet" href="assets/css/icons/icons.css" type="text/css" >
    <link rel="stylesheet" href="assets/css/icons/nav-icons.css" type="text/css" >
    <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" > <!-- Theme Style Sheet File -->
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/main.css">


    <link rel="stylesheet" type="text/css" href="assets/css/icons/nav-icons-black.css"> 

To upgrade it to the latest jquery mobile I tried adding these lines to the bottom part of the head but I I messed something up cause buttons became double. It seemed to mess with the css really baldy:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Answer 1

Of course you’ve to delete all the link to the older version of jQuery Mobile like:

<link rel="stylesheet" href="assets/css/jquery.mobile.1.0.1.min.css" />

Moreover, note that the ajax-loader image is no more a .png but a .gif