Intégration d'un objet javascript avec jquery

J'ai cet objet js que j'ai obtenu de php à travers jason_encode(). Cet objet a 2 objets, Nom et Vidéo. Puis, à travers une boucle for, je distribue les noms en divs. Mon problème est que je dois créer un lien dans chaque div qui créerait une boîte de dialogue affichant la vidéo.Intégration d'un objet javascript avec jquery

Je fonde cette idée de l'exemple de l'interface utilisateur jquery: http://jqueryui.com/demos/droppable/#photo-manager

Plus précisément, la plus grande icône vue que je l'intention d'avoir la même boîte de dialogue, sauf une vidéo sur youtube intégration.

Voici le code qui récupère les valeurs de l'objet jscript et les place dans les 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>'); 
    } 
}

Ensuite, au fond, j'aurais une des icônes dans chaque qui devrait tout simplement avoir en elle les données de ExerciseVideo. Je n'arrive pas à comprendre comment connecter les deux objets ensemble. Dans l'exemple de jquery, l'URL de l'image est intégrée dans un href. Malheureusement, je ne peux pas faire la même chose pour une vidéo.

Source

2010-02-07 mike

Ceci n'a pas été testé, mais cela pourrait fonctionner. Edit: Il est actuellement testé et fonctionne maintenant. Notez que cela suppose que Video est un ID de vidéo YouTube et non une URL de vidéo YouTube. (Ie. Nous supposons Video est la partie après la ?v= dans l'URL YouTube)

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

Source

2010-02-07 01:02:36 icktoofay

J'ai vraiment bats avec ce code pour faire fonctionner. Le problème est que jquery supprime les erreurs, je pense que j'ai du mal à le déboguer. Cela semble ne pas faire quoi que ce soit jusqu'à ce que l'événement click soit exécuté, puis commence à l'ajouter? – mike

Comme je l'ai compris, vous vouliez quelque chose qui a ajouté des divs basé sur les données JSON, et quand vous avez cliqué sur la div, il a ouvert la vidéo dans une boîte de dialogue. Si ce n'est pas ce que vous vouliez, pouvez-vous reformuler ce que vous essayez de faire? – icktoofay

Oh, je viens de remarquer le problème ... j'ai oublié que je ne l'ai pas ajouté à n'importe où. Je vais éditer la réponse. – icktoofay

Je ne sais pas vraiment si c'est ce dont vous avez besoin, je l'espère, il sera utile

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

Source

2010-02-07 00:19:58

Juste un commentaire à andres et micro (je préfère le mettre ici afin que les codes ci-dessous sont lisibles).

Ce bloc de codes:

if(BodyWeight[i]['Color'] == 'Red') { 
    mydiv.addClass("dragred").appendTo($('#redboxes')); 
    } 
    else if(BodyWeight[i]['Color'] == 'Blue') { 
    mydiv.addClass("dragblue").appendTo($('#blueboxes')); 
    }

pourquoi ne pas faire:

var color = BodyWeight[i]['Color'].toLowerCase(); 
    mydiv.addClass("drag"+color).appendTo($('#'+color+'boxes'));

beaucoup mieux je pense.

Source

2010-02-07 00:42:31 Reigel

Intégration d'un objet javascript avec jquery

Répondre

Questions connexes