संपादित करें:मैं jQuery UI संवाद के भीतर से सबमिट बटन क्यों नहीं ट्रिगर कर सकता हूं?
कुछ लोगों ने सीधे फॉर्म पर सबमिट करने का सुझाव दिया है। यह वह नहीं है जिसे मैं हासिल करने की कोशिश कर रहा हूं। मैं चाहता हूं कि, विशेष रूप से, इनपुट प्रकार = 'सबमिट' पर क्लिक() ईवेंट को कॉल करने में सक्षम होने के लिए और इसे सामान्य रूप से फ़ॉर्म सबमिट करें। jQuery UI संवाद इस सामान्य व्यवहार में हस्तक्षेप करता प्रतीत होता है। कृपया जेएसफ़ील्ड लिंक को मैंने बनाया है, क्योंकि समस्या वहां पर फिर से रचनात्मक है।
(पहले मैं पहले से ही StackOverflow पर इस सवाल को देखा है बंद, लेकिन इस सवाल का जवाब मेरी स्थिति में काम नहीं करता: jQuery UI Dialog with ASP.NET button postback)
वांछित व्यवहार:
मेरी पृष्ठ पर मैं दोनों है एक छिपी हुई फ़ील्ड और सबमिट बटन (जो सीएसएस के माध्यम से छिपा हुआ है)।
मैं क्या करना चाहता हूं प्रोग्रामिंग के लिए जावास्क्रिप्ट का उपयोग इस बटन पर क्लिक करें, जिससे फॉर्म सबमिट किया जा सके। सबसे महत्वपूर्ण बात .... मैं इसे सब एक jQuery UI संवाद के अंदर से ट्रिगर करना चाहता हूं। असल में, उपयोगकर्ता jQuery UI संवाद के अंदर चयन करेगा जो पूरे पृष्ठ को सबमिट और पुनः लोड करने का कारण बन जाएगा।
समस्या वक्तव्य
एक बटन इस तरह क्लिक ट्रिगर सामान्य रूप से प्रपत्र प्रस्तुत करने के लिए ठीक काम करता है। हालांकि, जब यह एक jQuery UI संवाद के भीतर से कार्यवाही शुरू होती है तो यह विफल हो जाती है।
जैसा कि आप मेरे जेएसफ़िल्ड कोड में देख सकते हैं, मैं सबमिट बटन पर jQuery के क्लिक() फ़ंक्शन को कॉल करता हूं .... लेकिन फ़ॉर्म वास्तव में सबमिट नहीं करता है! बटन वास्तव में जावास्क्रिप्ट द्वारा क्लिक किया जा रहा है, लेकिन "फ़ॉर्म सबमिट व्यवहार" स्वयं नहीं होता है। पृष्ठ पोस्ट नहीं किया गया है।
मेरा मानना है कि jQuery UI संवाद किसी भी तरह से फ़ॉर्म के साथ हस्तक्षेप कर रहा है बटन को मैं प्रोग्रामेटिक रूप से क्लिक करने का प्रयास कर रहा हूं।
कारण मैं प्रोग्राम के रूप में बटन पर क्लिक ट्रिगर करना चाहते हैं:
मैं संवाद अंदर स्थित बटन नहीं किया जा सकता है बटन खुद को प्रस्तुत करें। मेरे मामले में, मैंने एक पुन: प्रयोज्य जावास्क्रिप्ट नियंत्रण बनाया है जो एक jQuery UI संवाद को लपेटता है। यह जेएस नियंत्रण उपयोगकर्ताओं को एक कर्मचारी लेने की अनुमति देता है। हालांकि, जब कोई कर्मचारी चुना जाता है, वांछित व्यवहार हमेशा होने के लिए नहीं होता है: फॉर्म सबमिट करें। (कभी कभी मैं पृष्ठ पर उठाया कर्मचारी को प्रदर्शित करने और एक अभी तक प्रस्तुत प्रदर्शन नहीं कर सकते हैं।)
अतिरिक्त विवरण:
यह समस्याASP.NET के लिए विशिष्ट नहीं है, लेकिन यहाँ कुछ अतिरिक्त जानकारी दी जा रही यह समझाने में मदद करने के लिए कि मैं यह सब क्यों कर रहा हूं। मैं .NET 4.5 का उपयोग कर एएसपी.NET वेब फॉर्म ऐप लिख रहा हूं। मैंने अपने पृष्ठों के लिए जावास्क्रिप्ट का अधिक से अधिक उपयोग करना शुरू कर दिया है, लेकिन इस विशेष पृष्ठ पर मैं सर्वर पर एक वास्तविक पोस्टबैक ट्रिगर करना चाहता हूं ताकि मैं ASP.NET पृष्ठ जीवन चक्र से बटन क्लिक ईवेंट को संभाल सकूं और ग्रिड व्यू को पॉप्युलेट कर सकूं। यही कारण है कि मैं एएसपी पर क्लिक करने के लिए जावास्क्रिप्ट का उपयोग करने में सक्षम होना चाहता हूं: बटन, बदले में, एक फॉर्म सबमिट करता है।
और सबसे महत्वपूर्ण बात ... यह अपने आप का प्रयास करें --->, फिर नीचे jsFiddle लिंक .....
देखें इस मुद्दे यह ASP.NET के लिए विशिष्ट नहीं। मैं नियमित एचटीएमएल और jQuery यूआई का उपयोग कर जेएसफ़िल्ड पर एक ही समस्या को फिर से बनाने में सक्षम हूं।
आप कोड में देख सकते हैं, मैं पहले से ही jQuery डोम हेरफेर के माध्यम से फार्म के अंदर jQuery यूआई संवाद हिलाने की "ठीक" का उपयोग करने का प्रयास किया: यहाँ JsFiddle कड़ी है। यह समस्या को ठीक करने के लिए प्रतीत नहीं होता है।
धन्यवाद! मैं किसी भी मदद की सराहना करता हूं!
एचटीएमएल
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
जावास्क्रिप्ट
$(document).ready(function()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function() {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function() {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm').click();
//alert($('#hdnEmployeeChosen').val());
});
});
सीएसएस
form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}