Pass a global variable to the $(document).ready function in jQuery

Question

I have a site that has particular alphanumeric ID for every song, say like 57bfab618de4191 In the jQuery player the MP3 song has to be assigned via link.

The jplayer function is this:

     $(document).ready(function (){
   function playAudio(val) {newVal=val}    

        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
    mp3:"http://website.com/dlb.php?file="+newVal                       });
            },
            swfPath: "js",
            supplied: "mp3",
            wmode: "window"
        });
    });

I want to play different song present in the list for user so I passed a ID of song via button onClick like this

  onClick="playAudio(<?php echo "'".$songid. "'"; ?>)"

Where song ID is the iD of the song specified in database, like 57bfab618de4191

This way I can pass the value, but I am not able to transfer the parameter of playAudio function to the document.ready function.

Echo the ID into a data attribute and get it with jQuery inside the function, and get rid of that inline click handler. — adeneo, Sep 09 '12 at 07:00
@adeneo how,, actually, can you describe? I don't want page to be refreshed and also , the id is present at the play button of the song and there is list i cant assign the id globally anywhere. I have to use onClick function for specific song — Abhishek Sharma, Sep 09 '12 at 07:04
I'm guessing something like [THIS FIDDLE](http://jsfiddle.net/dhdTE/)... — adeneo, Sep 09 '12 at 07:09

score 3 · Accepted Answer · edited May 23 '17 at 11:43

3

var val = 'whateveer'

function playAudio(nval) {
    var val = nval;
    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: "http://website.com/dlb.php?file=" + val
            });
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window"
    });
}

no need for $(document).ready

if you need to change songs:

var val = '12345'; // your first song
$(document).ready(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: "http://website.com/dlb.php?file=" + val
            });
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window"
    });
});

function playAudio(nval) {
    var val = nval;
    $("#jquery_jplayer_1").jPlayer({
        "setMedia", {
            mp3: "http://website.com/dlb.php?file=" + val
        }
    });
    // --- OR ---
    $("#jquery_jplayer_1").changeAndPlay("http://website.com/dlb.php?file=" + val);
}

More info:

edited May 23 '17 at 11:43

Community

1
1

answered Sep 09 '12 at 07:08

Peter

16,453
8
51
77

thanks buddy, it really helped, but want to ask one thing it doesn't overwrite the value of val when another button is clicked. – Abhishek Sharma Sep 09 '12 at 07:12
`val` is the parameter to the function, not a global variable. Each button should have a different argument value inserted by PHP. – Barmar Sep 09 '12 at 07:16
Please check my code, you might want to destroy the current instance of jPlayer before creating a new one. – fahad.hasan Sep 09 '12 at 07:19
@barmar each button has already specific button inserted by php for different song, Still not working, i think that might be the problem with player. – Abhishek Sharma Sep 09 '12 at 07:19
@AbhishekGahlo i edited my answer, please try it :) and jPlayer has very nice docs why wont' you use it? :) – Peter Sep 09 '12 at 07:22
@peterSzymkowski thanks buddy,, the code your provided is working, and i will add changeAndPlay function :) – Abhishek Sharma Sep 09 '12 at 07:23

fahad.hasan · Answer 2 · 2015-07-08T00:09:16.353

2

You need to play with variable scoping.

var newVal = 'default_song_to_play_if_any';

function playAudio(val){
    newVal = val;
    $("#jquery_jplayer_1").jPlayer("destroy");
    $("#jquery_jplayer_1").jPlayer({
       ready: function (event) {
          $(this).jPlayer("setMedia", {
             mp3:"http://website.com/dlb.php?file="+newVal
          });
       },
       swfPath: "js",
       supplied: "mp3",
       wmode: "window"
   });
}

//use this ready function only if you want to play a default song on load
$(document).ready(function(){
    playAudio(newVal); 
});

edited Jul 08 '15 at 00:09

answered Sep 09 '12 at 07:17

fahad.hasan

902
8
16

Nested functions are fine in JavaScript. – steveax Sep 09 '12 at 07:24
@ShutterBug the code is good still it doesn't ful-fill my requirement as every user may have different song. I can't provide default value of song. – Abhishek Sharma Sep 09 '12 at 07:26
@steveax You are wrong: [#1](http://jsfiddle.net/wkVcJ/) [#2](http://jsfiddle.net/wkVcJ/1/) – Peter Sep 09 '12 at 07:28
@PeterSzymkowski well this answer states: "You can not decalre a function inside document.ready because document.ready itself is a function." the examples you show are demonstrating variable scope in JavaScript. Perhaps that's what ShutterBug meant, but if so it's poorly stated. – steveax Sep 09 '12 at 08:27
@steveax the document.ready function is replaced with another function that can take the value, so in that way it worked thats why peterszymkowki answer is somehow correct. – Abhishek Sharma Sep 09 '12 at 08:56
Who said you can't declare function within a function? – Gogol Jul 09 '14 at 09:38

Pass a global variable to the $(document).ready function in jQuery

2 Answers2