asp.net - jQuery modal forma diálogo postback problemas

jquery-ui

Question

Creé un formulario modal jQuery UI y quiero que ese formulario active una devolución de datos, pero estoy teniendo dificultades para que funcione.

Sé que hay bastantes artículos basados ​​en el uso del complemento SimpleModal, y he intentado adaptarlos y anular la función _doPostback, pero sin alegría.

Creo que el problema está dentro de la llamada a mi función __doPostBack y cuáles deberían ser los parámetros. Es ese el caso?

Aquí está mi formulario

<form id="summaryForm" runat="server">
    <div id="dialog" title="Quick Booking">
        <p>Select user from list or enter name in box</p>
        <fieldset>
            <p><label>Is machine going out of the office?</label></p>
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />

            <label for="dropLstUser">User:</label>
            <asp:DropDownList ID="dropLstUser" runat="server" />
            <input type="text" name="txtUser" id="txtUser" value="" class="text" />
            <label for="txtStartDate">Start Date:</label>
            <input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
            <asp:HiddenField ID="assetField" runat="server" />
            <%--<button onclick="performPostBack(''summaryForm'')">Postback</button>--%>
        </fieldset>
    </div>
    //--------------------------------

Aquí está el código de JavaScript:

<script type="text/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();
        }
    }
</script>

Answer 1

Después de crear su diálogo, simplemente vuelva a colocar el diálogo en su forma. Ejemplo:

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

Esto funcionó para mí. Trabajos de postback encontrar.

Answer 2

Funciona como se esperaba cuando utilicé

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

en lugar de

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

Cuando agregamos el formulario y volvemos a abrir el diálogo, tuve problemas con los diseños y el índice z.

Answer 3

La opción "AppendTo" me funciona.

Diálogo $ ("# diálogo"). ({..., appendTo: "form"});

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

Answer 4

Logré resolver el problema, probablemente no de la mejor manera, pero esto es lo que hice.

El cuadro de diálogo no se devolvería porque jQuery UI saca el botón de enviar del formulario y lo agrega a la parte inferior de la etiqueta del cuerpo, por lo que cuando intentas devolver el botón, no sabe lo que está publicando.

Lo solucioné modificando el código de la interfaz de usuario jQuery cambiando esto:

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

A esto:

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

No es ideal modificar la biblioteca fuente, pero es mejor que nada.

Answer 5

Muchas gracias por el mensaje de csharpdev! El siguiente código lo hizo para mi página:

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

$("#photouploadbox").parent().appendTo($("form#profilform"));

Answer 6

Puedo hacer que esto funcione si tengo uno de cada uno. Un div, un script y un enlace. En mi caso, el diálogo permite al usuario dejar una "nota" por registro de la base de datos. No tengo ningún botón en mi cuadro de diálogo, solo el extremo superior derecho "x" predeterminado para cerrar el cuadro de diálogo.

Pero estoy tratando de hacer que esto funcione dentro de un bucle de consulta de ColdFusion . Múltiples registros, cada uno con su propio botón de diálogo, secuencia de comandos asociada y div. Estoy cambiando los ID dinámicamente para que sean únicos (es decir, se agrega un _XX donde XX es la clave principal de registro de todos los ID).

Cuando me extiendo a este modelo, tengo varios diálogos, scripts, divs ... Si abro cada diálogo para editar la "nota" correspondiente para ese registro, solo guardará el ÚLTIMO. ¿Debo hacer el .parent (). AppendTo en un botón, haga clic en vs. ¿automáticamente? En algún lugar se está confundiendo.

Si no abro ningún cuadro de diálogo (no realizo ningún cambio a través del cuadro de diálogo) y ejecuto un vuelco en los resultados del formulario, veo que todos los campos de diálogo aparecen en la publicación como se esperaba.

Cuando miro el HTML sin procesar producido ... Todos los ID son únicos y se llaman apropiadamente. Estaba pensando que estaba colisionando con un nombre / identificación conflictiva en algún lado, pero todo se ve bien en ese frente.

Mi guion

<script type="text/javascript">
    // Increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            width: 500,
            resizable: false
        });

        $(''.countable2'').jqEasyCounter({
            ''maxChars'': 2000,
        });

        // Dialog Link
        $(''##dialog_link#getALLFacilityEquipOrders.order_id#'').click(function(){
            $(''##dialog#getALLFacilityEquipOrders.order_id#'').dialog(''open'');
            return false;
        });

        //hover states on the static widgets
        $(''##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li'').hover(
            function() { $(this).addClass(''ui-state-hover''); },
            function() { $(this).removeClass(''ui-state-hover''); }
        );

        $("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
    });
</script>

Mi div:

<div id="dialog#getALLFacilityEquipOrders.order_id#"
     title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
     style="display:none;">

    <cfquery datasource="#a_dsn#" name="getOrderNotes">
        select notebody
        from QIP_EquipOrders_Notes
        where fk_order_id = #getALLFacilityEquipOrders.order_id#
    </cfquery>
    <fieldset class="qip_menu">
        <label><b>Enter/Edit Notes:</b></label>
        <textarea class="countable2"
                  id="notebody_#getALLFacilityEquipOrders.order_id#"
                  name="notebody_#getALLFacilityEquipOrders.order_id#"
                  rows="10"
                  cols="75">#getOrderNotes.notebody#</textarea>
    </fieldset>
</div>

Mi botón:

<a href="##"
   id="dialog_link#getALLFacilityEquipOrders.order_id#"
   class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>

Answer 7

Tenga en cuenta que hay una configuración adicional en jQuery UI v1.10. Hay una configuración appendTo que se ha agregado para abordar la solución alternativa de ASP.NET que está utilizando para volver a agregar el elemento al formulario.

Tratar:

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

Answer 8

Un truco descarado que he usado es crear un botón .NET normal junto con cuadros de texto, etc. dentro de un div en la página, usando jQuery obtener el HTML para ese div, agregarlo al diálogo, y luego eliminar el HTML dentro del original div para evitar la duplicación de id.

<div id="someDiv" style="display: none">
    <p>A standard set of .net controls</p>
    <asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
    <input id="button1" type="button" value="Confirm"  onclick="SomeEvent();" />
</div>

Y el guion:

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

Answer 9

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

La función __doPostBack toma el control que causa la devolución de datos y un argumento si es necesario. Sus ejemplos de JavaScript y su marcado no parecen coincidir. Por ejemplo, donde he citado anteriormente, hace referencia a aspnetForm, cambia esto a la ID del formulario y vuelve a intentarlo.

Asegúrese de que la ID que utiliza para el script del cliente sea la misma que la del cliente del control ASP.NET en tiempo de ejecución. Si un control reside en un INamingContainer, tendrá una identificación única basada en su contenedor principal, por lo que YourControlID se convertirá en YourINaminContainerID_YourControlID.

Háganos saber el resultado.