Integrating a javascript object with jquery - php

Question

I have this js object which I got from php through jason_encode(). This object has 2 objects, Name and Video. Then through a for loop I distribute the names into divs. My problem is I need to create a link in each div that would create a dialog that displays the video.
I'm basing this idea from the jquery UI example: http://jqueryui.com/demos/droppable/#photo-manager
Specifically the view larger icon which I intend to have the same dialog except embedding a youtube video.
Here is the code that gets the values from the jscript object and puts them in divs.
for ( var i in BodyWeight )
{
if(BodyWeight[i]['Color'] == 'Red')
{
$('#redboxes').append('<div class="ui-widget-content dragred"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>');
}
else if(BodyWeight[i]['Color'] == 'Blue')
{
$('#blueboxes').append('<div class="ui-widget-content dragblue"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>');
}
}
Then basically I would have a icons in each that should just have in it the data from ExerciseVideo. I just can't figure out how to connect both objects together. In the jquery example they image url is embedded in a href unfortunately I can't do the same for a video.

Answer 1

This hasn't been tested, but it might work. Edit: It actually is tested and does work now. Note that this assumes that Video is a YouTube video ID, not a YouTube video URL. (ie. we're assuming Video is the part after the ?v= in the YouTube URL)
for(var i=0;i<BodyWeight.length;i++) {
var exercise=BodyWeight[i];
var elem=$('<div class="ui-widget-content"><p>'+exercise["ExerciseTitle"]+'</p></div>');
elem.addClass("drag"+exercise['Color'].toLowerCase());
elem.appendTo("#"+exercise['Color'].toLowerCase()+"boxes");
elem.data("exercise", exercise);
elem.click(function() {
var exercise=$(this).data("exercise");
var div=$("<div>");
var obj=$("<object>");
obj.attr("type", "application/x-shockwave-flash");
obj.attr("data", "http://www.youtube.com/v/"+exercise["Video"]);
obj.attr("width", "400").attr("height", "300");
obj.appendTo(div);
div.hide().appendTo("body");
setTimeout(function() {
div.dialog({
title: exercise["ExerciseTitle"],
width: 435,
modal: true,
close: function(event, ui) {
div.remove();
}
});
}, 1);
return false;
});
}

Answer 2

I do not really know if this is what you need, I hope it will be usefull
for ( var i in BodyWeight ) {
var mydiv = $('<div class="ui-widget-content"></div>'),
myp = $('<p>'+BodyWeight[i]["ExerciseTitle"]+'</p>'),
mylink = $('<a>View video</a>'),
linkVideo = BodyWeight['linkToVideo'] ;
mylink
.attr('href','#')
.click(function(ev){
ev.stopPropagation();
//acction for linkVideo
alert(linkVideo);
});
mydiv
.append(myp)
.append(mylink);
if(BodyWeight[i]['Color'] == 'Red') {
mydiv.addClass("dragred").appendTo($('#redboxes'));
}
else if(BodyWeight[i]['Color'] == 'Blue') {
mydiv.addClass("dragblue").appendTo($('#blueboxes'));
}
}

Answer 3

Just a comment to andres and to mike (I prefer to put it here so that codes below are readable).
This block of codes:
if(BodyWeight[i]['Color'] == 'Red') {
mydiv.addClass("dragred").appendTo($('#redboxes'));
}
else if(BodyWeight[i]['Color'] == 'Blue') {
mydiv.addClass("dragblue").appendTo($('#blueboxes'));
}
why not make it:
var color = BodyWeight[i]['Color'].toLowerCase();
mydiv.addClass("drag"+color).appendTo($('#'+color+'boxes'));
much better I think.