Passing PHP Variable Into jQuery Function - php

Question

I'm trying to implement jQuery Flare Video Plugin for my website.. There's a dropdown menu which the user must choose a year from, when the submit button is clicked, a video is meant to show on the screen. I have a database that grabs the path to the video from the database i.e $row['videoName'] .
My question is how can I pass PHP variables in jQuery function.. In the example given in the plugin a full path to the video was given insrc attribute of jQuery function. I'm trying to make the src dynamic by passing the PHP Variable into it.
I'm not getting any error, and the div containing the video appears on the screen, but the video does not show.
Thank you.
jQuery(function($){
fv = $("#video").flareVideo();
fv.load([
{
src: '$row['videoName']',
type: 'video/mp4'
}
]);
})
</script>

Answer 1

To access the PHP variable you must enclose the code in PHP brackets like so:
jQuery(function($){
fv = $("#video").flareVideo();
fv.load([
{
src: "<?php echo $row['videoName']; ?>",
type: 'video/mp4'
}
]);
})
</script>
This must also be on the same page as the PHP variable is created to allow access.

Answer 2

I would advice to keep PHP preprocessing out of javascript as much as possible. I have a convention of creating a hash of all variables from PHP in the view and then injecting them into my Javascript objects. In this case you could put something like this into the view:
<script>
var options = {
videoName: '<?php echo $row['videoName']?>'
}
</script>
or
<script>
var options = <?php echo json_encode($row);?>;
</script>
Later in any of your javascript files you could do this:
$(function(){
fv = $("#video").flareVideo();
fv.load([{
src: options.videoName,
type: 'video/mp4'
}]);
})

Answer 3

jQuery(function($){
fv = $("#video").flareVideo();
fv.load([
{
src: '<?= $row['videoName'] ?>',
type: 'video/mp4'
}
]);
})
</script>

Answer 4

Mix php and js code is ugly. So when you have all your js code into .js files you can do it in this way:
code into .js files
jQuery(document).ready(function($){
fv = $("#video").flareVideo();
fv.load([
{
src: videoName, // videoName is in the global scope
type: 'video/mp4'
}
]);
})
var videoName = ""; // init var to avoid undefined values
code into .php files
echo <<<EOM
<script type="text/javascript">
var videoName = '{$row['videoName']}';
</script>
EOM;

Answer 5

The URL to the Video should be somewhere within the HTML Scope. JS comes in handy to grab the URL, with something like
fv.load({
src: $('.videlink').attr('href'),
type: 'video/mp4'
})
I do not know the precise javascript of this flareVideo() thing, but the URL SHOULD really be somewhere inside your HTML. Do not just pass this to the JavaScript, this is really ugly design :\

Answer 6

Another way to pass PHP variables to jQuery is through the DOM. You said that you have a dropdown list of years that the user selects. When you build your page, get the whole array of videos like so:
$rows = array(
'1991' => '/url/to/your/1991-video',
'1992' => '/url/to/your/1992-video',
'1993' => '/url/to/your/1993-video',
'1994' => '/url/to/your/1994-video'
);
So you can just build your select list like so:
<select id="videoName">
<option value="<?php echo $rows['1991'] ?>">1991</option>
<option value="<?php echo $rows['1992'] ?>">1992</option>
<option value="<?php echo $rows['1993'] ?>">1993</option>
<option value="<?php echo $rows['1994'] ?>">1994</option>
</select>
I've used a simple array but you would use the results of your database query, and you could also use a foreach to build your drop down list.
Then your video script would just reference the $('#videoName').value().
By doing a .change() event handler on the select, you can start the video without having to reload any pages.
You can use the same approach to build tables of items based on a database query. Just name your objects or id them with unique values based on your database output.
(code is untested)

Answer 7

Thoughts about doing this with a cookie? I think something like this...
PHP
setcookie('your_cookie_name', json_encode($your_array), time()+3600, "\");
Javascript
You would then have the PHP array in JS to do whatever JS you wanted to preform on it.
var arrayVar = []
arrayVar = $.parseJSON($.cookie('your_cookie_name'));