Jquery UI संवाद में "पुष्टि" संवाद कैसे लागू करें?

Question

मैं बदसूरत javascript:alert()बॉक्स को बदलने के लिए JQuery UI डायलॉग का उपयोग करने का प्रयास कर रहा हूं । मेरे परिदृश्य में, मेरे पास मदों की एक सूची है, और उनमें से प्रत्येक व्यक्ति के बगल में, मेरे पास उनमें से प्रत्येक के लिए "हटाएं" बटन होगा। psuedo html सेटअप कुछ इस प्रकार होगा:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

JQ भाग में, दस्तावेज़ तैयार होने पर, मैं सबसे पहले div को आवश्यक बटन के साथ एक मोडल डायलॉग होने के लिए सेटअप करूंगा, और उन "a" को हटाने के लिए पुष्टि करने से पहले फायरिंग सेट कर दूंगा, जैसे:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

ठीक है, यहाँ समस्या है। init समय के दौरान, संवाद का कोई पता नहीं होगा कि कौन (आइटम) इसे आग देगा, और आइटम आईडी (!) भी। मैं उन पुष्टिकरण बटन के व्यवहार को कैसे सेट कर सकता हूं, यदि उपयोगकर्ता अभी भी हां का चयन करता है, तो वह इसे हटाने के लिए लिंक का पालन करेगा?

Comments

यहाँ इसे करने के लिए प्लगइन का उपयोग करना आसान है: stackoverflow.com/questions/6457750/form-confirm-before-submit

Looooong ने समाधान के लिए खोज की: stackoverflow.com/a/18474005/1876355

— पियरे

Answer 1

मुझे बस उसी समस्या को हल करना था। इसे काम करने की कुंजी यह थी कि जिस लिंक के साथ आप पुष्टि कार्यक्षमता का उपयोग करना चाहते हैं (यदि आप इसे एक से अधिक लिंक के लिए उपयोग करना चाहते हैं) के लिए इवेंट हैंडलर dialogमें आंशिक रूप से आरंभ किया जाना चाहिए click। ऐसा इसलिए है क्योंकि लिंक के लिए लक्ष्य URL को पुष्टि बटन क्लिक के लिए ईवेंट हैंडलर में इंजेक्ट किया जाना चाहिए। मैंने यह दर्शाने के लिए CSS क्लास का इस्तेमाल किया कि किन लिंक्स में पुष्टिकरण व्यवहार होना चाहिए।

यहाँ मेरा समाधान है, एक उदाहरण के लिए उपयुक्त होना सार।

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

मुझे विश्वास है कि यह आपके लिए काम करेगा, यदि आप सीएसएस वर्ग ( confirmLinkमेरे उदाहरण में) के साथ अपने लिंक उत्पन्न कर सकते हैं ।

इसमें कोड के साथ एक jsfiddle है।

पूर्ण प्रकटीकरण के हित में, मैं ध्यान दूंगा कि मैंने इस विशेष समस्या पर कुछ मिनट बिताए और मैंने इस प्रश्न का एक समान उत्तर प्रदान किया , जो उस समय स्वीकृत उत्तर के बिना भी था।

Comments

+1 लगभग काम करता है ... लेकिन सुधार के लिए @lloydphillips से जवाब देखें

— rohancragg

किसी और को नोटिस करता है कि यह एक UpdatePanel के अंदर एक पूर्ण PostBack का कारण होगा? आप इसे कैसे ठीक करते हैं?

— होमर

इस जवाब और @lloydphillips के जवाबों के बारे में कुछ ऐसा है जो मेरे लिए बिलकुल नहीं है। मूल प्रश्न "डिलीट" बटन (लिंक) के संदर्भ में है। सामान्य तौर पर, एक ऑपरेशन के लिए एक लिंक (HTTP जीईटी) का उपयोग करना अनुचित है जो राज्य को बदलता है (जैसे कि DELETE)। ये दोनों उत्तर मानते हैं कि उपयोगकर्ता के पास जावास्क्रिप्ट सक्षम है। यदि जावास्क्रिप्ट को अक्षम किया गया है, तो लिंक आग लग जाएंगे और पुष्टि के बिना डिलीट (या अन्य जो भी) संचालन होगा, जो कि कैटरोफ़िक हो सकता है। मैं एक जवाब खोजने की उम्मीद कर रहा था जो इस मुद्दे से निपटे।

— गूंज

@echo: मैंने उसी के बारे में सोचा। इसे उचित बनाने के लिए मुझे लगता है कि एक और पेज होना चाहिए जो कि पुष्टि करता है कि जेएस अक्षम है या नहीं। यदि JS इस पृष्ठ को छोड़ा जा सकता है। हो सकता है कि एक और पैरामीटर के माध्यम से पुष्टि की तरह = सच हो। जेएस के खाते में और उसके बिना मामलों को लेने के लिए वास्तव में कठिन और बोझिल। वेब विकास एक गड़बड़ है।

— रॉबश

@ श्री निश्चित आप एक फ़ंक्शन का उपयोग कर सकते हैं जो एक पैरामीटर के रूप में उपयोग करने के लिए आईडी का नाम लेता है और पास किए गए आईडी के लिए ईवेंट हैंडलर सेट करने के लिए jQuery कॉल करता है।

— पॉल मोरी

Answer 2

मुझे पता चला कि पॉल ने इसका जवाब नहीं दिया, क्योंकि जिस तरह से वह विकल्प सेट कर रहे थे, उस दौरान डायलॉग पर क्लिक करने पर तुरंत गलत हो गया था। यहाँ मेरा कोड है जो काम कर रहा था। मैंने इसे पॉल के उदाहरण से मेल करने के लिए नहीं बनाया है, लेकिन कुछ तत्वों के संदर्भ में यह केवल बिल्ली की मूंछ का अंतर है। आपको इसे पूरा करने में सक्षम होना चाहिए। क्लिक इवेंट पर बटन के लिए संवाद विकल्प के सेटर में सुधार है।

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

आशा है कि यह किसी और की मदद करता है क्योंकि यह पोस्ट मूल रूप से मुझे सही रास्ते पर ले गई, मुझे लगा कि मैं सुधार को बेहतर पोस्ट करूंगा।

Comments

मैं यह नहीं देख रहा हूं कि आपने जो किया वह पॉल के जवाब से अलग था।

— ग्रांट बिर्चमियर जूल

मुझे ठीक लगता है। केवल एक चीज मैं onइसके बजाय उपयोग करना चाहूंगा click, क्योंकि यह काम करना जारी रखेगा (उदाहरण के लिए) यदि फ़ील्ड को jQuery - api.jquery.com/on

— हारून न्यूटन

हा "बिल्ली की मूंछ का अंतर" - मुझे उस वाक्यांश का अधिक उपयोग करने की आवश्यकता है।

— चाड गोर्शिंग

Answer 3

मैंने jquery ui पुष्टि संवाद के लिए अपना स्वयं का फ़ंक्शन बनाया है। यहाँ कोड है

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

अब अपने कोड में इसका उपयोग करने के लिए, बस निम्नलिखित लिखें

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

जारी रखें।

Comments

यह एक अच्छा समाधान है, यह मेरे लिए बहुत समान है जिसे मैं अजाक्स यूआरएल प्राप्त करने और त्वरित प्रदर्शन के लिए उपयोग करता हूं ... फ़ंक्शन JQueryDialog (url) {$ ("# संवाद")। remove (); $ ("शरीर")। परिशिष्ट ("<div आईडी = 'संवाद' शीर्षक = 'www.mysite.com'> </ div>"); $ ("# संवाद")। लोड (url) .dialog ({resizable: false, चौड़ाई: 770, height: 470, modal: true, बटन: {"Close": () {$ (this) .dialog "करीब"); $ ("# संवाद")। हटा ();}}}}; }

— 21

Answer 4

सरल और छोटा समाधान जो मैंने अभी आजमाया है और यह काम करता है

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

फिर बस अपने लिंक पर कक्षा = "पुष्टि" जोड़ें और यह काम करता है!

Comments

.Text संदेश पूछता है "सुनिश्चित करें?" लेकिन हां / नहीं, ठीक / रद्द करने का विकल्प न दें। यदि उपयोगकर्ता "सुनिश्चित" या "निश्चित नहीं" हैं, तो कैसे इंगित करता है?

— जिनी

Answer 5

यह मेरा समाधान है .. मुझे आशा है कि यह किसी को भी मदद करता है। यह नकल के बजाय मक्खी पर लिखा है इसलिए मुझे किसी भी गलती के लिए क्षमा करें।

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

व्यक्तिगत रूप से मुझे यह समाधान पसंद है :)

संपादित करें: क्षमा करें .. मुझे वास्तव में इसे और अधिक विस्तार से बताना चाहिए। मुझे यह पसंद है क्योंकि मेरी राय में इसका एक सुरुचिपूर्ण समाधान है। जब उपयोगकर्ता उस बटन पर क्लिक करता है जिसे पहले पुष्टि करने की आवश्यकता होती है तो घटना को रद्द कर दिया जाता है क्योंकि उसे होना चाहिए। जब पुष्टिकरण बटन पर क्लिक किया जाता है तो समाधान एक लिंक क्लिक को अनुकरण नहीं करना है, लेकिन मूल बटन पर उसी मूल jquery घटना (क्लिक) को ट्रिगर करने के लिए है जो पुष्टि संवाद नहीं होने पर ट्रिगर हो गया होता। एकमात्र अंतर एक अलग ईवेंट नेमस्पेस (इस मामले में 'पुष्टिकरण') है, ताकि पुष्टिकरण संवाद फिर से नहीं दिखाया जा सके। Jquery देशी तंत्र फिर से ले सकता है और चीजें उम्मीद के मुताबिक चल सकती हैं। एक अन्य लाभ यह बटन और हाइपरलिंक्स के लिए इस्तेमाल किया जा सकता है। मुझे आशा है कि मैं पर्याप्त स्पष्ट था।

Comments

अपनी पोस्ट को संपादित करने पर विचार करें और समुदाय को बताएं कि आप इस समाधान को क्यों पसंद करते हैं। यह आपके लिए क्या बेहतर बनाता है?

— फ़िज़िकल लॉजिक

मैंने पोस्ट को एडिट किया। मुझे उम्मीद है कि अब यह अधिक समझ में आता है। जब मैंने लिखा तो यह इतना स्पष्ट लग रहा था कि टिप्पणी की कोई आवश्यकता नहीं थी। क्या फर्क पड़ता है जब मैंने इसे थोड़ी देर के बाद फिर से देखा ... :)

— BineG

बहुत साफ समाधान के रूप में एक महान! इवेंट नेमस्पेस के बारे में पहले कभी नहीं पढ़ा। उसके लिए धन्यवाद!

— ग्रिफला

BEAAUUTIFULLL! "..लेकिन मूल बटन पर एक ही देशी jquery घटना (क्लिक) को ट्रिगर करने के लिए .." beauutifulll लगता है !! धन्यवाद $("#btn").trigger("click.confirmed");

— इरफ

Answer 6

मुझे पता है कि यह एक पुराना सवाल है लेकिन यहाँ MVC4 में HTML5 डेटा विशेषताओं का उपयोग करके मेरा समाधान दिया गया है:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

जेएस कोड:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Comments

मुझे यह समाधान पसंद है, धन्यवाद। समझने में आसान है, और मेरे लिए काम करता है। मैंने @ Url.Action भाग का उपयोग नहीं किया, लेकिन यह मेरे सर्वर-साइड MVC (PHP / Symfile2) द्वारा उत्पन्न URL के साथ काम करता है।

— आलसी

Answer 7

ये करेगा?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Comments

इस उत्तर के लिए धन्यवाद। मुझे यकीन है कि मैं इसका परीक्षण करूंगा (और अभी तक यह कार्यात्मक दिखता है)। मैंने कई उत्तरों में से एक समस्या को देखा, जो सामान्यता की कमी है। यदि पृष्ठ पर नियंत्रण (या लिंक या अन्य) का एक और सेट है, जिसकी पुष्टि की आवश्यकता है, तो लगता है कि हमें सहभागिता / कार्रवाई पर कई घोषणाओं की आवश्यकता है। पुराना जावास्क्रिप्ट तरीका, यानी, href = "जावास्क्रिप्ट: पुष्टि ('link_url');" सरल और सुरुचिपूर्ण है और सभी समान मामलों के अनुरूप है। बेशक जावास्क्रिप्ट विधि बहुत ही अड़ियल है कि लोग w / o जावास्क्रिप्ट पूरी तरह से लिंक को याद करेंगे। एक बार फिर महान जवाब के लिए thx।

— xandy

Answer 8

ऊपरोक्त अनुसार। पिछली पोस्ट मुझे सही रास्ते पर ले गई। यह मैंने कैसे किया है। विचार तालिका में प्रत्येक पंक्ति के बगल में एक छवि है (डेटाबेस से PHP स्क्रिप्ट द्वारा उत्पन्न)। जब कोई छवि क्लिक की जाती है, तो उपयोगकर्ता URL पर पुनर्निर्देशित हो जाएगा, और परिणामस्वरूप, jQuery UI डायलॉग के भीतर क्लिक किए गए रिकॉर्ड से संबंधित कुछ डेटा दिखाते हुए उपयुक्त रिकॉर्ड डेटाबेस से हटा दिया जाएगा।

जावास्क्रिप्ट कोड:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

संवाद div:

<div id="confirmDelete" title="Delete User?"></div> 

छवि लिंक:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

इस तरह आप डायलॉग बॉक्स में PHP लूप मानों को पार कर सकते हैं। वास्तव में कार्रवाई करने के लिए केवल नकारात्मक पक्ष GET विधि का उपयोग कर रहा है।

Answer 9

इस बारे में कैसा है:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

मैंने इस html पर इसका परीक्षण किया है:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

यह पूरे ली तत्व को हटा देता है, आप इसे अपनी आवश्यकताओं पर अनुकूलित कर सकते हैं।

Answer 10

(03/22/2016 के अनुसार, पेज से डाउनलोड लिंक काम नहीं करता है। मैं यहाँ लिंक छोड़ रहा हूँ अगर डेवलपर इसे किसी बिंदु पर ठीक कर देता है क्योंकि यह एक बहुत छोटा प्लगइन है। मूल पोस्ट निम्नानुसार है। वैकल्पिक, और एक कड़ी जो वास्तव में काम करती है: jquery.confirm ।)

यह आपकी आवश्यकताओं के लिए बहुत सरल हो सकता है, लेकिन आप इस jQuery पुष्टि प्लगइन की कोशिश कर सकते हैं । यह वास्तव में उपयोग करने के लिए सरल है और कई मामलों में काम करता है।

Comments

लिंक मुझे एक लिंक्ड-इन प्रोफ़ाइल की ओर ले जाता है। लगता है कि आप प्लगइन नहीं देख सकते जब तक कि आप एक प्रीमियम लिंक्ड-इन मेंबर न हों।

— ज़ेन

मैंने लिंक को अपडेट किया तो यह फिर से काम करता है। डेवलपर को अपने लिंक्डइन प्रोफाइल में पुराने लिंक को पुनः निर्देशित करना होगा। यदि वह इसे फिर से बदल देती है तो बस इसे "jquery पुष्टि प्लगइन nadia" का उपयोग करके Google करें।

— ग्रहमैड्स

धन्यवाद! जबकि मैंने पहले ही अपना संस्करण लागू कर दिया है, फिर भी मेरी नज़र रहेगी।

— ज़ेन

लिंक फिर से मर चुका है

— वल्मास

Answer 11

मैं जितना अधिक ईवैल का उपयोग करने से नफरत करता हूं, यह मेरे लिए सबसे आसान तरीका लगता था, विभिन्न परिस्थितियों के आधार पर बहुत सारी समस्याएं पैदा किए बिना। जावास्क्रिप्ट सेटलमेंट फ़ंक्शन के समान।

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

Answer 12

मैं खुद इस में भाग गया और एक समाधान के साथ समाप्त हुआ, जो यहां कई उत्तरों के समान है, लेकिन थोड़ा अलग तरीके से लागू किया गया है। मुझे जावास्क्रिप्ट के कई टुकड़े, या कहीं प्लेसहोल्डर div पसंद नहीं आया। मैं एक सामान्यीकृत समाधान चाहता था, जिसे तब प्रत्येक उपयोग के लिए जावास्क्रिप्ट में जोड़े बिना HTML में उपयोग किया जा सकता था। यहाँ मैं के साथ आया था (यह jquery यूआई की आवश्यकता है):

जावास्क्रिप्ट:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

और फिर HTML में, किसी भी जावास्क्रिप्ट कॉल या संदर्भ की आवश्यकता नहीं है:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

चूंकि शीर्षक विशेषता का उपयोग div सामग्री के लिए किया जाता है, इसलिए उपयोगकर्ता बटन के ऊपर मंडराने से भी पुष्टि प्रश्न प्राप्त कर सकता है (यही कारण है कि मैंने टाइल के लिए शीर्षक विशेषता को उपयोगकर्ता नहीं किया है)। पुष्टिकरण विंडो का शीर्षक ऑल्ट टैग की सामग्री है। जावास्क्रिप्ट स्निप को एक सामान्यीकृत .js में शामिल किया जा सकता है, और बस एक क्लास लगाने से आपके पास एक बहुत पुष्टिकरण विंडो होती है।

Answer 13

$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

Answer 14

नोट: टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं है, लेकिन Bineg का जवाब ASPX पृष्ठों के साथ होमबैक और इको द्वारा हाइलाइट किए गए पोस्टबैक मुद्दों को हल करने में पूरी तरह से काम करता है। सम्मान में, यहाँ एक गतिशील संवाद का उपयोग कर एक भिन्नता है।

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

Answer 15

ऊपर की एक और भिन्नता जहां यह जाँचती है कि क्या नियंत्रण 'एस्प: लिंकबटन' या 'एस्प: बटन' है जो दो अलग-अलग HTML नियंत्रणों के रूप में प्रस्तुत होता है। मेरे लिए बस ठीक काम करने लगता है, लेकिन यह बड़े पैमाने पर परीक्षण नहीं किया है।

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

Answer 16

मैं ASP.NET ग्रिडव्यू (कमांड्स में ग्रिड व्यू कंट्रोल बिल्ड) के भीतर लिंक-बटन पर उपयोग करने के लिए इसे देख रहा था, इसलिए डायलॉग में "कन्फर्म" कार्रवाई को रन-टाइम पर ग्रिडव्यू नियंत्रण द्वारा उत्पन्न स्क्रिप्ट को सक्रिय करने की आवश्यकता है। यह मेरे लिए काम किया:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

Comments

eval () हानिकारक हो सकता है! वैसे, मुझे आपके कोड के इस हिस्से का हवाला देना होगा: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);इसका कोई मतलब नहीं है!

— Sk8erPeter

Answer 17

मुझे पता है कि यह सवाल पुराना है, लेकिन यह मेरा पहली बार था जब मुझे एक पुष्टिकरण संवाद का उपयोग करना पड़ा। मुझे लगता है कि यह ऐसा करने का सबसे छोटा तरीका है।

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

मुझे आशा है कि आप इसे पसंद करते हो :)

Answer 18

व्यक्तिगत रूप से मैं इसे कई ASP.Net MVC अनुप्रयोगों के कई विचारों में एक आवर्ती आवश्यकता के रूप में देखता हूं।

इसलिए मैंने एक मॉडल वर्ग और एक आंशिक दृश्य को परिभाषित किया:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

और मेरा आंशिक दृश्य:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

और फिर, हर बार जब आपको किसी दृश्य में इसकी आवश्यकता होती है, तो आप बस @ Html.Partial का उपयोग करते हैं (अनुभाग स्क्रिप्ट में ऐसा किया था ताकि JQuery परिभाषित हो):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

ट्रिक JQueryClickSelector को निर्दिष्ट करने के लिए है जो उन तत्वों से मेल खाएगा जिनकी पुष्टि संवाद की आवश्यकता है। मेरे मामले में, वर्ग SyLinkDelete के साथ सभी एंकर लेकिन यह एक पहचानकर्ता, एक अलग वर्ग आदि हो सकता है। मेरे लिए यह एक सूची थी:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

Comments

JQuery के साथ ASP.Net MVC।

— फ्रेडरिक सैमसन

Answer 19

बहुत लोकप्रिय विषय और Google को "jquery डायलॉग क्लोज किस इवेंट को क्लिक किया गया" क्वेरी के लिए यह मिलता है। मेरा समाधान हाँ, NO, ESC_KEY, X घटनाओं को ठीक से संभालता है। मैं चाहता हूं कि मेरे कॉलबैक फ़ंक्शन को कोई फर्क नहीं पड़ता कि कैसे संवाद का निपटान किया गया था।

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

ब्राउज़र को नए url पर पुनर्निर्देशित करना या फ़ंक्शन रीवल पर कुछ और करना आसान है।

Answer 20

इतने अच्छे जवाब यहाँ;) यहाँ मेरा दृष्टिकोण है। Eval () उपयोग के लिए परिचित।

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

और उपयोग की तरह दिखता है:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

Answer 21

बॉक्स से बाहर JQuery यूआई इस समाधान प्रदान करता है:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

एचटीएमएल

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

आप इसे JQuery फ़ंक्शन के लिए एक नाम प्रदान करके और एक पैरामीटर के रूप में प्रदर्शित पाठ / शीर्षक को पास करके अनुकूलित कर सकते हैं।

संदर्भ: https://jqueryui.com/dialog/#modal-confirmation

Answer 22

खैर यह आपके सवालों का जवाब है ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

सुनिश्चित करें कि आपके पास jquery 1.4.4 और jquery.ui है

Comments

यह वर्षों में मैंने देखे गए सबसे बदसूरत कोडों में से एक है। आप डिप्रेस्ड विशेषताओं (जैसे LANGUAGE="JavaScript") का उपयोग करते हैं, अपरकेस और लोअरकेस वर्णों का उपयोग करते हैं, आप सादे जेएस कोड्स को पूरी तरह से अनावश्यक रूप से मिक्स करते हैं, और आप सीएसएस के बजाय जेएस के साथ शैलियों को सेट करते हैं (बदसूरत और शब्दार्थिक रूप से गलत), और, वैसे, आपकी शैली संशोधन (सादे जेएस के साथ) मूल प्रश्न के बारे में बिल्कुल अप्रासंगिक है। आपको निश्चित रूप से अपने कोड को छोटा और सुशोभित करना चाहिए और मूल प्रश्न का उत्तर देने पर ध्यान केंद्रित करना चाहिए।

— Sk8erPeter

Answer 23

जावास्क्रिप्ट के एक स्पर्श के साथ आसान तरीका है

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}

Comments

यह बिंदु विशेष रूप से डिफ़ॉल्ट जावास्क्रिप्ट फ़ंक्शंस अलर्ट / पुष्टिकरण आदि के उपयोग से बचने के लिए था, इसलिए यह प्रश्न का हल नहीं है।

— redreinard