I'm making a website that uses a lot of different php files. My site uses Wordpress and is a music blog. I have a jPlayer playlist at the top of the screen and for each individual post I want to have a play button to play that song.
I've made a few functions in php and in javascript across a few different php files. How can I declare a global JavaScript variable in one of my php files and access it in another php file? I know that is worded badly, so let me explain.
File 1: my_functions.php (where I set up my jPlayer playlist. The variable song_index is what I want to be global.
<script type = "text/javascript">
var song_index = 0;
var theTitles = new Array();
var theMP3s = new Array();
var jplayer_playlist;
function add_song(title, mp3)
{
theTitles[song_index] = title;
theMP3s[song_index] = mp3;
song_index++;
}
function play_song(index)
{
alert("You want to play song " + index);
//jplayer_playlist.play(index);
}
function get_playlist()
{
var playlist = new Array();
for(var i = 0; i < theTitles.length; i++)
{
playlist[i] = {title: theTitles[i], mp3: theMP3s[i]};
}
return playlist;
}
$(document).ready(function()
{
var playlist = get_playlist();
jplayer_playlist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1",
oggSupport:false
}, playlist, {
swfPath: "/js",
supplied: "mp3",
wmode: "window"
}
);
});
//]]>
</script>
This sets up my jPlayer playlist dynamically for each page.
File 2 shortcodes.php (this is where I add songs using Wordpress' shortcodes. Here is the code that I use when I want to add a song to the playlist...)
function player_function($args)
{
$url = $args['url'];
$title = $args['title'];
if(!$title)
{
$title = get_the_title();
}
add_song($title, $url);
$ret = "<a href = '" . $url . "'></a><br><a href=\"javascript:void(0)\" onclick = \"play_song(".$_GET['window.song_index'].")\">Play</a>";
return "$ret";
}
Pretty much I just need to access song_index from the first file into a php variable so I can pass it along. As you can see, I tried using $_GET because someone said you can access JS variables this way, but it didn't work. Anyone have any clues?
Javascript and PHP don't actually know anything about one another. However, you can use PHP to write to JavaScript. So in my_functions.php you could do this:
<?php
$myGlobalSongIndex = '0'; // or however you want to assign this else....
?>
<script type = "text/javascript">
var song_index = <?php print myGlobalSongIndex; ?>;
Then in shortcodes.php on the write link line, print $myGlobalSongIndex
instead of the $_GET['window.song_index']
that you are doing now. The one thing that you need to make sure of is that $myGlobalSongIndex
is in scope in both places. Meaning if it is inside a function or class, you will need to use the global
keyword.
There is a downside to this exact approach. You will not be able to separate the javascript into a separate file which can be quite nice in many case. You could write just the following in the php, as part of the html's head
section:
<?php
$myGlobalSongIndex = '0'; // or however you want to assign this else....
?>
<script type = "text/javascript">
var song_index = <?php print myGlobalSongIndex; ?>;
</script>
And make sure that you load the external javascript file afterwards. Then when you use the song_index
in the javascript file, you would probably want to make sure it is indeed initialized for any pages where you may include it without rendering the field in php.
you have to either put the js variable into the url query string (essentially sending a GET request where you can access those variables from PHP) or use AJAX
so www.yoursite.com?song_index=5
or build an ajax call and send your variables in the data