Mit dem Dialog von jQuery UI ("destroy") wird das Element an die falsche Stelle gesetzt?

Ich habe eine große Form mit vielen Teilen. Für jeden Teil möchte ich einen kleinen Knopf "Popup als Dialog" hinzufügen, der diesen Teil in einen Dialog bei Bedarf konvertiert und dann (beim Schließen des Dialogs) zurück zum Formular mit den neuen Eingaben geht.Mit dem Dialog von jQuery UI ("destroy") wird das Element an die falsche Stelle gesetzt?

Ich benutze die dialog() -Funktion von jQuery UI. Die Popup-Teile funktionieren gut - die Unterform wird in einen Dialog umgewandelt. Wenn ich jedoch das Unterformular dialog ("zerstören"), erscheint das Element zurück, aber am Ende des DOM-Dokuments anstelle des ursprünglichen Speicherortes.

Ist dies ein "Feature" von dialog()? Was soll ich dagegen tun? Gibt es eine bessere Möglichkeit dies ohne dialog() zu tun?

Quelle

2009-11-18 Sleepster

Ja , das ist ein "Feature" ... haha ... ist vor einer Weile hineingelaufen. Hier ein paar ‚gotchyas‘ sind und dann ein wirklich hackity Art und Weise des Umgangs mit ihnen (wenn auch wirksam, wenn Sie viele subforms haben vorhast):

Wenn Sie einen Dialog zu erstellen, erinnert sich jquery es und speichert sie in einem separaten div, dann legt es nie zurück (yep, die Dokumentation liegt in dem Sinne, dass das Element nie dahin zurückgeht, wo es war)
Meine Erfahrung war, dass, wenn Sie danach die versteckten Elemente zu viel durcheinander bringen, Sie könnten zukünftige Dialogfunktionen unterbrechen. Es ist besser, nur ein neues Dialogfeld aus neuen Inhalten zu erstellen (besonders, wenn Ihre Anwendung viele davon hat ... das Codieren jedes Unterformulars von Hand wird sehr schnell mühsam).
Wenn Sie nicht die divs wiederverwenden können, werden Sie klonen müssen sie & sie umbenennen (das ist, was ich tun unten)

Nach den Dialog zu schließen, das Snippet unten ‚Klonen‘ der Inhalt Der Dialog benennt sein ID-Attribut um und hängt den geänderten Inhalt an einen 'sub_form_container' an, so dass jedes Mal, wenn ein Benutzer den Dialog schließt, ein neues Dialogfeld/Formular erstellt wird. Hoffe das hilft!

<!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>

Quelle

2009-11-18 03:45:15 btelles

Vielleicht etwas Code hinzufügen, sonst ist es schwer zu sagen, wo/warum könnte Ihr Code

scheitern Sie es gerade tun könnte so oder ähnlich

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

prüfen für eine Probe http://jsbin.com/ujema/

Quelle

2009-11-18 02:39:35 jitter

Dieser arbeitete für mich:

Clonen der Dialog
den geklonte Dialog initialisieren (so die ursprünglichen Aufenthalte auf der Seite)
Entfernen Sie den geklonten Dialog, wenn ich fertig bin mit

Codebeispiel:

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

Quelle

2011-08-09 21:54:54 Andrew

Das ist genial. Es ist einfacher als die akzeptierte Antwort. Das ist ein wirklich beschissenes "Feature", sie sollten diesen Mist wirklich reparieren. – Milimetric

Sehr effektiv. Stellen Sie nur sicher, dass Sie 'div' mit 'id's nicht schließen. – geowa4

Wie würdest du mit modals mit id umgehen? Alles funktioniert, wenn ich es nicht schließe, ohne die Duplizierung auszulösen. – Mikhail

Mit dem Dialog von jQuery UI ("destroy") wird das Element an die falsche Stelle gesetzt?

Antwort

Verwandte Themen