Passing PHP Variable Into jQuery Function

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>

possible duplicate : http://stackoverflow.com/q/2370768/235710 — Adil Shaikh
– Adil Shaikh, Commented Jul 1, 2012 at 17:30

Tom Walters · Accepted Answer · 2012-07-01 17:34:41Z

4

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.

answered Jul 1, 2012 at 17:34

Tom Walters

15.6k7 gold badges59 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user652792 Over a year ago

Thanks for the answer. One more problem is... Is there any way round having the PHP Variable on the same page as the jQuery? Maybe SESSIONS or require() ?

Tom Walters Over a year ago

Yep you could use a $_SESSION[] variable and get the same result, just make sure the JavaScript is contained in a PHP page so the PHP is rendered.

Vikram Over a year ago

I am trying to display PHP Variable without double quotes and its always giving error in Console (Chrome developer tools). Your solution solved my problem by keeping the double quotes. thanks

Yarek T · Accepted Answer · 2013-10-09 17:22:44Z

3

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'
    }]);
})

edited Oct 9, 2013 at 17:22

answered Jul 1, 2012 at 17:46

Yarek T

9,9652 gold badges30 silver badges41 bronze badges

Comments

disjunction · Accepted Answer · 2012-07-01 17:33:07Z

1

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

answered Jul 1, 2012 at 17:33

disjunction

6765 silver badges9 bronze badges

Comments

Igor Parra · Accepted Answer · 2012-07-01 17:52:01Z

1

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;

edited Jul 1, 2012 at 17:52

answered Jul 1, 2012 at 17:45

Igor Parra

10.4k10 gold badges74 silver badges104 bronze badges

Comments

Sam · Accepted Answer · 2012-07-01 18:32:25Z

1

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 :\

answered Jul 1, 2012 at 18:32

Sam

16.4k6 gold badges59 silver badges89 bronze badges

Comments

Rich Cloutier · Accepted Answer · 2013-04-18 21:32:30Z

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)

Daniel Lefebvre · Accepted Answer · 2017-01-19 23:22:26Z

0

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'));

edited Jan 19, 2017 at 23:22

answered Jan 19, 2017 at 20:11

Daniel Lefebvre

3744 silver badges13 bronze badges

Collectives™ on Stack Overflow

Passing PHP Variable Into jQuery Function

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related