PrettyPhoto - passing unique parameter from iframe window to parent page

Question

I've recently started using prettyphoto to display a video.

This is my current setup

<link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="/js/jquery.prettyPhoto2.js" type="text/javascript" charset="utf-8">

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid"); 
                $.post('/course/close-video', {topic_id: topicid });
                lastClicked = null;
        }
    }
    }).click(function (){
        lastClicked = $(this);
});
</script>


<a data-topicid="<?php echo $topic->topic_id;?>" href="/course/play-video/topic_id/<?php echo $topic->topic_id;?>?iframe=true&width=470&height=340" rel="prettyPhoto" title="<?php echo $topic->topic_name;?>">
<img src="/images/videos/<?php echo $image_name;?>" width="170" height="103" alt="<?php echo $topic->topic_name;?>"/>
</a>

This is what is happening

1) When a user clicks on the link - the play-video php action is called which retrives the video url from database and passes so that it can be played on the popup window. This works fine.

2) Now the play-video also generates a unique id which is passed on to the page (iframe window) where the video is played. Right now I'm just displaying that value on the page. I can have that unique id stored as a hidden field or as a div value.

3) Now when the user closes this window - how can I access this unique id in the callback function of pretty photo which is in the main page.

Thanks a lot Appreciate your time

Answer 1

Create a variable on the main page.

var UniqueId; //Unique ID that will arrive from the iframe

Now a function to write the value

function setUniqeId(val) {
    UniqueId = val;
}

Now inside the iframe, where the id, has already been receive, pass it to the parent like

parent.setUniqueId(TheIdThatIHaveReceived);

Update:

Make sure the script to read is after the DOM is loaded. One of the early ways of ensuring this, is placing the script after the Elements

<input id="topic_user_id" type="text" />
<script>
var unique_id = document.getElementById("topic_user_id").value;
parent.setUniqueId(unique_id);
</script>

One of the modern techniques would be to create a event handler like

window.onload = function() {
    var unique_id = document.getElementById("topic_user_id").value;
    parent.setUniqueId(unique_id);
};

Answer 2

Try the following script:

<script type="text/javascript">
$("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function() {           
        active_link = $("a[rel^='prettyPhoto'].active");
        topic_id = $(active_link).data('topicid');
        $(active_link).removeClass('active');
        alert(topic_id);
        $.post('/course/close-video', {topic_id: topic_id});
    }
}).click(function(){
    $(this).addClass('active');
});
</script>

This adds a class named "active" to the clicked link so that you can easily target it in the callback. It also removes the class inside of the callback to prevent re-selecting the most recent link clicked.

Answer 3

Just get the value from the hiddenfield when the callback function is trigged.

myvideo is the ID of the iframe. If only one iframe will exist in the DOM, just use iframe as selector (without the hash). hidden is the ID of the hiddenfield inside the iframe.

var value = $("#myvideo").contents().find('#hidden').val();
alert(value);

I created a JS fiddle for you so you can see how to get the value from an iframe. http://jsfiddle.net/vtDRW/

Its pretty straight forward I think. So just open the iframe where you have placed a hiddenvalue and get it when the callback is fired.

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid"); 
                var iframeValue = $("#IFRAME_ID").contents().find('#HIDDEN_ID').val();
                $.post('/course/close-video', {topic_id: topicid });
                lastClicked = null;
        }
    }
    }).click(function (){
        lastClicked = $(this);
});
</script>