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.

icktoofay · Accepted Answer · 2010-02-07 06:26:11Z

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

edited Feb 7, 2010 at 6:26

answered Feb 7, 2010 at 1:02

icktoofay

130k23 gold badges261 silver badges239 bronze badges

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

11 Comments

mike Over a year ago

I've been really fighting with this code to get it to work. Problem is jquery suppresses errors I think so I'm having a hard time debugging it. This seems not to do anything until the click event is executed and then starts appending?

icktoofay Over a year ago

As I understood it, you wanted something that appended divs based on the JSON data, and when you clicked on the div, it opened the video in a dialog. If that's not what you wanted, can you rephrase what you're trying to do?

icktoofay Over a year ago

Oh, I just noticed the problem... I forgot I wasn't appending elem anywhere. I'll edit the answer.

mike Over a year ago

The only problem I think is that it's only showing the last video. I have the right variable since one of the videos is showing so that's working. I wonder if its overwriting the same event? Edit: It seems that the click event is getting set only after the click. Any ideas?

icktoofay Over a year ago

Try calling alert with exercise["Video"] inside the click event to make sure it's getting the right video ID in there. That would be the first thing to check.

|

andres descalzo · Accepted Answer · 2010-02-07 00:19:58Z

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

Reigel Gallarde · Accepted Answer · 2010-02-07 00:42:31Z

0

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.

answered Feb 7, 2010 at 0:42

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Collectives™ on Stack Overflow

Integrating a javascript object with jquery

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related