क्या आप एक jquery मोडल डायलॉग

Question

के भीतर एक फॉर्म सबमिट कर सकते हैं मेरे पास एक jquery ui मोडल डायलॉग के अंदर एक फॉर्म है, जब मैं सबमिट बटन पर क्लिक करता हूं तो कुछ भी नहीं होता है। जावास्क्रिप्ट के भीतर कोड बटन के बिना jquery मोडल संवाद में कोई फ़ॉर्म सबमिट करने का कोई तरीका है?

यहां मेरा कोड स्निपेट है;

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

यदि मैं संवाद को गैर-मोडल बनाने के लिए "मोडल: सत्य" हटा देता हूं, तो यह सबमिट होगा।

Answer 1

आप $ .post() या $ .ajax() से अपने संवाद जैसे भीतर इस्तेमाल कर सकते हैं:

$("#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'); 
     } 

    } 
}); 

सिर्फ करने के लिए ...... यह करने के लिए आसान बना देता है अपने चुनिंदा टैग एक आईडी देना मूल्य खींचो। इनपुट बटन से छुटकारा पाएं, क्योंकि अब आप संवाद से बटन बचाएंगे।

Answer 2

आपको संवाद को अपने रूप में वापस ले जाना होगा। संवाद बनाने के बाद ऐसा करें। जैसे:

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

अद्यतन: क्यों अपने प्रपत्र आप में शामिल है संवाद? क्या आपके पास दो रूप हैं? फॉर्म को कंटेनर के रूप में स्थानांतरित करने का प्रयास करें।

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