Pass value to dialog modal

Question

I am using multiple buttons (dynamic) that opens a single div:

<div class="dialog" title="Player">
    <p>YouTube Player here</p>
</div>

and at the header I am using:

<script>
    $(function() {
        $(".dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "blind",
                duration: 1000
            }
        });

        $(".opener").click(function() {
            $(".dialog").dialog("open");
        });
    });
</script>

I get the buttons use like this:

foreach ($ytObject->RKT_requestResult->entry as $video) {
    return = $ytObject->parseVideoRow($video);
    $delimiter = "**";
    $VideoContent = explode($delimiter, $return);
    if ($count % 2 == 0) {
        echo "<div class=\"ResultEven\">";
        echo "<button class=\"opener btn\" class=\"btn\">Play</button>&nbsp;";
        echo "<a href = \"" . $VideoContent['0'] . "\" class=\"btn\">Download</a>&nbsp;";
        echo $VideoContent['6'];
        echo "</div>";
    } else {
        echo "<div class=\"ResultOdd\">";
        echo "<button class=\"opener btn\" class=\"btn\">Play</button>&nbsp;";
        echo "<a href = \"" . $VideoContent['0'] . "\" class=\"btn\">Download</a>&nbsp;";
        echo $VideoContent['6'];
        echo "</div>";
    }
    $count++;
}

I want to get the value of $VideoContent['0'] as the pop-up content of <div class="dialog" title="player"> so that I can put the YouTube video directly on the modal.

Did you try to used embed tag instead of tag. And I supposed $VideoContent['0'] has the URL of the video, which can be applied to embed tag — Chirag Vidani, Jul 09 '13 at 11:44
@Ante Omnio, this link may get you some idea, have a look http://stackoverflow.com/questions/3694693/how-to-have-jqueryui-dialog-box-dynamically-load-content — RONE, Jul 09 '13 at 11:58
@Chirag Yes. `$VideoContent['0']` contains the URL. But how can I embed it to the button and use it? I am new to JQuery. That's why I am not sure exactly where and how to embed it. — programmer, Jul 09 '13 at 12:00

score 2 · Accepted Answer · answered Jul 09 '13 at 12:03

2

Use the following code to get the value:

 $(".opener").click(function() {
     var video =  $(this).siblings("a").attr("href");
     alert(video); //here video will have the value of $VideoContent['0']
     $(".dialog").dialog("open");
 });

answered Jul 09 '13 at 12:03

Code Lღver

15,573
16
56
75

score 1 · Answer 2 · answered Jul 19 '13 at 10:27

I have done it. Function that I have used is:

<script>
    $(function() {
        $(".dialog").dialog({
            width: 450,
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "blind",
                duration: 1000
            }
        });
        $(".opener").click(function() {
            var video = $(this).siblings("a").attr("href");
            var VideoId = video.replace('http://www.youtube.com/watch?v=', '');
            var VideoId = VideoId.replace('&feature=youtube_gdata', '');
            var youtube = "<embed width=\"420\" height=\"345\" src=\"http://www.youtube.com/v/" + VideoId + "\" type=\"application/x-shockwave-flash\"> </embed>";
            $(".dialog").dialog("open").html(youtube);
        });
    });
</script>

And the link/button to open it is

<button class="opener btn" class="btn"><img src="img/Play-icon.png" alt="play" />&nbsp;Play</button>

echo "<a href = \"" . $VideoContent['0'] . "\" class=\"\"></a>&nbsp;";

May be a bit silly or tricky :P But working properly! ^_^

Actually the buttons come in a loop. So, I have used the buttons to show the modal and a blank href to get the value. That's it. :)

Pass value to dialog modal

2 Answers2