How to use a javaScript Variable within PHP?

Question

What I have at the moment is a simple Facebook app that has pulled the video information from a YouTube channel.

Just now, I embed the first video of the response from YouTube into the placeholder along with the title, views and description and all videos (including the first) are displayed below the div that holds the embedded video.

Then, when the user clicks any of the video thumbnails, that video is then embedded in the placeholder div.

I can get this to work by hard-coding the id of the video inside the YouTube associative array but I can't figure out how to use the id variable with PHP in the last line of my jQuery code.

Here is my current code:

$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, $url);
$body = curl_exec($ch);
curl_close($ch);
$data = json_decode($body, true);

?>
<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;">
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][0]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>
<div class="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][0]['title']; ?> </div>
<div class="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][0]['viewCount'];?> views</div>
<div class="description" style="font-size:14px;"><?php echo $data['data']['items'][0]['description'];?></div>
<div class="hr" style="padding:5px 0 0 0; float:left; border-bottom: 1px solid #96CC90; width:480px;"></div>
</div>
<?php

foreach($data['data']['items'] as $item) {
$id = $item['id'];
$description = $item['description'];
$description = str_replace('uk.opticalexpress.com', '', $description);
$description = str_replace('-', '', $description);
$description = trim($description);

$thumb = $item['thumbnail']['sqDefault'];

$i = 0;
?>
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px;">
    <div class="thumb" style="position:relative; left:0; top:0;">
        <img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/>
        <img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/>
    </div>
    <div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?> </div>
    <div class="views" style="font-size:12px;"><?php echo $item['viewCount'];?> views</div>
</div>

<?php
$i++;
}
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.video').click(function() {
        var id = $(this).attr('id');

        $('#placeholder').fadeOut('slow');
        $('#placeholder').html('<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>');
        $('#placeholder').fadeIn('slow');
    });
});
</script>

Sorry for the wall of text (and inline css)!

Mr Carl · Accepted Answer · 2011-12-19 12:42:18Z

1

Difficult... I would watch the click event on .video with jQuery, then carry out a GET request to a PHP file on the server (RESTish) which would generate the HTML needed for the iframe, then set the #video html to the html you just received. Might work...

Another possibility, is to load all the iframes, then on .video click just show the one matching the same unique id or something. This would mean more load time for your users though, best to go with the AJAX type approach.

answered Dec 19, 2011 at 12:42

Mr Carl

1871 gold badge2 silver badges10 bronze badges

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

7 Comments

martincarlin87 Over a year ago

thanks @MrCarl . I have just updated my question. I've almost got it, all I need to figure out now is how to get the id jquery variable into the array instead of the [1] that is there now

Mr Carl Over a year ago

This would be called an associative array if I'm understanding correctly. Should be a simple matter of someArray['thisID']['value']

martincarlin87 Over a year ago

yeah I can do that using PHP but if I get the id of the clicked video using jQuery, I can't figure out how to use that id when pulling data from the array, i.e. ['?> + id + <?php]['value'] Gets messy and can't figure out if there's a way to get that to work.

Mr Carl Over a year ago

Hm, okay, so you can't use a separate php file to just pass the variables to using GET/POST? (eg example.com/getiframe.php?id=1). Another idea then, is just do the whole thing with jQuery I guess. Put the URL for the video into a hidden span tag, then on .video click, get the url from it's span, and set it to the iframe. You could expand this to making a div with all the data you need, such as Title etc. Dirty, but it should work.

martincarlin87 Over a year ago

got it to work using an ajax request, took me a while to get my head around it but got it eventually. will update my question later with what I did incase anyone else runs into the same problem. Thanks.

|

martincarlin87 · Accepted Answer · 2011-12-19 13:59:07Z

0

you can use the ajax by doing this, i have done it like this way, hope this will also work for you.

<div id="video1" class=".temp"></div>

<script type="text/javascript">

$(document).ready(function() {
    $('.temp').click(function() {

        var currentId = $(this).attr('id');
        showVideo(currentId);
     });
};

function showVideo(str)
{

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("VideoFrameDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","inc/AjaxOnClickValues.php?id="+str,true);
    xmlhttp.send();
}
</script>

edited Dec 19, 2011 at 13:59

martincarlin87

11.1k24 gold badges104 silver badges148 bronze badges

answered Dec 19, 2011 at 13:44

Shahid Amin

2312 silver badges5 bronze badges

1 Comment

martincarlin87 Over a year ago

thanks, it helps a bit but I think I would need to see what inc/AjaxOnClickValues.php does. I was thinking of using an ajax request but then realised I couldn't think of a way to pull what I needed from the array doing it this way. Will keep trying.

Collectives™ on Stack Overflow

How to use a javaScript Variable within PHP?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related