Jquery mobile page not working in visual studio

Question

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)

I'm currently updating my Visual studio if that fixes it.. [stackoverflow.com/questions/39455923/… — J-ho
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. — J-ho
Do you run Ripple as a chrome extension or as it is explain in this article: raymondcamden.com/2013/11/05/Ripple-is-Reborn ? I had problem when using it as a Chrome extension, but it works ok if I follow the article way of setting it. (and works with jquery) — nyluje
@nyluje I did run it as chrome extension, I tested the project with google android emulator too, it shows up the same: basic text with h1-tags bit bigger. but none of the functionality of jquery/mobile aren't showing up. — J-ho
Android emulator is the Android Virtual Device? Or is it another browser testing app software like ripple? If it is the Android Virtual Device, I think I am done with the tips I can give you. If it is another browser testing app software, maybe you should investigate further on how to run Ripple not as a chrome extension. Did you try it on a real device? — nyluje

D. Kuki D. Kuki · Accepted Answer · 2016-10-28T19:01:47

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

Jquery mobile page not working in visual studio

1 Answers