puede enviar un formulario dentro de un diálogo modal de jquery

Question

Tengo un formulario dentro de un cuadro de diálogo modal de jquery ui, cuando hago clic en el botón de enviar no pasa nada. ¿Hay alguna manera de enviar un formulario dentro de un diálogo modal de jquery sin tener que codificar botones dentro de javascript?

Aquí está mi fragmento de código;

<script> 
    // increase the default animation speed to exaggerate the effect 

    $(function() { 
     $("#dialog").dialog({ 
      autoOpen: false, 
      draggable: false, 
      resizable: false, 
        modal: true, 

     }); 

     $("#opener").click(function() { 
      $("#dialog").dialog("open"); 
      return false; 
     }); 
    }); 

    function SetValues() 
    { 
     var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ; 
     document.getElementById('divCoord').innerText = s; 

    } 
    </script> 

<div id="dialog" title="new task"> 
     <form method="post" action="/projects/{{ project.slug }}/"> 
      <div class="form-row"> 
       <label class="required" for="title">task type</label> 
       <select name="type"> 
       {% for TaskType in project.tasktype_set.all %} 
        <option value="{{ TaskType.name }}">{{ TaskType.name }}</option> 
       {% endfor %} 
       </select> 
      </div> 
      <div id="buttons"> 
       <input type="submit" value="create"/> 
      </div> 
     </form> 
</div> 

<button id="opener">new task</button> 

si elimino "modal: true," para que el diálogo no sea modal, se enviará.

Answer 1

podría utilizar el $ .post() o $ .ajax() desde dentro de su ejemplo de diálogo:

$("#dialog").dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    modal: true, 
    buttons: { 
     "Save": function() { 
      var type = $("#type option:selected").val(); 
      $.post("/projects/{{project.slug}}/", {type:type}, function(data) { 
       alert(data);// ---> data is what you return from the server 
      }, 'html'); 
     }, 
     "Close": function(){ 
      $(this).dialog('close'); 
     } 

    } 
}); 

acaba de dar su selecto etiqueta de un id a ...... hace que sea más fácil jala el valor también deshacerte del botón de entrada, ya que ahora tendrás el botón guardar del diálogo.

Answer 2

Tiene que volver a mover el cuadro de diálogo a su formulario. Haga esto después de crear el diálogo. como:

$("#dialog").parent().appendTo($("form:first")); 

ACTUALIZACIÓN: ¿Por qué su formulario incluido en ti de diálogo? ¿Tienes dos formas? Intenta mover el formulario para que sea el contenedor. A continuación se muestra el código completo que creo que debería funcionar:

<script> 
// increase the default animation speed to exaggerate the effect 

$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     draggable: false, 
     resizable: false, 
       modal: true, 

    }); 

    $("#dialog").parent().appendTo($("form:first")); 

    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 
}); 

function SetValues() 
{ 
    var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ; 
    document.getElementById('divCoord').innerText = s; 

} 
</script> 

<form id="form1" method="post" action="/projects/{{ project.slug }}/"> 
    <div id="dialog" title="new task"> 
     <div class="form-row"> 
      <label class="required" for="title">task type</label> 
      <select name="type"> 
      {% for TaskType in project.tasktype_set.all %} 
       <option value="{{ TaskType.name }}">{{ TaskType.name }}</option> 
      {% endfor %} 
      </select> 
     </div> 
     <div id="buttons"> 
      <input type="submit" value="create"/> 
     </div> 
    </div> 
</form> 

<button id="opener">new task</button>