"Media undefined" when Jquery Mobile script is added to the header

Question

I am trying to develop a simple audio player. Following the tutorials from the web and also in stackoverflow, I am able to make the audio player work.

Working (without Jquery mobile script header):

    <title>Media Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>

    <script type="text/javascript" charset="utf-8">
    var my_media = null;
    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {


    }

    // Audio player

    // Play audio
    //
    function playAudio(src) {
       //some code here
    }

    // Pause audio
    // 
    function pauseAudio() {
    //some code here
    }

    // Stop audio
    // 
    function stopAudio() {
        //some code here

    }

    </script>

One enhancement I made after reading through this site is to place the var my_media = null; before onDeviceReady()

The problem: Since I want to implement this audio player in Jquery Mobile, so I added the Jquery Mobile scripts into the header like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>

<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
    <title>Media Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>

    <script type="text/javascript" charset="utf-8">
    var my_media = null;
    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {


    }

    // Audio player
    //
    // code truncated for simplicity

Unfortunately, after adding Jquery mobile script header, Eclipse log shows:

Uncaught ReferenceError: Media is not defined

So, I am suspecting the problem is the header script launching sequence. The question is, how and where to insert Jquery Mobile script in the header in order for Phonegap media to work?

There is another thread on this issue, which still has no answer. Appreciate the help.

Edit: I have traced down the triggering problem. Apparently, when I add this Jquery-mobile header

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

Music wouldn't play due to media undefined error.

check this http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together — Omar, Jun 14 '13 at 14:59
Thanks for the reply. I have added jquery-mobile .css, followed by jquery.js, followed by jquery-mobile.js. Is this sequence okay? @Omar — Cyberwalk, Jun 16 '13 at 23:41
Now you have jquery mobile duplicated. Remove the first one. — Omar, Jun 16 '13 at 23:54
Now, for the header, I only have: Jquery, Jquery-mobile, and Cordova. Whenever I add Jquery-mobile script (see the edit note), the player won't play. But when I remove Jquery-mobile script, everything works fine. — Cyberwalk, Jun 17 '13 at 00:00

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Alright, although there is no direct solution, somehow I got the inspiration from here: jQuery Mobile & PhoneGap deviceReady() not fired

My Jquery mobile + Phonegap audio player works well after the following modifications:

1) Load cordova.js first

2) Followed by jquery mobile.css, jquery.js and jquery mobile.js

3) The main problem is, which I think is, I mixed cordova firing process together with audio player's functions. When I separated cordova firing process as a standalone block script and audio player functions as another block of script, it works brilliantly. Below is my code for reference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Media Example</title>


    <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/>
    <script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>

    <script type="text/javascript" charset="utf-8">// Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {


    }</script>

    //Cordova firing process and audio player function script declarations are separated. 

    <script type="text/javascript" charset="utf-8">



    // Audio player
    //
    var my_media = null;
    var mediaTimer = null;

    // Play audio
    //
    function playAudio(src) {
       //some code here


    }

    // Pause audio
    // 
    function pauseAudio() {
        //some code here
    }

    // Stop audio
    // 
    function stopAudio() {
       //some code here

    }

    </script>
  </head>

Thanks for the visit of my question and also Omar for the replies.

"Media undefined" when Jquery Mobile script is added to the header

1 Answers1