Eingangs innerhalb Jquery UI Dialog nicht gesendet werden?

Question

Die Eingabefelder in meinem Dialogfeld werden nicht bekannt gegeben worden, und ich bin nicht sicher, warum ...

ich es auf dem Mac Firefox und Safari getestet habe, und Fenster IE & Firefox mit den gleichen Ergebnissen, so dass ich glaube nicht, es ist der Browser, und die Felder schreiben in Ordnung, wenn ich das Dialogfeld zu deaktivieren.

Ich habe die jQuery UI-Dokumente erneut zu lesen und nicht finden kann, was ich falsch mache ... Es scheint unwahrscheinlich, dass das Dialogfeld nicht eingegeben unterstützen würde.

hier ist eine verkürzte Version des Codes ich verwende:

<script type="text/javascript">
 $(document).ready(function(){
  $("#dialog").dialog({
   autoOpen: false,
   buttons: {
    "OK": function() {
     $(this).dialog('close');
    }
   }
  });
  $("#publishSettings").click(function(){
   $("#dialog").dialog('open');
  });
 });
</script>

<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
 <div id="dialog">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 </div>
 <input type="submit" name="pubArticle" value="Publish">
</form>

Nichts Außergewöhnliches, nicht wahr? Warum wird nicht diese Arbeit für mich!?

Danke!

Answer 1

Wenn JQuery das Dialogfeld öffnet sich, es bewegt sich außerhalb der Form.

Hier ist die Lösung dafür:

jQuery UI Dialog mit ASP.NET Schaltfläche Postback

im Grunde in Ihrem Fall:

var dlg =  $("#dialog").dialog({ 
   autoOpen: false, 
   buttons: { 
    "OK": function() { 
     $(this).dialog('close'); 
    } 
   } 
  }); 
dlg.parent().appendTo($("#yourformId")); 

sollte es beheben.

Answer 2

Ich weiß, dass dies eine alte Frage, aber für alle, die das gleiche Problem haben, gibt es eine neuere und einfachere Lösung: eine „appendTo“ Option in jQuery UI 1.10.0

eingeführt

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

$("#dialog").dialog({
    appendTo: "form"
    ....
});

Answer 3

Ich bin mir ziemlich sicher, dass jQuery UI bricht den Dialog Abschnitt von seinem normalen Platz in dem dom und bewege sich dann an einen anderen Ort. Das wäre aus dem Formular übergeordneten Elements Ihr Eingangselement nehmen. Sie können keine Form ohne Formelement einreichen, ist also, warum es funktioniert nicht.

Ich würde vorschlagen, die HTML-Umschreiben wie:

<div id="dialog">
<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 <input type="submit" name="pubArticle" value="Publish">
</form>
</div>

Wenn die publishSettings Taste nicht im Popup sein muss, dann könnte man es aus der Form bewegen und erfassen nur seinen Wert auf das Ereignis vor und macht ihn als versteckte Eingabeelement hinzufügen, bevor irgendetwas vorgelegt wird.

Viel Glück.

Answer 4

Auf html5 kompatiblen Browsern (nicht IE, aber neueste ff, Chrom und Safari Unterstützung it), können Sie die „Form“ Attribut auf Ihre Eingabefelder festgelegt und damit können Sie sie platzieren, wo Sie wollen. Ich litt auch dieses Problem und dauerte einige Zeit, um herauszufinden, warum also nicht Dialogeingaben gesendet haben.

Answer 5

Ich hatte das gleiche Problem und die Lösung war (wie user2100025 sagte), um den „appendTo =‚#yourform‘,“ in Ihrem Code hinzuzufügen. Hier ist mein Code und es funktioniert gut.

Ich hoffe, es helo jemand:)

<script>
    $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      resizable: false,
      modal: true,
      appendTo: '#myform',
      buttons: {
        "Yes"function() {
            $( '#myform' ).submit();
        },
        'No' function() {
            $(this).dialog('close');
        }
      }
    });

    $( "#button" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>