JavaScript Online

Question

terrymold 7 Light Poster

10 Years Ago

Hi
I have a problem in which an HTML/JavaScript page, using the excellent AblePlayer Audio Player, which runs perfectly on my Home server (Latest version of Wamp), but will not run when it is uploaded to our 1and1 shared server space. The code for this page is shown below, and when I say it doesn't run online, you see just the HTML <li> list which of course isn't selectable. It is as if the JavaScript code isn't being executed. This is the page code...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tarbiyyat Audio Book Player</title>

    <!-- Dependencies -->
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <script src="thirdparty/modernizr.custom.js"></script>
    <script src="thirdparty/jquery.cookie.js"></script>
<!-- <script src="scripts/jquery.min.js"></script>
    <script src="scripts/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" /> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">

    <!-- Able Player CSS -->  
    <link rel="stylesheet" href="styles/ableplayer.css" type="text/css"/>

    <!-- Additional CSS for Playlist -->  
    <link rel="stylesheet" href="styles/ableplayer-playlist.css" type="text/css"/>

    <!-- Able Player JavaScript -->
    <script src="scripts/ableplayer.js"></script>

<!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
    <script>
        $( document ).ready(function() { 
            new AblePlayer('audio1');       
        });

<!--     $( document ).ready(function() {
            $( "p" ).text( "The DOM is now loaded and can be manipulated." );
        }); -->
    </script>

</head>

<body>
<div class = "head_container">
        Ahmadiyya Muslim Association<br/>
        Tarbiyyat Department, United Kingdom<br/>
    </div>

    <hr>

    <div class = "main_container">

        <h2>Audio Book Player 01 - AikGhaltiKaIzala</h2>

        <audio id="audio1" class="ump-media" preload="auto">
        </audio>

        <ul class="ump-playlist" data-player="audio1" data-embedded>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-001.mp3">AikGhaltiIzala-001</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-002.mp3">AikGhaltiIzala-002</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-003.mp3">AikGhaltiIzala-003</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-004.mp3">AikGhaltiIzala-004</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-005.mp3">AikGhaltiIzala-005</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-006.mp3">AikGhaltiIzala-006</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-007.mp3">AikGhaltiIzala-007</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-008.mp3">AikGhaltiIzala-008</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-009.mp3">AikGhaltiIzala-009</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-010.mp3">AikGhaltiIzala-010</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-011.mp3">AikGhaltiIzala-011</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-012.mp3">AikGhaltiIzala-012</li>
        </ul>

    </div>

    <hr>

    <div class="foot_container">
        <table width="100%" align="center" border="0">
            <tr>
                <td class="special" width="10%">Love<br/>for<br/>all</td>
                <td class="special" width="80%">Copyright &#0169; 2014 Tarbiyyat Department UK and Terry Mold</td>
                <td class="special" width="10%">Hatred<br/>for<br/>none</td>
            </tr>
        </table>
    </div>

</body>
</html>

If you want to see the offender in action, go to www.tarbiyyat.org.uk/audio_books/newAudio/aap/playlist-01.html.

I've tried all sorts of things to no avail. So I'm really hoping that someone here will know exactly why it isn't working?

Thanks
Terry

javascript

3 Contributors
5 Replies
286 Views
6 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by terrymold

diafol

10 Years Ago

Check your paths and you've got 2 refs to jquery-ui.min.js

JorgeM 958 Problem Solver

10 Years Ago

Your sample code above is confusing to review when you have scripts that are commented out. Why include them for us to review if you have them commented?

My recommendation is that you load jquery first, then the UI, then modernizer, then your extra js files after that either in the head or better yet in the body just before the closing body tag.

Looks like you have a problem trying to locate another external js file which isnt listed above.

1ede2457bc38ba4539ff56bbefea98cc

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

terrymold 7 Light Poster · Answer 1 · 2014-10-18T17:12:38+00:00

Hi JorgM
Sorry about all that extra code. I will try loading them in the order you said, and put them near the end of the file.
But I still can't help wondering why it works on my Wamp server, and not on 1and1's server.
Terry

terrymold 7 Light Poster · Answer 2 · 2014-10-18T20:39:32+00:00

Hi JorgM and Diafol
I have now moved all the js and css files, downloading the one that were linked to, and placed them in a folder aap/allscripts.
I have deleted all references to js files from the <head> section, and just left links to the css files in the <head>
All the links to the js files are now just before the closing <body> tag, and the small script routine follows immediately after the js links.

Now, once again, this script runs perfectly on my Wamp server, but still does not run on our 1and1 server.

I'm afraid I'm at wits end with this. It just doesn't seem logical at all. It just seems as if there is something the 1and1 server does not like?

Is there some way that I can test the script to see if there is a missing file or link?

This player is exactly what we have been looking for for some time, but if I cannot get it to work, I will have to continue my search. So maybe if I give you our rather simple requirements, somebody at DaniWeb might know of something suitable?

We have over 4,500 MP3 audio files (just speech, not music), so we need an MP3 player with an <li> or xml type playlist, and once it has started playing, it should automatically move to the next MP3 file in the playlist. And it would really need to be Open Source, if possible.

But it would be even better if I could get this one working.

Thanks
Terry

terrymold 7 Light Poster · Answer 3 · 2014-10-18T20:41:04+00:00

Sorry, but I forgot to include the modified script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tarbiyyat Audio Book Player</title>

    <link rel="stylesheet" type="text/css" href="allscripts/ableplayer-playlist.css"/>
    <link rel="stylesheet" type="text/css" href="allscripts/ableplayer.css"/>
    <link rel="stylesheet" type="text/css" href="allscripts/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="allscripts/styles.css"/>

</head>

<body>
    <div class = "head_container">
        Ahmadiyya Muslim Association<br/>
        Tarbiyyat Department, United Kingdom<br/>
    </div>

    <hr>

    <div class = "main_container">

        <h2>Audio Book Player 01 - AikGhaltiKaIzala</h2>

        <audio id="audio1" class="ump-media" preload="auto">
        </audio>

        <ul class="ump-playlist" data-player="audio1" data-embedded>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-001.mp3">AikGhaltiIzala-001</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-002.mp3">AikGhaltiIzala-002</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-003.mp3">AikGhaltiIzala-003</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-004.mp3">AikGhaltiIzala-004</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-005.mp3">AikGhaltiIzala-005</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-006.mp3">AikGhaltiIzala-006</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-007.mp3">AikGhaltiIzala-007</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-008.mp3">AikGhaltiIzala-008</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-009.mp3">AikGhaltiIzala-009</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-010.mp3">AikGhaltiIzala-010</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-011.mp3">AikGhaltiIzala-011</li>
            <li data-mp3="../AikGhaltiKaIzala/AikGhaltiIzala-012.mp3">AikGhaltiIzala-012</li>
        </ul>

    </div>

    <hr>

    <div class="foot_container">
        <table width="100%" align="center" border="0">
            <tr>
                <td class="special" width="10%">Love<br/>for<br/>all</td>
                <td class="special" width="80%">Copyright &#0169; 2014 Tarbiyyat Department UK and Terry Mold</td>
                <td class="special" width="10%">Hatred<br/>for<br/>none</td>
            </tr>
        </table>
    </div>

    <!-- All the Scripts here -->

    <script src="allscripts/jquery.min.js"></script>
    <script src="allscripts/jquery-ui.min.js"></script>
    <script src="allscripts/modernizr.custom.js"></script>
    <script src="allscripts/jquery.cookie.js"></script>
    <script src="allscripts/ableplayer.js"></script>

    <script>
        $( document ).ready( function() { 
            new AblePlayer( 'audio1' );     
        });
    </script>

</body>
</html>