এএসপি.নেট বোতাম পোস্টব্যাকের সাথে jQuery ইউআই ডায়ালগ

Question

আমার একটি এএসপি.নেট পৃষ্ঠায় একটি jQuery ইউআই ডায়ালগ দুর্দান্ত কাজ করছে:

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

কিন্তু বিটিএনবটন_ক্লিককে কখনই বলা হয় না ... আমি কীভাবে এটি সমাধান করব?

আরও তথ্য: আমি এই কোডটি ফর্মের দিকে ভাগ করে নেওয়ার জন্য যুক্ত করেছি:

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

তবে এখনও সাফল্য ছাড়া ...

Comments

LOL ... প্রথমে আমি ভেবেছিলাম আপনি আমার প্রশ্নটি চুরি করেছেন, তবে তারপরে আমি আপনাকে প্রথম জিজ্ঞাসা করতে দেখেছি। আমি FancyBox জন্য একই প্রশ্ন জিজ্ঞাসা করেছি - stackoverflow.com/questions/2686362/...

— nikib3ro

স্পষ্টভাবে appendTo () কল করার চেয়ে আরও ভাল উত্তর আছে। এই চেক করুন stackoverflow.com/a/20589833/2487549

— Foreever

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

FWIW, ফর্ম: প্রথম কৌশলটি আমার পক্ষে কার্যকর হয়নি।

তবে, ব্লগ নিবন্ধের কৌশলটি করেছে:

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

বিশেষত, ডায়ালগ ঘোষণায় এটি যুক্ত করুন:

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

Comments

আপনি যদি কোনও আপডেট প্যানেলে এটি না করেন তবে এই পদ্ধতিটি হ'ল আমি আমার বোতামগুলি (যা আমি একটি সম্পূর্ণ পোস্টব্যাক করতে চাই) কাজ করতে পারি।

— Merritt

এটির জন্য +1 এটি আমার পক্ষে কাজ করা একমাত্র কোড। আমি আপডেট প্যানেল ব্যবহার করছি না। ধন্যবাদ!!! আমার দিন বাঁচায়!

— অ্যালবার্ট লরে

+1: উপরের সমাধানগুলি যখন কাজ করে না তখন এটি আমার পক্ষে কাজ করে। এবং আমি আপডেটপ্যানেলটি ব্যবহার করছি।

— ভিভিয়ান নদী

ডায়ালগ বক্সটি পোস্টব্যাক আচরণের ফর্মটিতে ফিরে পাওয়ার সহজ এবং সর্বোত্তম সমাধান।

— গোল্ডবিশপ

Answer 4

জেকারি ইউআই v1.10 এ একটি অতিরিক্ত সেটিংস রয়েছে সে সম্পর্কে সচেতন হন। এখানে একটি appendTo সেটিং যে যোগ করা হয়েছে, মোকাবেলার ASP.NET কার্যসংক্রান্ত আপনি কি ফর্মটি করার উপাদান পুনরায় যোগ করার জন্য ব্যবহার করছেন।

চেষ্টা করুন:

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

Comments

এটি একই পৃষ্ঠায় 2 টি jquery ডায়ালগ সহ আমার পক্ষে কাজ করে না। আমি আশা করি এটি সঠিক সমাধান হিসাবে হবে।

— ম্যাথু লক

প্যারেন্ট ()। অ্যাপেন্ডটো ("ফর্ম") কৌশলগুলি কোনও মডেল ডায়ালগের সাথে কাজ করে না কারণ ওভারলে ডিভটি ফর্মের বাইরে থাকে এবং ডায়ালগটি coveringেকে রাখে (এটিকে অক্ষম করে তোলে)। Jquery 1.10 সহ এই নতুন অ্যাপেন্ডটো সম্পত্তিটি ব্যবহার করে, ওভারলে ডিভটি সঠিক জায়গায় স্থাপন করা হয়েছিল, তাই মডেল ডায়ালগটি সঠিকভাবে কাজ করেছিল।

— হাম্বাদ

এটি এখনই সঠিক উত্তর হওয়া উচিত কারণ অ্যাপ্লিকেশন সেটিং যুক্ত করতে jquery UI লাইব্রেরি আপডেট করা হয়েছে। ধন্যবাদ @ মাইক আমাকে অনেক সময় বাঁচিয়েছে।

— এজেপি

Answer 5

কেন এর উত্তর উপরে আমার জন্য কৌতুক করেনি। গৃহীত উত্তরের সমস্যাটি হ'ল এটি কেবলমাত্র যদি পৃষ্ঠায় কোনও একক মডেল থাকে তবে তা কাজ করে। আপনার যদি একাধিক মডেল থাকে, আপনি ডায়ালগটি শুরু করার সময় "ওপেন" প্যারামে এটি ইনलाइन করতে হবে, সত্যের পরে নয়।

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

আপনি যদি প্রথম গৃহীত উত্তরটি একাধিক মডেলের সাথে যা বলে তা করে থাকেন, তবে আপনি কেবল পৃষ্ঠায় সর্বশেষ মডেলটি ফায়ারিং পোস্টব্যাকগুলি সঠিকভাবে কাজ করতে পারবেন, সেগুলি নয়।

Comments

+1 একেবারে সত্য। আমার জন্য আমার সমস্যা স্থির। তবে কেন এটি প্রয়োজনীয়? আমি এটা বুঝতে পারি না।

— কলিন

Answer 6

মূলত এটি হ'ল কারণ jQuery DOM ব্যবহার করে ফর্ম ট্যাগগুলির বাইরে ডায়ালগটি সরিয়ে দেয় । ফর্ম ট্যাগগুলির মধ্যে এটিকে আবার সরিয়ে দিন এবং এটি ভাল কাজ করা উচিত। আপনি এটি ফায়ারফক্সের উপাদানটি পরীক্ষা করে দেখতে পারেন can

Comments

আমি এটিকে ফর্মের ভিতরে সরিয়ে নিয়েছি: jQuery ("# ​​ডায়ালগ") parent পিতামাতার () app তবে এখনও সমস্যাটি ...

— পল

আপনি বিটিএন বাটন অবজেক্টে অন্য কোনও jquery ইভেন্ট নিবন্ধভুক্ত করছেন না?

— চাদ রুপার্ট

এবং কখন আপনি ফর্মে এটি আবার রাখছেন? সঙ্গে সঙ্গে খোলা?

— চাদ রুপার্ট

jQuery (ফাংশন () {jQuery ("# ​​ডায়ালগ") dialog : 10}); jQuery ("# ​​কথোপকথন")। পিতামাতা ()। AppendTo (jQuery ("ফর্ম: প্রথম"));}); এটা কি হওয়া উচিত।

— চাদ রুপার্ট

এবং এখনও কোন আনন্দ নেই? খুব কমপক্ষে আপনি যখন বোতামটি ক্লিক করেন, যদি কোনও ফর্মে থাকে তবে এটি কোনও পোস্টের কারণ হতে পারে। আপনি কি আদৌ জেএস ত্রুটি পাচ্ছেন? মডেলটি বন্ধ হচ্ছে না কিছু?

— চাদ রুপার্ট

Answer 7

আমার প্রকল্পের প্রতিটি সংলাপের জন্য আমি এই সমস্যাটি ঘিরে কাজ করতে চাইনি, তাই আমি একটি সাধারণ jQuery প্লাগইন তৈরি করেছি। এই প্লাগইনটি কেবল নতুন ডায়ালগ খোলার জন্য এবং এএসপি.নেট ফর্মের মধ্যে এগুলি রাখার জন্য :

(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

কোনও মডেল কথোপকথনের জন্য খুব তাড়াতাড়ি হতে পারে

— ওল্ফগ্যাং ফাহাল

মোহনীয়ভাবে কাজ করা

— মজোনারজ

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

এএসপি.এনইটি দিয়ে UseSubmitBehavior="false"আপনার এএসপি.নেট বোতামটিতে কেবল ব্যবহার করুন :

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

তথ্যসূত্র: বাটন.উসস্মিতবিভেয়ার সম্পত্তি

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 UI নমুনায় কিছু অতিরিক্ত কোড দেওয়া হয়েছে:

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