Question

I set up a brand new project using the PhoneGap starter template in Visual Studio. The template works as expected, but if I try to add jquery mobile to the page, and call a function from it, its reported that jQuery is undefined.

here is my template javascript:

<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
   <script type="text/javascript" src="jquery.mobile.min.js"></script>
  <script type="text/javascript">

    document.addEventListener("deviceready",onDeviceReady,false);

    // once the device ready event fires, you can safely do your thing! -jm
    function onDeviceReady()
    {
        document.getElementById("welcomeMsg").innerHTML += "Cordova is ready! version=" + window.device.cordova;
        console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
        jQuery("#welcomeMsg").html("blah");
    }

  </script>

My CordovaSourceDictionary.xml looks like it is ok too:

<?xml version="1.0" encoding="utf-8"?>
<!-- This file is auto-generated, do not edit! -jm -->
<CordovaSourceDictionary>
    <FilePath Value="www\cordova-1.5.0.js"/>
    <FilePath Value="www\index.html"/>
    <FilePath Value="www\jquery.mobile.min.js"/>
    <FilePath Value="www\master.css"/>
</CordovaSourceDictionary>

but upon trying to debug the WP7 app, i get these errors:

ScriptNotify :: Error:"'jQuery' is undefined"
Log:"Error in success callback: Connection1 = 'jQuery' is undefined"

Answer 1

In the code you posted, you aren’t including the jQuery core… jQuery Mobile is built on-top-of jQuery Core so the core must be included before jQuery Mobile or jQuery Mobile will not function.

Notice on the jQuery Mobile download page the order of includes (mobile.css, then core JS, then mobile JS):

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

Source: http://jquerymobile.com/download/