L'utilisation du dialogue de jQuery UI ("détruire") place l'élément au mauvais endroit?

J'ai une grande forme avec beaucoup de pièces. Pour chaque partie, je veux ajouter un petit bouton "Popup as Dialog" qui va convertir cette partie en un dialogue à la demande, puis (à la fermeture de la boîte de dialogue) pour revenir au formulaire avec les nouvelles entrées. J'utilise la fonction dialog() de jQuery UI. Les parties pop-up fonctionnent correctement - la sous-forme est convertie en une boîte de dialogue. Cependant, lorsque je dialogue ("détruire") le sous-formulaire, l'élément apparaît de nouveau, mais à la fin du document DOM au lieu de l'emplacement d'origine.L'utilisation du dialogue de jQuery UI ("détruire") place l'élément au mauvais endroit?

Est-ce une "caractéristique" de dialog()? Quelque chose à faire à ce sujet? Y a-t-il une meilleure façon de le faire sans utiliser dialog()?

Source

2009-11-18 Sleepster

Oui , c'est une 'fonctionnalité' ... haha ... y est tombé dessus il y a quelque temps. Voici quelques « gotchyas », puis une façon vraiment hackity de traiter avec eux (quoique efficace si vous avez l'intention d'avoir de nombreux sous-formulaires):

Lorsque vous créez une boîte de dialogue, jquery se souvient, et stocke dans un div séparé, alors ne le remet jamais (oui, la documentation réside dans le sens que l'élément ne retourne jamais à l'endroit où il était)
Mon expérience a été que si vous faites trop de désordre avec les éléments cachés, vous pourriez casser la fonctionnalité de dialogue future. Il est préférable de créer simplement une nouvelle boîte de dialogue à partir de nouveaux contenus (surtout si votre application en contient plusieurs ... coder chaque sous-formulaire à la main deviendra fastidieux très rapidement).
Si vous ne pouvez pas réutiliser les années div, vous devrez les cloner & les renomment (qui est ce que je fais ci-dessous)

A la fermeture de la boîte de dialogue, l'extrait ci-dessous « clones » le contenu de la boîte de dialogue, renomme son attribut id, puis ajoute le contenu modifié à un 'sub_form_container', générant ainsi un tout nouveau dialogue/formulaire chaque fois qu'un utilisateur ferme la boîte de dialogue. J'espère que cela t'aides!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <link type="text/css" href="ui.css" rel="stylesheet" /> 
    <script type="text/javascript" src="j.js"></script> 
    <script type="text/javascript" src='ui.js'></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
       newDialogs(2); 
    });  
    function newDialogs(idCounter) { 
     $('#d1').unbind().bind('click', function() { 
     $('#d'+ idCounter.toString()).dialog({close: function(event, ui){ 
      var newSubForm = $('#d'+idCounter.toString()).clone(); 
       idCounter += 1; 
       newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', ''); 
      $('#sub_form_container').append(newSubForm); 
      newDialogs(idCounter); 
      $('ui-dialog').remove() 
      } 
     }); 
     }); 
    } 

    </script> 

</head> 
    <body> 
    <h1>Element above</h1> 
    <div> 
     <div id='d1'>Activate dialog</div> 
     <div id='sub_form_container'> 
     <div id='d2'>Dialog content <input type='text' /></div> 
     </div> 
    </div> 
    <h1>Element below</h1> 
    </body> 
</html>

Source

2009-11-18 03:45:15 btelles

Peut-être ajouter un peu de code sinon il est difficile de dire où/pourquoi votre code peut échouer

Vous pouvez tout simplement faire comme ceci ou similaire

<input id="text" name="textname" type="text"> 
<input 
    type="button" 
    value="Pop me up" 
    onclick="$('#text').clone().dialog({ 
    modal:true, 
    close: function(event, ui) { 
     $('#text').val(this.value); 
    } 
    });" 
>

Vérifier un échantillon http://jsbin.com/ujema/

Source

2009-11-18 02:39:35 jitter

Cela a fonctionné pour moi:

Clone la boîte de dialogue
Initialiser la boîte de dialogue cloné (donc les des séjours originaux sur la page)
Retirez la boîte de dialogue clonées quand je suis fait avec il

exemple de code:

$('a.popup-modal').click(function(e){ 
    var $modal = $(this).closest('form').find('.modal').clone(); 
    $modal.dialog({ 
     autoOpen: true, 
     close: function(event, ui){ 
      $(this).remove(); 
     } 
    }); 
});

Source

2011-08-09 21:54:54 Andrew

C'est génial. C'est plus facile que l'approche de la réponse acceptée. Ceci est une "fonctionnalité" vraiment merdique, ils devraient vraiment réparer cette merde. – Milimetric

Très efficace. Assurez-vous de ne pas fermer 'div's avec' id's. – geowa4

Comment traiteriez-vous les modaux avec des identifiants? Tout fonctionne à moins que je le ferme sans déclencher la duplication. – Mikhail

L'utilisation du dialogue de jQuery UI ("détruire") place l'élément au mauvais endroit?

Répondre

Questions connexes