Syntax - document.write Javascript into html

Question

I'm trying to figure out how to pass some PHP variables into Javascript so they can be called by the html. Here is the orginal markup from jplayer.org that I'm trying to work with:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
            });
        },
        swfPath: "../../dist/jplayer",
        supplied: "mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });
});
//]]>
</script>

So, I'm trying to make the "title" and "m4a" dynamic as variables. I tried this:

<script>
    var audio_file = '<?php echo $full_audio; ?>'; 
    var audio_title = '<?php echo $title; ?>';
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: document.write(audio_title);,
                m4a: document.write(audio_file);
            });
        },
        swfPath: "../../dist/jplayer",
        supplied: "mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });
});
//]]>
</script>

But when I inspect the html, instead of the variable being added, I get the actual text

"title: document.write(audio_title);,
m4a: document.write(audio_file);"

I'm not overly proficient with Javascript, any advice?

Answer 1

I don't really understand why you're using document.write( ) to set those config variables in jPlayer( ) . Have you tried just calling the Javascript variables there instead? Also make sure that your two variables are being set to the correct values where you're calling the PHP.

Try this:

<script>
    var audio_file = '<?php echo $full_audio; ?>'; 
    var audio_title = '<?php echo $title; ?>';
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: audio_title,
                m4a: audio_file
            });
        },
        swfPath: "../../dist/jplayer",
        supplied: "mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });
});
//]]>
</script>

Just to clarify, you'll only see the values of $audio_file and $audio_title where you set them. Within jPlayer( ) you'll only see the variable names but that's the way it should be.

Answer 2

Try the code below -

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            title: audio_title,
            m4a: audio_file
        });
    },
    swfPath: "../../dist/jplayer",
    supplied: "mp3",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
});
});
//]]>
</script>

I have just removed the document.write from line 4 & 5 below '$(document).ready(function(){' as document.write writes the variables to the page instead of assigning it to JSON.

Answer 3

PHP is a server side language and javascript is client side. You have to store that php value in any hidden input type. And then u can access it.