jQuery मोडल फॉर्म संवाद पोस्टबैक समस्याएं

Question

मैंने jQuery UI मॉडल फॉर्म बनाया है, और मैं चाहता हूं कि वह फॉर्म पोस्टबैक ट्रिगर करे, लेकिन मुझे इसे काम करने में कठिनाई हो रही है।

मुझे पता है कि सरल मॉड्यूल प्लगइन का उपयोग करने के आधार पर बहुत सारे लेख हैं, और मैंने इन्हें अनुकूलित करने और _doPostback फ़ंक्शन को ओवरराइड करने का प्रयास किया है, लेकिन बिना किसी खुशी के।

मुझे लगता है कि समस्या मेरे __doPostBack फ़ंक्शन पर कॉल के भीतर है और पैरामीटर क्या होना चाहिए। क्या यह मामला है?

यहाँ मेरी प्रपत्र

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

है यहाँ जावास्क्रिप्ट कोड है:

<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); 
     }}});}); 

__doPostBack समारोह नियंत्रण जो पोस्टबैक और एक बहस का कारण बनता है यदि आवश्यक है लेता है। आपके जावास्क्रिप्ट उदाहरण और आपका मार्कअप मेल नहीं लग रहा है। उदाहरण के लिए, जहां मैंने ऊपर उद्धृत किया है, आप एस्पनेटफॉर्म का संदर्भ देते हैं, इसे फ़ॉर्म की आईडी में बदलें और पुनः प्रयास करें।

सुनिश्चित करें कि क्लाइंट स्क्रिप्ट के लिए उपयोग की जाने वाली आईडी रनटाइम पर ASP.NET नियंत्रण की क्लाइंट आईडी के समान है। यदि नियंत्रण एक इनमिंग कंटनर में रहता है तो उसके पास उसके मूल कंटेनर के आधार पर एक अनन्य आईडी होगी, इसलिए आपका कंट्रोलिड आपकाININCINAINERID_YourControlID बन जाएगा।

हमें परिणाम बताएं।

Answer 2

मैं समस्या को हल करने में कामयाब रहा - शायद सबसे अच्छा तरीका नहीं है लेकिन यहां मैंने जो किया है।

संवाद पोस्टबैक नहीं करेगा क्योंकि jQuery UI सबमिट बटन को फॉर्म से बाहर ले जाता है और इसे बॉडी टैग के नीचे जोड़ता है, इसलिए जब आप बटन को पोस्टबैक करने का प्रयास करते हैं तो यह नहीं जानता कि यह पोस्टिंग क्या है।

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

इस के लिए

:

मैं इस बदलकर jQuery यूआई कोड को संशोधित करके इस दौर मिला

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

यह स्रोत पुस्तकालय संशोधित करने के लिए आदर्श नहीं है, लेकिन यह कुछ नहीं से बेहतर है ।

Answer 3

एचटीएमएल एक मुखर हैक मैं का इस्तेमाल किया है, बक्सें, पृष्ठ पर एक div भीतर आदि के साथ-साथ एक सामान्य .NET बटन बनाने के लिए, jQuery कि div के लिए HTML मिल का उपयोग करते हुए संवाद में जोड़ने, और फिर हटाने है आईडी डुप्लिकेशन से बचने के लिए मूल div के भीतर।

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

और स्क्रिप्ट:

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

Answer 4

बनाने अपने संवाद बस अपने प्रपत्र में वापस ले जाने के बाद संवाद। उदाहरण:

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

यह मेरे लिए काम करता है। पोस्टबैक काम करता है।

Answer 5

csharpdev के पद के लिए बहुत धन्यवाद! निम्नलिखित कोड अपने पृष्ठ के लिए यह किया:

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

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

Answer 6

मैं अगर मैं प्रत्येक में से एक है यह काम करना आरंभ कर सकते हैं। एक div, एक स्क्रिप्ट, और एक लिंक। मेरे मामले में, संवाद उपयोगकर्ता को प्रति डेटाबेस रिकॉर्ड "नोट" छोड़ने की अनुमति दे रहा है। मेरे संवाद पर मेरे पास कोई बटन नहीं है, संवाद को बंद करने के लिए केवल डिफ़ॉल्ट ऊपरी दाएं "x" है।

लेकिन मैं इसे ColdFusion क्वेरी लूप के भीतर काम करने की कोशिश कर रहा हूं .. एकाधिक रिकॉर्ड, जिनमें से प्रत्येक का अपना संवाद बटन, संबंधित स्क्रिप्ट और div है। मैं गतिशील रूप से आईडी बदल रहा हूं, इसलिए वे सभी अद्वितीय हैं (यानी, एक _XX जोड़ना जहां एक्सएक्स सभी आईडी के लिए रिकॉर्ड की प्राथमिक कुंजी है)।

जब मैं इस मॉडल में विस्तार करता हूं, जिसमें एकाधिक संवाद, स्क्रिप्ट, divs होते हैं .. यदि मैं उस रिकॉर्ड के लिए संबंधित "नोट" को संपादित करने के लिए प्रत्येक संवाद खोलता हूं, तो यह केवल अंतिम को बचाएगा। क्या मुझे .parent() जोड़ना चाहिए। बटन पर स्वचालित रूप से बनाम बनाम क्लिक करें? कहीं यह भ्रमित हो रहा है।

यदि मैं कोई संवाद नहीं खोलता (संवाद के माध्यम से कोई परिवर्तन नहीं करता) और फॉर्म परिणामों पर डंप चलाता हूं, तो मुझे उम्मीद है कि सभी संवाद फ़ील्ड उम्मीद के अनुसार पोस्ट पर आ रहे हैं।

जब मैं कच्चे एचटीएमएल उत्पादित करता हूं ... सभी आईडी अद्वितीय होती हैं और उन्हें उचित रूप से बुलाया जाता है। मैं सोच रहा था कि मैं किसी विवादित नाम/आईडी पर टक्कर लगी थी, लेकिन यह सब उस मोर्चे पर अच्छा लग रहा था।

मेरे स्क्रिप्ट:

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

मेरे 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> 

मेरे बटन:

<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

बारे में पता jQuery यूआई v1.10 में एक अतिरिक्त सेटिंग है कि वहां मौजूद रहें। ASP.NET वर्कअराउंड को संबोधित करने के लिए, जिसे आप फॉर्म में तत्व को दोबारा जोड़ने के लिए उपयोग कर रहे हैं, को जोड़ने के लिए जोड़ा गया है।

प्रयास करें:

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

Answer 8

यह उम्मीद के रूप में जब मैं हम फॉर्म को संलग्न करें और संवाद को पुनः खोलें जब

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

की

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

बजाय प्रयोग किया काम करता है, मैं मुद्दों था लेआउट और जेड इंडेक्स के साथ।

Answer 9

"AppendTo" विकल्प मेरे लिए काम करता है।

$ ("# संवाद")। संवाद ({..., संलग्न करें: "फ़ॉर्म"});

देखें: http://api.jqueryui.com/dialog/#option-appendTo