Pertanyaan Bagaimana cara membuat kustom "konfirmasi" & jeda eksekusi js sampai tombol klik pengguna?


Ok, saya melakukan banyak hal RIA / AJAX dan perlu membuat "cantik", kotak konfirmasi kustom yang merupakan DIV (bukan konfirmasi javascript built-in). Saya kesulitan menentukan cara menyelesaikan jeda dalam eksekusi untuk memberi pengguna kesempatan untuk menerima atau menolak kondisi sebelum melanjutkan atau menghentikan eksekusi. (tergantung pada jawaban mereka)

Jadi, inilah aliran logika umum yang saya hadapi:

  1. Pengguna memilih item dari dropdown dan tombol klik.
  2. Di sisi klien javascript eventhandler untuk tombol, saya perlu memeriksa (ini adalah kunci) SERIES kondisi untuk item yang mereka pilih di dropdown.
  3. Kondisi ini mungkin dapat mengakibatkan tidak menunjukkan konfirmasi sama sekali atau mungkin hanya beberapa kondisi yang dapat dievaluasi menjadi benar yang berarti saya harus meminta pengguna untuk menerima atau menolak kondisi sebelum melanjutkan. Hanya satu konfirmasi yang harus ditampilkan pada satu waktu.

Untuk menunjukkan logika:

function buttonEventHandler() {

if (condition1) {
  if(!showConfirmForCondition1) // want execution to pause while waiting for user response.
     return; // discontinue execution
}

if (condition2) {
  if (!showConfirmForCondition2) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

if (condition3) {
  if (!showConfirmForCondition3) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

...  
}

Jika ada yang menghadapi tantangan ini sebelumnya dan menemukan solusi, bantuan akan sangat dihargai. Sebagai catatan, saya juga menggunakan MS Ajax dan jQuery perpustakaan meskipun saya belum menemukan fungsi apa pun yang mungkin sudah termasuk di dalamnya untuk masalah ini.


13
2017-12-11 01:04


asal


Jawaban:


Saya takut untuk mengatakan bahwa tidak mungkin untuk menghentikan runtime Javascript dengan cara yang sama seperti dialog "konfirmasi" dan "peringatan" akan menjeda. Untuk melakukannya dengan DIV Anda harus memecah kode Anda menjadi beberapa bagian dan memiliki pengendali event pada kotak konfirmasi kustom memanggil bagian kode berikutnya.

Ada beberapa proyek untuk membawa dukungan "lanjutan" ke Javascript, seperti Javascript naratif jadi jika Anda benar-benar ingin membuatnya bekerja dalam satu blok kode, Anda bisa melihat ke dalamnya.


7
2017-12-11 01:12



Cara saya melakukan ini:

  1. Buat kotak dialog konfirmasi Anda sendiri dengan tombol, katakanlah "Ya" dan "Tidak".
  2. Buat fungsi yang memicu kotak dialog, katakanlah confirmBox(text, callback).
  3. Mengikat acara pada "Ya" dan "Tidak" tombol - "Ya" - callback(true), "Tidak" - callback(false).
  4. Ketika Anda memanggil fungsi gunakan sintaks ini:

    confirmBox("Are you sure", function(callback){
        if (callback) {
            // do something if user pressed yes
        } 
        else {
            // do something if user pressed no
        }
    });
    

7
2017-08-17 12:35



Coba ini, berikan fungsi klien javascript Anda objek 'ini' dan mulai dialog konfirmasi kustom Anda tetapi selalu kembalikan false untuk mencegah postback dari tembakan. Sebelum Anda keluar dari fungsi penanganan, salin informasi yang relevan untuk memicu postback secara manual ke tombol 'Ya'.


1
2017-12-11 02:40



seperti yang dikatakan Paul ... ini bekerja untuk saya (saya kira Anda menggunakan ASP.NET, tetapi jika tidak Anda dapat dengan mudah menulis ulang ini):

function BeforeDelete(controlUniqueId) {
    confirmPopup('question...?', function() { __doPostBack(controlUniqueId, ''); });
    return false;
}

function confirmPopup(message, okCallback) {
    $('#popup-buttons-confirm').click(okCallback);
    // set message
    // show popup
}

0
2017-07-16 12:06



Dalam kasus saya, tujuannya adalah untuk menampilkan customConfirm kotak setiap kali pengguna mengklik tautan hapus yang disematkan di setiap baris .Net Repeater

Setiap kali pengguna mengklik tautan hapus dari baris tertentu, fungsi Konfirmasi Kustom dipanggil. Sekarang di dalam fungsi konfirmasi, selain merender kotak baru, 2 hal berikut perlu dilakukan:

// obtain the element(we will call it targetObject) that triggered the event

targetObject = (event.target==undefined ? event.srcElement : event.target);

// include a call to _doPostBack in the onclick event of OK/YES button ONLY

(targetObject.href!=undefined){ eval(targetObject.href); } else{ _doPostBack(targetObject.name,''); // it is assumed that name is available

Di atas jika / konstruksi lain berkaitan dengan kasus saya. Hal utama adalah hanya mengetahui bahwa Anda dapat mensimulasikan jeda konfirmasi & kontinuitas menggunakan objek event dan __doPostBack fungsi.


0
2018-01-23 17:30



Lihat kotak peringatan modal Fiddle saya: http://jsfiddle.net/katiabaer/UXM9y/33/ dengan modal JqueryUI

   showAlert = function (msg, header, callback) {
      var mydiv = $("<div id='mydiv'> </div>");
      mydiv.alertBox({
          message: msg,
          header: header,
          callback: callback
      });

  },

  $('#show').click(function () {
      var m = $('#message').val();
      var h = $('#header').val();
      var callback = function () {
          alert("I can do anything here");
      }
      showAlert(m, h, callback);

  });

  $.widget("MY.alertBox", {
      options: {
          message: "",
          header: "",
          callback: ''
      },

      _create: function () {
          var self = this;
          self.callback = self.options.callback;

          self.container = $(".alert-messagebox");
          var header = self.container.find(".alert-header");
          header.html(self.options.header);

          var message = self.container.find(".alert-message");
          message.html(self.options.message);

          var closeButton = self.container.find("button.modal-close-button");
          closeButton.click(function () {
              self.close();
          });

          self.show();
      },

      show: function () {
          var self = this;
          self.container.modal({
              maxWidth: 500
          });
      },

      close: function () {

          if (this.callback != null) {
              this.callback();
              $.modal.close();
              return;
          }
          $.modal.close();

      },

      destroy: function () {
          $.Widget.prototype.destroy.call(this);
      }

  });

0
2017-08-19 14:37