jQuery formulario modal diálogo devolución de mensaje

Question

He creado un formulario modal jQuery UI, y quiero que ese formulario active una devolución de datos, pero estoy teniendo dificultades para hacerlo funcionar.

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 son los parámetros deben ser. Es ese el caso?

Aquí es mi forma

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

Este es el código 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

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

La función __doPostBack toma el control, que es causa de la devolución de datos y un argumento si es necesario. no parecen sus ejemplos de JavaScript y su margen de beneficio para que coincida. 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 la secuencia de comandos del cliente sea la misma que la del cliente ASP.NET en tiempo de ejecución. Si un control reside en un INamingContainer entonces tendrá un identificador único basado en su contenedor principal, por lo que se convertirá en YourControlID YourINaminContainerID_YourControlID.

sepamos el resultado.

Answer 2

me las arreglé para resolver el problema - probablemente no sea la mejor manera, pero aquí es lo que hice.

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

llegué alrededor de esta modificando el código jQuery UI 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 para modificar la biblioteca de origen, pero es mejor que nada .

Answer 3

Un truco descarado que he utilizado es crear un botón normal de .NET junto con cuadros de texto, etc., dentro de un div en la página, usando jQuery obtener el HTML para que div, añadirlo al cuadro de diálogo, y luego retire el HTML dentro del div original 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 guión:

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

Answer 4

Después de crear el diálogo simplemente mover el diálogo de vuelta a 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 5

Muchas gracias por el puesto de csharpdev! El siguiente código lo hizo por 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 conseguir este funcionamiento 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 en un bucle de consulta ColdFusion .. Múltiples registros, cada uno con su propio botón de diálogo, script asociado 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 mediante el cuadro de diálogo) y ejecuto un volcado 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 script:

<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

Sé consciente de que hay un ajuste adicional en jQuery UI v1.10. Hay una configuración appendTo que se ha agregado para solucionar la solución ASP.NET que está utilizando para volver a agregar el elemento al formulario.

Probar:

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

Answer 8

Funciona como se esperaba cuando utilicé

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

en lugar de

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

Cuando añadimos a la forma y volver a abrir el cuadro de diálogo, que tenía problemas con diseños y z-index.

Answer 9

La opción "AppendTo" me funciona.

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

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