L'utilizzo della finestra di dialogo dell'interfaccia utente di jQuery ("destroy") inserisce l'elemento nel posto sbagliato?

Ho una grande forma con molte parti. Per ogni parte, voglio aggiungere un piccolo pulsante "Popup come finestra di dialogo" che convertirà quella parte in una finestra di dialogo su richiesta, e quindi (alla chiusura della finestra di dialogo) per tornare al modulo con i nuovi input.L'utilizzo della finestra di dialogo dell'interfaccia utente di jQuery ("destroy") inserisce l'elemento nel posto sbagliato?

Sto usando la funzione dialog() di UI di jQuery. Le parti a comparsa funzionano bene - la sotto-forma si converte in una finestra di dialogo. Tuttavia, quando dialogo ("distruggi") il sotto-modulo, l'elemento riappare, ma alla fine del documento DOM invece della posizione originale.

È una "funzione" di dialog()? Qualcosa da fare a riguardo? C'è un modo migliore per farlo senza usare dialog()?

fonte

2009-11-18 Sleepster

Sì , questa è una 'caratteristica' ... haha ... ci è andata dentro un po 'di tempo fa. Qui ci sono alcuni 'gotchyas' e poi un modo davvero hackity di trattare con loro (anche se efficace se hai intenzione di avere molti sottomoduli):

Quando si crea una finestra di dialogo, jquery lo ricorda, e lo memorizza in un div separato, quindi non lo riporterà mai (sì, la documentazione si trova nel senso che l'elemento non torna mai dove era)
La mia esperienza è stata che se dopo avessi incasinato troppo gli elementi nascosti, potresti rompere le future funzionalità di dialogo. È meglio semplicemente creare una nuova finestra di dialogo dai nuovi contenuti (specialmente se l'applicazione ha molti di questi ... codificare ogni sottomaschera manualmente diventerà noioso molto rapidamente).
Se non è possibile riutilizzare i div, dovrete clonare loro & rinominarli (che è quello che faccio qui di seguito)

alla chiusura della finestra di dialogo, il frammento di sotto 'cloni' il contenuto del la finestra di dialogo, rinomina l'attributo id, quindi aggiunge i contenuti modificati a un 'sub_form_container', generando così una nuova finestra di dialogo/modulo ogni volta che un utente chiude la finestra di dialogo. Spero che questo ti aiuti!

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

fonte

2009-11-18 03:45:15 btelles

Forse aggiungere del codice altro è difficile dire dove/perché il codice potrebbe non riuscire

Si potrebbe semplicemente fare così o simili

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

Verificare la presenza di un campione http://jsbin.com/ujema/

fonte

2009-11-18 02:39:35 jitter

questo ha funzionato per me:

Clone finestra
Inizializzare la finestra di clonato (quindi i soggiorni originali della pagina)
Rimuovere la finestra di clonato quando ho finito con si

esempio di codice:

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

fonte

2011-08-09 21:54:54 Andrew

Questo è fantastico. È più facile dell'approccio della risposta accettata. Questa è una "caratteristica" davvero schifosa, dovrebbero davvero risolvere questo schifo. – Milimetric

Molto efficace. Assicurati solo di non chiudere 'div's con' id's. – geowa4

Come gestiresti le modali con gli id? Tutto funziona a meno che non lo chiuda senza attivare la duplicazione. – Mikhail

L'utilizzo della finestra di dialogo dell'interfaccia utente di jQuery ("destroy") inserisce l'elemento nel posto sbagliato?

risposta

Problemi correlati