জিকিউরি ইউআই ডায়ালগে কীভাবে "কনফার্মেশন" ডায়ালগ প্রয়োগ করবেন?

Question

কুৎসিত 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>

জেকিউ অংশে, নথি প্রস্তুতের জন্য, আমি প্রথমে ডিভাইসটি প্রয়োজনীয় বোতামের সাথে একটি মডেল ডায়ালগ হিসাবে সেটআপ করব এবং মুছে ফেলার আগে "এ "টিকে নিশ্চিতকরণের জন্য গুলি চালানোর জন্য সেট করব, যেমন:

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

ঠিক আছে, সমস্যা এখানে। আর ডি সময় চলাকালীন, ডায়ালগটির কোনও ধারণা নেই যে (আইটেম) এটিকে জ্বালিয়ে দেবে এবং আইটেম আইডি (! )ও থাকবে। আমি কীভাবে সেই কনফার্মেশন বোতামগুলির আচরণটি সেটআপ করতে পারি, যদি ব্যবহারকারী এখনও হ্যাঁ চয়ন করেন তবে এটি অপসারণের লিঙ্কটি অনুসরণ করবে?

Comments

আছে: এখানে এটা করতে প্লাগইন ব্যবহার করার জন্য একটি সহজ stackoverflow.com/questions/6457750/form-confirm-before-submit

: Looooong সমাধান অনুসন্ধান stackoverflow.com/a/18474005/1876355

— পিয়ের

Answer 1

আমাকে ঠিক একই সমস্যাটি সমাধান করতে হবে। এটির কাজ করার মূল চাবিকাঠিটি হ'ল dialogঅবশ্যই যে clickলিঙ্কটি দিয়ে আপনি নিশ্চিতকরণ কার্যকারিতাটি ব্যবহার করতে চান তার জন্য ইভেন্ট হ্যান্ডলারে আংশিকভাবে শুরু করতে হবে (যদি আপনি এটি একাধিক লিঙ্কের জন্য ব্যবহার করতে চান)। কারণ, লিঙ্কটির জন্য লক্ষ্যযুক্ত URL টি অবশ্যই কনফার্মেশন বোতাম ক্লিকের জন্য ইভেন্ট হ্যান্ডলারের সাথে ইনজেক্ট করা উচিত। কোন লিঙ্কগুলির নিশ্চিতকরণ আচরণ হওয়া উচিত তা নির্দেশ করতে আমি একটি সিএসএস শ্রেণি ব্যবহার করেছি।

উদাহরণস্বরূপ উপযুক্ত হওয়ার জন্য এখানে আমার সমাধানটি বিমূর্ত করা হয়েছে।

<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 কাজ করে ... তবে সংশোধনের জন্য @ লয়ডিফিলিপস থেকে উত্তর দেখুন

— রোহানক্র্যাগ

অন্য কেউ কি লক্ষ্য করে যে এটি একটি আপডেটপ্যানেলের অভ্যন্তরে পুরো পোস্টব্যাকের কারণ হবে? আপনি কিভাবে এটি ঠিক করবেন?

— হোমার

এই উত্তর এবং @ লয়ডিফিলিপস এর উত্তর সম্পর্কে কিছু আছে যা আমার পক্ষে এটি যথেষ্টভাবে হয় না। মূল প্রশ্নটি একটি "মুছুন" বোতামের (লিঙ্ক) প্রসঙ্গে। সাধারণভাবে, কোনও অপারেশনের জন্য একটি লিঙ্ক (এইচটিটিপি জিইটি) ব্যবহার করা অনিচ্ছুক যা পরিস্থিতি পরিবর্তন করে (যেমন একটি ডিলিটি)। এই উভয় উত্তর ধরেই ধরে নেওয়া যায় যে ব্যবহারকারী জাভাস্ক্রিপ্ট সক্ষম করেছেন। যদি জাভাস্ক্রিপ্ট অক্ষম করা থাকে, লিঙ্কগুলি আগুন জ্বলবে এবং মুছে ফেলার (বা অন্য যে কোনও কিছু) অপারেশন নিশ্চিতকরণ ছাড়াই আগুন লাগবে যা বিপর্যয়কর হতে পারে। আমি এই প্রশ্নের সমাধান করে এমন একটি উত্তর খুঁজে পাওয়ার আশা করছিলাম।

— প্রতিধ্বনিত করুন

@ কেচো: আমিও একই কথা ভেবেছিলাম। এটি যথাযথ করার জন্য আমি মনে করি যে অন্য কোনও পৃষ্ঠা থাকতে হবে যা জেএস অক্ষম থাকলে নিশ্চিতকরণের জন্য জিজ্ঞাসা করবে। জেএস হলে এই পৃষ্ঠাটি বাদ দেওয়া যেতে পারে। হতে পারে অন্যটির মাধ্যমে নিশ্চিত হওয়া = সত্যের মতো প্যারামিটার। জেএসকে বিবেচনায় না রেখে এবং তার ব্যতীত মামলা নেওয়া সত্যই কঠিন এবং জটিল। ওয়েব বিকাশ একটি জগাখিচুড়ি।

— রোবসচ

@ শ্রী শিওর আপনি কোনও ফাংশন বের করতে পারেন যা প্যারামিটার হিসাবে আইডির নাম নিয়েছিল এবং পাস-ইন আইডির জন্য ইভেন্ট হ্যান্ডলারগুলি সেট করতে jQuery কল করেছে।

— পল মরি

Answer 2

আমি পেয়েছি যে পলের উত্তর বেশিরভাগ ক্ষেত্রে কার্যকর হয়নি কারণ তিনি যেভাবে বিকল্পগুলি সেট করছেন সেভাবে ক্লিক ইভেন্টে ডায়ালগটি ইনস্ট্যান্ট করে দেওয়ার পরে ভুল ছিল। এখানে আমার কোড যা কাজ করছিল is আমি এটি পলের উদাহরণের সাথে মেলানোর জন্য তৈরি করিনি তবে এটি কেবলমাত্র একটি বিড়ালের হুইস্কারের পার্থক্যকে কিছু উপাদানের ক্ষেত্রে আলাদাভাবে নাম দেওয়া হয়েছে। আপনার এটি কার্যকর করতে সক্ষম হওয়া উচিত। সংশোধনটি ক্লিক ইভেন্টের বোতামগুলির জন্য ডায়ালগ বিকল্পের সেটারে রয়েছে।

$(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 ব্যবহার করে পুনরায় চিত্রিত করা হয়

— অ্যারন নিউটন

হ্যাঁ "বিড়ালের হুইস্কারের পার্থক্য" - আমার সেই শব্দটি আরও ব্যবহার করা দরকার use

— চাদ গর্শিং

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

এটি একটি ভাল সমাধান, এটি আমার সাথে খুব একই রকম যা আমি এজ্যাক্স ইউআরএল পাওয়ার এবং দ্রুত প্রদর্শনের জন্য ব্যবহার করি ... ফাংশন জিকুয়েরি ডায়ালগ (url) {$ ("# কথোপকথন")। সরান (); "(" বডি ") app "(" # কথোপকথন ") load লোড (url) d "বন্ধ"); $ ("# কথোপকথন")। অপসারণ ();}}}); }

— সংযোগকারীরা

Answer 4

সহজ এবং সংক্ষিপ্ত সমাধান যা আমি কেবল চেষ্টা করেছি এবং এটি কার্যকর

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

তারপরে আপনার লিঙ্কটিতে কেবল শ্রেণি = "নিশ্চিত" যুক্ত করুন এবং এটি কার্যকর!

Comments

টেক্সট বার্তাটি জিজ্ঞাসা করে "শিওর?" তবে হ্যাঁ / না, ঠিক আছে / বাতিল করার পছন্দ দেয় না। তারা "নিশ্চিত" বা "নিশ্চিত না" থাকলে ব্যবহারকারী কীভাবে নির্দেশ করবেন?

— Genki

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

আপনার পোস্টটি সম্পাদনা করার বিষয়ে বিবেচনা করুন এবং আপনি কেন এই সমাধানটি পছন্দ করেন তা সম্প্রদায়কে জানান। এটি আপনার পক্ষে কী আরও ভাল করে তোলে?

— মজাদার যুক্তি

আমি পোস্টটি সম্পাদনা করেছি। আমি আশা করি এটি এখন আরও সার্থক হয়ে উঠবে। আমি যখন এটি লিখেছিলাম তখন এটিকে এতটা স্পষ্ট মনে হয়েছিল যে কোনও মন্তব্য করার দরকার নেই। কিছুক্ষণ পর যখন আমি এটি আবার

— ঘুরে দেখি

একটি দুর্দান্ত হিসাবে খুব পরিষ্কার সমাধান! ইভেন্ট নেমস্পেসগুলি সম্পর্কে আগে কখনও পড়বেন না। তার জন্য ধন্যবাদ!

— গ্রিফলা

BEAAUUTIFULLL! ".. তবে একই নেটিভ জ্যাকোরি ইভেন্টটি ট্রিগার করতে আসল বোতামের উপর ক্লিক করুন .." beauutifulll শোনায় !! ধন্যবাদ $("#btn").trigger("click.confirmed");

— ইরফ

Answer 6

আমি জানি এটি একটি পুরানো প্রশ্ন তবে এমভিসি 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");
});

Comments

ধন্যবাদ, আমি এই সমাধানটি পছন্দ করি। বুঝতে সহজ, এবং আমার জন্য কাজ করে। আমি @ ইউআরএল.অ্যাকশন অংশটি ব্যবহার করি নি, তবে এটি আমার সার্ভার-সাইড এমভিসি (পিএইচপি / সিমফনি 2) দ্বারা উত্পাদিত ইউআরএল নিয়ে কাজ করে।

— চকচকে

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 = "জাভাস্ক্রিপ্ট: নিশ্চিত করুন ('লিঙ্ক_আরল');" সহজ এবং মার্জিত এবং অনুরূপ সমস্ত ক্ষেত্রে মামলা। অবশ্যই জাভাস্ক্রিপ্ট পদ্ধতিটি খুব বাধাগ্রস্ত যে লোকে / ও জাভাস্ক্রিপ্ট লিঙ্কটি পুরোপুরি মিস করবে। আবারও দুর্দান্ত উত্তরের জন্য ধন্যবাদ।

— xandy

Answer 8

যেমন উপরে. পূর্ববর্তী পোস্টগুলি আমাকে সঠিক পথে পেয়েছে। এইভাবে আমি এটি করেছি। সারণীতে প্রতিটি সারির পাশে একটি চিত্র থাকা উচিত (ডাটাবেস থেকে পিএইচপি স্ক্রিপ্ট দ্বারা উত্পন্ন)। কোনও চিত্র ক্লিক করা হলে, ব্যবহারকারী ইউআরএলে পুনঃনির্দেশিত হবে এবং ফলস্বরূপ, 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 id="confirmDelete" title="Delete User?"></div> 

চিত্রের লিঙ্ক:

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

এইভাবে আপনি ডায়ালগ বাক্সে পিএইচপি লুপ মানগুলি পেরিয়ে যেতে পারেন। একমাত্র খারাপটি আসলে ক্রিয়াটি সম্পাদন করতে জিইটি পদ্ধতি ব্যবহার করে।

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

আমি এটি এইচটিএমএলে পরীক্ষা করেছি:

<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 কনফার্ম প্লাগইন নাদিয়া" ব্যবহার করে এটি গুগল করুন।

— ২৩:৪৪ এ গ্রাহামসড

ধন্যবাদ! আমি ইতিমধ্যে আমার সংস্করণটি এখনই বাস্তবায়িত করেছি, তবুও আমার একটি চেহারা থাকবে।

— জেন

লিঙ্কটি আবার মারা গেছে

— ভ্যালামাস

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

আমি নিজেই এটিতে দৌড়ে এসে একটি সমাধান দিয়ে শেষ করেছি, এটি এখানে বেশ কয়েকটি উত্তরের অনুরূপ, তবে কিছুটা ভিন্নভাবে প্রয়োগ করা হয়েছে। আমি জাভাস্ক্রিপ্টের অনেক টুকরো, বা কোথাও একটি স্থানধারক ডি পছন্দ করি না। আমি একটি সাধারণ সমাধান চেয়েছিলাম, এটি তখন প্রতিটি ব্যবহারের জন্য জাভাস্ক্রিপ্ট যুক্ত না করে HTML এ ব্যবহার করা যেতে পারে। আমি এখানে যা এলাম তা এখানে এসেছে (এটির জন্য জ্যাকেউরি ইউআই দরকার):

javascript:

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

  });

});

এবং তারপরে এইচটিএমএলে কোনও জাভাস্ক্রিপ্ট কল বা রেফারেন্সের প্রয়োজন নেই:

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

যেহেতু শিরোনাম বৈশিষ্ট্যটি ডিভ সামগ্রীটির জন্য ব্যবহৃত হয়, ব্যবহারকারী এমনকি বোতামটি ঘুরিয়ে দিয়ে নিশ্চিতকরণের প্রশ্নটি পেতে পারে (যার কারণে আমি টাইলটির শিরোনাম বৈশিষ্ট্যটি ব্যবহার করি নি)। কনফার্মেশন উইন্ডোর শিরোনামটি হ'ল Alt ট্যাগের সামগ্রী। জাভাস্ক্রিপ্ট স্নিপ একটি জেনারেলাইজড। জেএস অন্তর্ভুক্ত অন্তর্ভুক্ত করা যেতে পারে, এবং কেবল একটি ক্লাস প্রয়োগ করে আপনার একটি দুর্দান্ত কনফার্মেশন উইন্ডো রয়েছে।

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

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

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

উপরের আরও একটি প্রকরণ যেখানে এটি নিয়ন্ত্রণ করে যদি 'এসপি: লিঙ্কবটন' বা 'এসপি: বোতাম' হয় যা এটি দুটি পৃথক এইচটিএমএল নিয়ন্ত্রণ হিসাবে রেন্ডার করে কিনা তা পরীক্ষা করে। আমার কাছে ঠিক কাজ করার মতো মনে হচ্ছে তবে এটির ব্যাপকভাবে পরীক্ষা করা হয়নি n't

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

আমি এএসপি.নেট গ্রিডভিউ (গ্রিডভিউ কন্ট্রোল ইন কমান্ডস বিল্ড) এর মধ্যে লিঙ্ক-বোতামগুলিতে এটি ব্যবহার করার জন্য সন্ধান করছিলাম সুতরাং ডায়ালগের "কনফার্ম" ক্রিয়াকলাপটি রান-টাইমে গ্রিডভিউ নিয়ন্ত্রণ দ্বারা উত্পাদিত কোনও স্ক্রিপ্ট সক্রিয় করা দরকার। এটি আমার পক্ষে কাজ করেছে:

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

ব্যক্তিগতভাবে আমি এএসপি. নেট এমভিসি অ্যাপ্লিকেশনগুলির অনেক দর্শনগুলিতে এটি পুনরাবৃত্তি প্রয়োজন হিসাবে দেখছি as

এজন্য আমি একটি মডেল শ্রেণি এবং একটি আংশিক দৃষ্টিভঙ্গি সংজ্ঞায়িত করেছি:

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("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

কৌশলটি হল JQueryClickSelector নির্দিষ্ট করা যা এমন উপাদানগুলির সাথে মেলে যা একটি কনফার্মেশন ডায়ালগের প্রয়োজন। আমার ক্ষেত্রে, ক্লাস সিলেঙ্কডিলিট সহ সমস্ত অ্যাঙ্কর তবে এটি সনাক্তকারী, আলাদা শ্রেণি ইত্যাদি হতে পারে আমার জন্য এটি একটি তালিকা ছিল:

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

Comments

JQuery সহ এএসপি.নেট এমভিসি।

— ফ্রেডরিক স্যামসন

Answer 19

খুব জনপ্রিয় বিষয় এবং গুগল কোয়েরিতে "কোন ইভেন্টটি ক্লিক করা হয়েছিল জিকিউরি ডায়ালগটি নিকটেই" এটি খুঁজে পেয়েছে। আমার সমাধান হ্যাঁ, না, ইসএসসি_কি, এক্স ইভেন্টগুলি সঠিকভাবে পরিচালনা করে। ডায়লগটি কীভাবে নিষ্পত্তি করা হয়েছে তা বিবেচনা না করেই আমার কলব্যাক ফাংশনটি কল করতে চাই।

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

ব্রাউজারটিকে নতুন ইউআরএলে পুনঃনির্দেশ করা বা ফাংশন রিভলুতে অন্য কিছু সম্পাদন করা সহজ।

Answer 20

এখানে অনেক ভাল উত্তর;) এখানে আমার পদ্ধতির। ব্যবহারের ক্ষেত্রে () ব্যবহারের সাথে পরিচিত।

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

বাক্সের বাইরে জিকুয়ারি ইউআই এই সমাধানটি সরবরাহ করে:

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

আপনি জিকুয়েরি ফাংশনটির জন্য একটি নাম সরবরাহ করে এবং পরামিতি হিসাবে প্রদর্শিত পাঠ্য / শিরোনামটি পাস করে এটিকে আরও কাস্টমাইজ করতে পারেন।

তথ্যসূত্র: https://jqueryui.com/dialog/#modal- কনফার্মেশন

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

এটি আমি বছরের পর বছরগুলি দেখেছি This আপনি অবহেলিত বৈশিষ্ট্যগুলি (যেমন 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

বিন্দুটি হ'ল ডিফল্ট জাভাস্ক্রিপ্ট ফাংশন সতর্কতা / নিশ্চিতকরণ ইত্যাদি ব্যবহার এড়ানো ছিল, সুতরাং এটি প্রশ্নের কোনও সমাধান নয়।

— ফ্রি 15'13