JQuery: Impossible d'ouvrir la boîte de dialogue

J'ai des problèmes pour ouvrir la boîte de dialogue div. Lorsque je tente d'ouvrir la boîte de dialogue comme celui-ci, rien ne se passe:JQuery: Impossible d'ouvrir la boîte de dialogue

$(this).closest('div.editable').find('.update-dialog').dialog("open");

Et quand je tente d'accéder à l'élément div de dialogue pour voir si je reçois quoi que ce soit,

alert($(this).closest('div.editable').find('.update-dialog').prop("class"));

Alerte retourne " indéfini". Mais comment cela peut-il être? Le div.update-dialog est un frère de l'élément button (this), donc l'appel de "find" sur le résultat renvoyé par "nearest" devrait me donner div.update-dialog.

Voici le code complet. Les domaines d'intérêt sont marqués par des commentaires:

<!DOCTYPE html> 
<html> 
<head> 
<title>sourcecode test</title> 
</head> 
<body> 

<!-- DIALOG DIV - note the hierarchy/tree of the html elements --> 
<div class ="editable" id="div_John E. Coons[instructor_status]"contenteditable="1"> 

    <span class="text-error">Error: More than one user with same fname and lname</span> 
    <br/>Users: 
    <br/> 
    <span class="multiple-users">&nbsp Instructor ID: 23, Common Name: John E. Coons</span> 
    <br/> 
    <span class="multiple-users">&nbsp Instructor ID: 17447, Common Name: John E Coons</span> 
    <br/> 
    <div class="update-dialog" title="Update Common Name">Which instructor do you want to update? 
     <p><input type="radio" id="instructor_23" name="instructor" value="23"/> 
      <label for="instructor_23">Instructor ID: 23, Common Name: John E. Coons</label> 
     </p> 

     <p> 
      <input type="radio" id="instructor_17447" name="instructor" value="17447"/> 
      <label for="instructor_17447">Instructor ID: 17447, Common Name: John E Coons</label> 
     </p>Which common name do you want to assign the instructor? 

     <p> 
      <input type="radio" id="commonName_23" name="common_name" value="John E. Coons"/> 
      <label for="commonName_23">John E. Coons</label> 
     </p> 

     <p> 
      <input type="radio" id="commonName_17447" name="common_name" value="John E Coons"/> 
      <label for="commonName_17447">John E Coons </label> 
     </p> 

    </div> 

    <button class="update-button" type="button">Update Common Name of an Instructor</button> 
</div> 


<script src="http://code.jquery.com/jquery-2.0.3.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
$(document).ready(function() { 
     // creates dialog in div 
     $("div.update-dialog").dialog({ 
      autoOpen: false, 
      dialogClass: 'dialogStyle', 
      resizable: false, 
      modal: true, 
      buttons: { 
       "Update": function() { 
       //$.load('update_common_name.php', 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    // FIX THIS: DIALOG DOES NOT OPEN ON CLICK 
    $('div.editable').on('click', 'button.update-button', function() { 
     $(this).closest('div.editable').find('.update-dialog').dialog("open"); 

     // alert test returns "undefined" 
     alert($(this).closest('div.editable').find('.update-dialog').prop("class")); 

    }); 




    $('input:radio').change(function() {   

     if ($(this).attr('name') === 'instructor') { 
      instructor_id = $(this).val(); 
     } 
     if ($(this).attr('name') === 'common_name') { 
      common_name = $(this).val(); 
     } 
     alert(instructor_id + common_name); 
    }); 


}); 
</script> 
</body> 
</html>

est-il ici sur jsFiddle: http://jsfiddle.net/5fKYn/. Est-ce que le DOM change après que le dialogue a été associé à la div?

Source

2013-09-04 Leon Helmsley

Quelqu'un connaître? –

Le DOM change-t-il après que le dialogue a été associé à la div? –

A condition que vous aurez plus d'un « .editable » sur la page, vous devez utiliser une approche de style plug-in pour le câblage le beahaviour vous essayez d'atteindre:

$(function() { 

    jQuery(".editable").each(function() 
    { 
     var $this = jQuery(this); 
     // Select the button within the scope of the current ".editable" 
     var $btnUpdate = jQuery(".update-button", $this); 

     // Create the dialog within the scope of the current ".editable" 
     var $dialogElm = $("div.update-dialog", $this).dialog({ 
     autoOpen: false, 
     dialogClass: 'dialogStyle', 
     resizable: false, 
     modal: true, 
     buttons: { 
      "Update": function() { 
      //$.load('update_common_name.php', 
       $(this).dialog("close"); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
     }); 

     // Attach button behaviour with in the scope of the current ".editable" 
     $btnUpdate.on('click', function() { 
      $dialogElm.dialog("open"); 
     }); 

     $('input:radio', $this).change(function() {   
      if ($(this).attr('name') === 'instructor') { 
       instructor_id = $(this).val(); 
      } 
      if ($(this).attr('name') === 'common_name') { 
       common_name = $(this).val(); 
      } 
      alert(instructor_id + common_name); 
     }); 

    }); 
});

Source

2013-09-04 23:34:12

Question de noob: comment ce style aide-t-il? –

Il vous permet d'avoir plusieurs instances d'une fonctionnalité donnée sans utiliser d'ID et évite d'avoir à réexécuter des recherches d'éléments jQuery() chaque fois que vous interagissez avec lui après l'initial .onReady() –

La boîte de dialogue est déplacée de sa position dans le DOM pour être un élément racine de la balise body. C'est une manière assez courante de traiter les dialogues.

changer votre code à

$('div.editable').on('click', 'button.update-button', function() { 
    $('.update-dialog').dialog('open'); 
    $('.update-dialog').prop('class'); 
});

fonctionnera, mais je vous recommande d'utiliser des identificateurs d'identité plutôt que la classe puisque tous les dialogues seront au même niveau DOM.

Fiddle

Source

2013-09-04 23:32:16 DGS

Merci, je ne le savais pas. Existe-t-il une documentation expliquant le mouvement de cette boîte de dialogue? –

Je ne suis pas sûr, vous pouvez facilement voir le changement en regardant le DOM avec des outils de développement si. – DGS

JQuery: Impossible d'ouvrir la boîte de dialogue

Répondre

Questions connexes