Search code examples
jquerycordovajquery-mobilevisual-studio-2015visual-studio-cordova

Jquery mobile page not working in visual studio

EDIT: I remade the project entirely, still not working after update. Visual studio v.14.0.25431.01 Update 3 and Tools for Apache Cordova Update 10. I've tried AVD google android emulator, same thing.

I'm using Visual Studio 2015 v.14.0.24720.00 I made Cordova(v.3.0.0) project in visual studio. Installed Jquery 3.1.0 and JQuery mobile 1.4.5 at tools->NuGet package manager->manage packages for solutions. Then moved files from Content/ to www/css/ and from Scripts/ to www/scripts/ Removed these lines from index.js:

var element = document.getElementById("deviceready");
element.innerHTML = 'Device Ready';
element.className += ' ready';

Just like in this tutorial https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

Here's index.html

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>project name</title>
    </head>
    <body>

        <div data-role="page" id="pageone">
            <div data-role="header">
                <h1>Insert Page Title Here</h1>
            </div>

            <div data-role="main" class="ui-content">
                <p>Insert Content Here</p>
            </div>

            <div data-role="footer">
                <h1>Insert Footer Text Here</h1>
            </div>
        </div> 

        <script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.mobile-1.4.5.min.js"></script>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

Also index.css is empty.

I've made a Cordova project fine before, I just got this problem this time when I tried to make new project with latest jquery-libraries. When I run this on Ripple-emulator, the page doesn't load jquery-mobile css and functionality. It only shows text as it is with h1-tags bigger like it should.

And I get this error

Uncaught TypeError: Cannot read property 'concat' of undefined
jquery.mobile-1.4.5.min.js (4,5780)
Solution

  • Struggled with the same issue. Seems the problem is that jQuery.mobile is locked for some versions of jQuery. You should be OK with jQuery version 2.x.x., but version 3.x.x. might be causing error you described. Uninstalling jQuery 3.1.1. and installing jQuery 2.2.4. solved the issue for me.

    Found answer on similar issue: jquery.mobile 1.4.5 Uncaught TypeError: Cannot read property 'concat' of undefined