Integrating a javascript object with jquery

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

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 2

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.

Answer 3

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