Jquery UI संवाद में "पुष्टिकरण" संवाद को कैसे कार्यान्वित करें?




jquery-ui dialog (16)

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

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

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

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

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

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

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


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

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

मैंने इस एचटीएमएल पर इसका परीक्षण किया है:

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

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


ऊपरोक्त अनुसार। पिछली पोस्टों ने मुझे सही रास्ते पर ले लिया। इस तरह मैंने इसे किया है। विचार तालिका में प्रत्येक पंक्ति के आगे एक छवि है (डेटाबेस से 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 लूप मानों को संवाद बॉक्स में पारित कर सकते हैं। वास्तव में कार्रवाई करने के लिए एकमात्र नकारात्मक पक्ष जीईटी विधि का उपयोग कर रहा है।


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

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

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

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

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

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

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


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

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

    });

});

उम्मीद है कि यह किसी और की मदद करता है क्योंकि इस पोस्ट ने मुझे मूल रूप से सही रास्ते से नीचे ले लिया था, मैंने सोचा था कि मैं सुधार को बेहतर तरीके से पोस्ट करूंगा।


मुझे पता है कि यह एक पुराना सवाल है लेकिन एमवीसी 4 में एचटीएमएल 5 डेटा विशेषताओं का उपयोग करके मेरा समाधान यहां है:

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

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

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

<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 है।

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


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

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

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

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


मैंने 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'
);

जारी रखें।


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

$("#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 देशी तंत्र तब ले जा सकते हैं और चीजें अपेक्षित के रूप में चला सकते हैं। बटन और हाइपरलिंक्स के लिए इसका एक अन्य लाभ इस्तेमाल किया जा सकता है। मुझे आशा है कि मैं काफी स्पष्ट था।


ये करेगा?

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

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

<!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 है


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

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

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


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




modal-dialog