problemi di postback della finestra di dialogo modale jQuery

Ho creato un modulo modale UI jQuery e desidero che il modulo attivi un postback, ma ho difficoltà a farlo funzionare.

So che ci sono alcuni articoli basati sull’uso del plugin SimpleModal, e ho provato ad adattare questi e sovrascrivere la funzione _doPostback, ma senza gioia.

Penso che il problema sia nella chiamata alla mia funzione __doPostBack e quali dovrebbero essere i parametri. È questo il caso?

Ecco la mia forma

//--------------------------------

Ecco il codice JavaScript:

  $(function() { $("#dialog").dialog({ bgiframe: true, height: 300, modal: true, buttons: { 'Close': function() { alert("closing"); $(this).dialog("close"); __doPostBack = newDoPostBack; __doPostBack("aspnetForm",null); } } }); }); function newDoPostBack(eventTarget, eventArgument) { alert("postingback"); var theForm = document.forms[0]; if (!theForm) { theForm = document.aspnetForm; } if (!theForm.onsubmit || (theForm.onsubmit() != false)) { document.getElementById("__EVENTTARGET").value = eventTarget; document.getElementById("__EVENTARGUMENT").value = eventArgument; theForm.submit(); } }  

Dopo aver creato la finestra di dialogo, sposta semplicemente la finestra di dialogo nel modulo. Esempio:

  $("#divSaveAs").dialog({bgiframe:false, autoOpen:false, title:"Save As", modal:true}); $("#divSaveAs").parent().appendTo($("form:first")); 

Questo ha funzionato per me. Trovati lavori di postback.

Tieni presente che è disponibile un’impostazione aggiuntiva in jQuery UI v1.10. È stata aggiunta un’impostazione appendTo, per risolvere il problema in ASP.NET che si sta utilizzando per aggiungere nuovamente l’elemento al modulo.

Provare:

 $("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" }); 

L’opzione “AppendTo” funziona con me.

$ (“# dialog”). dialog ({…, appendTo: “form”});

Vedi: http://api.jqueryui.com/dialog/#option-appendTo

Mille grazie per il post di csharpdev! Il seguente codice l’ha fatto per la mia pagina:

 $("#photouploadbox").dialog({ autoOpen: false, modal: true, buttons: { "Ok": function() { $(this).dialog("close"); } }, draggable: false, minWidth: 400 }); $("#photouploadbox").parent().appendTo($("form#profilform")); 

Hock che ho usato è quello di creare un normale pulsante .NET insieme a caselle di testo, ecc. All’interno di un div sulla pagina, usando jQuery ottenere l’ HTML per quel div, aggiungerlo alla finestra di dialogo e quindi rimuovere l’HTML all’interno dell’originale div per evitare la duplicazione dell’ID.

  

E la sceneggiatura:

 var html = $("#someDiv").html(); $("#dialog").append(html); $("#someDiv").remove(); $("#dialog").dialog({ bgiframe: true, height: 300, modal: true }); 

Sono riuscito a risolvere il problema, probabilmente non nel modo migliore, ma ecco quello che ho fatto.

La finestra di dialogo non avrebbe postback perché l’ interfaccia utente di jQuery estrae il modulo di invio dal modulo e lo aggiunge alla parte inferiore del tag del corpo, quindi quando si tenta di postback del pulsante non sa cosa sta postando.

Ho capito questo modificando il codice dell’interfaccia utente jQuery cambiando questo:

 uiDialog = (this.uiDialog = $('
')) .appendTo(document.body) .hide() .addClass( 'ui-dialog ' + 'ui-widget ' + 'ui-widget-content ' + 'ui-corner-all ' + options.dialogClass )

A questa:

 uiDialog = (this.uiDialog = $('
')) .appendTo(document.forms[0]) .hide() .addClass( 'ui-dialog ' + 'ui-widget ' + 'ui-widget-content ' + 'ui-corner-all ' + options.dialogClass )

Non è l’ideale per modificare la libreria di origine, ma è meglio di niente.

Funziona come previsto quando l’ho usato

 $("#divDlg").dialog("destroy"); 

invece di

 $("#divDlg").dialog("close").appendTo($("#Form1")).hide(); 

Quando accodiamo al form e riapriamo la finestra di dialogo, ho riscontrato problemi con layout e z-index.

 'Close': function() { alert("closing"); $(this).dialog("close"); __doPostBack = newDoPostBack; __doPostBack("aspnetForm", null); }}});}); 

La funzione __doPostBack prende il controllo che causa il postback e un argomento se necessario. I tuoi esempi JavaScript e il tuo markup non sembrano corrispondere. Ad esempio, dove ho citato sopra, si fa riferimento a aspnetform, si modifica l’ID del modulo e si riprova.

Assicurarsi che l’ID che si utilizza per lo script client sia uguale all’ID client del controllo ASP.NET in fase di runtime. Se un controllo risiede in un INamingContainer, allora avrà un id univoco basato sul suo contenitore genitore, quindi YourControlID diventerà YourINaminContainerID_YourControlID.

Fateci sapere il risultato.

Posso farlo funzionare se ne ho uno di ciascuno. Un div, uno script e un link. Nel mio caso, la finestra di dialogo consente all’utente di lasciare una “nota” per ogni record del database. Non ho alcun pulsante nella mia finestra di dialogo, solo l’impostazione predefinita in alto a destra “x” per chiudere la finestra di dialogo.

Ma sto cercando di farlo funzionare all’interno di un ciclo di query ColdFusion . Più record, ognuno con il proprio pulsante di dialogo, script associato e div. Sto cambiando gli ID in modo dinamico in modo che siano tutti unici (ovvero aggiungendo un _XX dove XX è la chiave primaria del record per tutti gli ID).

Quando mi diletto su questo modello, ho più windows di dialogo, script, div .. Se apro ogni finestra di dialogo per modificare la “nota” corrispondente per quel record, salverà solo l’ULTIMO. Dovrei fare il .parent (). AppendTo su un pulsante clicca contro automaticamente? Da qualche parte si sta confondendo.

Se non apro nessuna finestra di dialogo (non apportare modifiche tramite la finestra di dialogo) ed eseguo un dump sui risultati del modulo, vedo tutti i campi di dialogo che arrivano sul post come previsto.

Quando guardo l’HTML grezzo prodotto … Tutti gli ID sono unici e sono chiamati appropriatamente. Stavo pensando che stavo per avere collisioni su un nome / id conflittuale da qualche parte, ma sembra tutto a posto.

La mia sceneggiatura:

  

Il mio div:

  

Il mio pulsante:

 Notes