j.NET UI डायलॉग ASP.NET बटन पोस्टबैक के साथ

Question

मेरे पास ASP.NET पृष्ठ पर एक jQuery UI डायलॉग शानदार काम कर रहा है:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

मेरा div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

लेकिन btnButton_Click को कभी नहीं कहा जाता ... मैं इसे कैसे हल कर सकता हूं?

अधिक जानकारी: मैंने इस कोड को div बनाने के लिए जोड़ा:

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

लेकिन फिर भी सफलता के बिना ...

Comments

LOL ... पहले तो मुझे लगा कि आपने मेरा प्रश्न चुरा लिया है, लेकिन फिर मैंने देखा कि आपने पहले पूछा था। मैंने FancyBox के लिए एक ही सवाल पूछा है - stackoverflow.com/questions/2686362/…

— nikib3ro

स्पष्ट रूप से appendTo () कहने से बेहतर उत्तर है। इस stackoverflow.com/a/20589833/2487549

— 5

Answer 1

आप समाधान के करीब हैं, सिर्फ गलत वस्तु प्राप्त कर रहे हैं। यह इस तरह होना चाहिए:

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});

Comments

क्या होगा यदि इसके पास एक मोडल विकल्प सही है? मेरे मामले में समाधान एकदम सही है, लेकिन मोडल के बिना - मोडल के साथ, मोडल प्रभाव के लिए बनाई गई डिव को अभिभावक के साथ संवाद पर जगह है

— सैम्युअल मिरांडा

Answer 2

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

इस कोड का उपयोग करने से मेरी समस्या हल हो गई और इसने प्रत्येक ब्राउज़र, इंटरनेट एक्सप्लोरर 7, फ़ायरफ़ॉक्स 3 और गूगल क्रोम में काम किया। मैं jQuery से प्यार करना शुरू करता हूं ... यह एक शांत रूपरेखा है।

मैंने आंशिक रेंडर के साथ भी परीक्षण किया है, वास्तव में मैं क्या देख रहा था। महान!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>

Comments

इस पूरे उदाहरण ने मुझे इस समस्या का सामना करने में जो कुछ याद आ रहा था, उसे एक साथ जोड़ने में मदद की। धन्यवाद!

— दिली-ओ

Answer 3

एफडब्ल्यूआईडब्ल्यू, फॉर्म: पहली तकनीक मेरे लिए काम नहीं करती थी।

हालाँकि, उस ब्लॉग लेख में तकनीक ने किया था:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

विशेष रूप से, इसे संवाद घोषणा में जोड़कर:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }

Comments

यदि आप इसे अपडेट पैनल में नहीं करते हैं, तो यह तरीका एकमात्र तरीका है जिससे मैं अपने बटन प्राप्त कर सकता हूं (जो कि मैं एक पूर्ण पोस्टबैक करना चाहता हूं) काम करने के लिए।

— मेरिट

+1 इसके लिए मेरे लिए काम करने वाला एकमात्र कोड है। im अपडेट पैनल का उपयोग नहीं कर रहा है। धन्यवाद!!! मेरा दिन बचाया!

— अल्बर्ट लॉर

+1: यह मेरे लिए काम करता है जब ऊपर दिए गए समाधान काम नहीं करते। और मैं UpdatePanel का उपयोग कर रहा हूं।

— विवियन रिवर

पोस्टबैक व्यवहार के लिए डायलॉग बॉक्स को फॉर्म में वापस लाने का सबसे सरल और सबसे अच्छा समाधान।

— गोल्डबिशप

Answer 4

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

प्रयत्न:

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

Comments

यह मेरे लिए एक ही पृष्ठ पर 2 jquery संवादों के साथ काम नहीं करता है। काश यह सही समाधान होता।

— मैथ्यू लॉक

अभिभावक ()। परिशिष्ट ("फॉर्म") तकनीक ने एक मोडल डायलॉग के साथ काम नहीं किया क्योंकि ओवरले डिव फॉर्म के बाहर रहता है और डायलॉग को कवर करते हुए समाप्त होता है (इसे अक्षम कर देता है)। 1.10 के साथ इस नए परिशिष्ट संपत्ति का उपयोग करके, ओवरले डिव को सही जगह पर रखा गया था, इसलिए मोडल संवाद ने सही तरीके से काम किया।

— हम्बड्स

यह अब सही उत्तर होना चाहिए क्योंकि jquery UI लाइब्रेरी को appendTo सेटिंग जोड़ने के लिए अद्यतन किया गया है। शुक्रिया @ मायके ने मेरा बहुत समय बचाया।

— एजेपी

Answer 5

ऊपर केन का जवाब मेरे लिए चाल है। स्वीकृत उत्तर के साथ समस्या यह है कि यह केवल तभी काम करता है जब आपके पास पृष्ठ पर एक एकल मोडल हो। यदि आपके पास कई मोडल हैं, तो आपको डायलॉग को इनिशियलाइज़ करते हुए "ओपन" परम में इनलाइन करना होगा, तथ्य के बाद नहीं।

open: function(type,data) { $(this).parent().appendTo("form"); }

यदि आप वह करते हैं जो पहला स्वीकृत उत्तर आपको कई मॉडल्स के साथ बताता है, तो आप केवल पृष्ठ पर अंतिम मोडल प्राप्त करेंगे जो पोस्टिंग को ठीक से काम कर रहे हैं, उन सभी को नहीं।

Comments

+1 बिलकुल सच। मेरे लिए अपनी समस्या तय की। लेकिन यह क्यों जरूरी है? मैं यह पता नहीं लगा सकता।

— कॉलिन

Answer 6

मुख्य रूप से ऐसा इसलिए है क्योंकि jQuery डोम के उपयोग से फ़ॉर्म टैग के बाहर संवाद को स्थानांतरित करता है । इसे प्रपत्र टैग के अंदर वापस ले जाएं और इसे ठीक काम करना चाहिए। आप फ़ायरफ़ॉक्स में तत्व का निरीक्षण करके इसे देख सकते हैं।

Comments

मैंने इसे फ़ॉर्म के अंदर स्थानांतरित किया: jQuery ("# ​​संवाद")। माता-पिता ()। appendTo (jQuery ("फ़ॉर्म: पहले")); लेकिन समस्या अभी भी वहाँ है ...

— पॉल

आप btnButton ऑब्जेक्ट पर कोई अन्य jquery ईवेंट दर्ज नहीं कर रहे हैं?

— चाड रूपर्ट

और आप इसे वापस फॉर्म में कब डाल रहे हैं? खुलने के तुरंत बाद?

— चाड रूपर्ट

jQuery (फ़ंक्शन () {jQuery ("# ​​संवाद")। संवाद ({draggable: true, resizable: true, show: 'Transfer', Hide: 'Transfer', चौड़ाई: 320, autoOpen: false, minHeight: 10, minwidth : 10}); jQuery ("# ​​संवाद")। माता-पिता ()। परिशिष्ट (jQuery ("फ़ॉर्म: पहला");}); यह क्या होना चाहिए

— चाड रुप्पर्ट

और अभी भी कोई खुशी नहीं है? बहुत कम से कम जब आप बटन पर क्लिक करते हैं, यदि एक फॉर्म में, तो यह एक पोस्ट का कारण होना चाहिए। क्या आपको जेएस की गलतियाँ मिल रही हैं? मोडल बंद हो रहा है या कुछ भी नहीं?

— चाड रुप्पर्ट

Answer 7

मैं अपनी परियोजना में हर संवाद के लिए इस समस्या के आसपास काम नहीं करना चाहता था, इसलिए मैंने एक साधारण jQuery प्लगइन बनाया। यह प्लगइन केवल नए संवाद खोलने और उन्हें ASP.NET फॉर्म में रखने के लिए है:

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

इसलिए प्लगइन का उपयोग करने के लिए, आप पहले jQuery UI और फिर प्लगइन लोड करें। तो आप निम्न की तरह कुछ कर सकते हैं:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

स्पष्ट होने के लिए, यह प्लगइन मानता है कि जब आप इसे कहते हैं तो आप संवाद दिखाने के लिए तैयार हैं।

Answer 8

मुझे पता है कि यह एक पुराना सवाल है, लेकिन किसी के लिए भी, जो एक ही मुद्दा है एक नया और सरल समाधान है: jQuery UI 1.10.0 में एक "परिशिष्ट" विकल्प पेश किया गया है

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

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

Comments

हो सकता है कि यह बहुत ही शुरुआती संवाद के लिए हो

— वोल्फगैंग फाहल

आकर्षक ढंग से काम करना

— mzonerz 17

Answer 9

बहुत खुबस! इसने एएसपी के साथ मेरी समस्या को हल किया: बटन घटना jQuery मोडल के अंदर फायरिंग नहीं। कृपया ध्यान दें, निम्नलिखित के साथ jQuery UI मोडल का उपयोग करके बटन ईवेंट को आग लगाने की अनुमति देता है:

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

निम्नलिखित पंक्ति इस काम को प्राप्त करने की कुंजी है!

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

Answer 10

आपके द्वारा संवाद बनाने के बाद मैंने केवल निम्नलिखित पंक्ति जोड़ी:

$(".ui-dialog").prependTo("form");

Answer 11

यह मेरे लिए सबसे स्पष्ट समाधान था

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

dlg2आपके डेटाबेस में सम्मिलित करने के लिए सभी सामग्री उपलब्ध होगी। dialogआपका मिलान करने के लिए चर को बदलना न भूलें ।

Answer 12

ASP.NET के साथ बस UseSubmitBehavior="false"अपने ASP.NET बटन का उपयोग करें:

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />       

संदर्भ: बटन। UseSubmitBehavior संपत्ति

Answer 13

सबसे अधिक वोटों के साथ रॉबर्ट मैकलेन से समाधान 99% सही है। लेकिन इसके अलावा किसी और की आवश्यकता हो सकती है, जैसा कि मैंने किया है, जब भी आपको इस jQuery संवाद को खोलने की आवश्यकता होती है, तो इसे माता-पिता के साथ जोड़ना न भूलें। नीचे की तरह:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Comments

जैसा कि मेरे जवाब में 2 साल पहले कहा गया था, लेकिन फिर भी धन्यवाद!

— माइक

Answer 14

मोडल का उपयोग करते हुए इस कार्य को करने के लिए इस लाइन का उपयोग करें: सही विकल्प।

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

Answer 15

$('#dialog').parent().appendTo($("form:first"))समाधान आईई 9 में ठीक काम करता है लेकिन आईई 8 में यह संवाद दिखाई और सीधे गायब बनाता है। आप इसे तब तक नहीं देख सकते जब तक कि आप कुछ अलर्ट न रखें ताकि ऐसा लगे कि संवाद कभी प्रकट नहीं होता है। मैं एक सुबह एक समाधान खोजने में बिताता हूं जो दोनों संस्करणों पर काम करता है और एकमात्र समाधान जो दोनों संस्करणों पर काम करता है 8 और 9 है:

$(".ui-dialog").prependTo("form");

आशा है कि यह उन लोगों की मदद करता है जो एक ही मुद्दे से जूझ रहे हैं

Comments

मेरा मानना ​​है कि आप केवल मूल्य के UseSubmitBehaviorलिए बटन की संपत्ति निर्धारित कर सकते हैं false। इस तरह आपको किसी भी कॉल appendया prependकॉल की आवश्यकता नहीं है ।

— यूरी रोज़ोवेटसकी

Answer 16

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

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

अपने asp:buttonडायलॉग के अंदर जोड़ें , और यह अच्छी तरह से चलता है।

नोट: "उपयोगकर्ता बनाएँ" बटन पर क्लिक करने के बाद पोस्टबैक को रोकने के लिए आपको <बटन> से <इनपुट प्रकार = बटन> को बदलना चाहिए।

Answer 17

सटीक समाधान है;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});