Cách tạo tùy chỉnh "xác nhận" & tạm dừng js cho đến khi người dùng nhấp vào nút?

Question

Ok, tôi đang thực hiện một loạt các công cụ RIA/AJAX và cần tạo một hộp xác nhận "đẹp", tùy chỉnh là một DIV (không phải là javascript được xác nhận tích hợp). Tôi gặp sự cố khi xác định cách thực hiện tạm dừng trong thực thi để cho phép người dùng có cơ hội chấp nhận hoặc từ chối điều kiện trước khi tiếp tục hoặc tạm dừng thực thi. (Tùy thuộc vào câu trả lời của họ)

Vì vậy, đây là dòng chảy chung của logic Tôi đang đối phó với:

1. tài chọn một mục từ danh sách thả xuống và nút bấm.
2. Trong trình xử lý sự kiện javascript phía máy khách cho nút, tôi cần kiểm tra (đây là khóa) SERIES các điều kiện cho mục mà họ đã chọn trong menu thả xuống.
3. Những điều kiện này có thể dẫn đến việc không hiển thị bất kỳ xác nhận nào hoặc có thể chỉ một số điều kiện có thể được đánh giá là đúng, nghĩa là tôi cần yêu cầu người dùng chấp nhận hoặc từ chối điều kiện trước khi tiếp tục. Chỉ một lần xác nhận sẽ được hiển thị cùng một lúc.

Để chứng minh logic:

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 
} 

... 
} 

Nếu ai đã giải quyết thách thức này trước và tìm ra giải pháp, trợ giúp sẽ được đánh giá cao. Lưu ý, tôi cũng đang sử dụng các thư viện MS Ajax và jQuery mặc dù tôi chưa tìm thấy bất kỳ chức năng nào có thể đã được bao gồm trong các thư viện cho vấn đề này.

Answer 1

Tôi sợ phải nói rằng không thể tạm dừng thời gian chạy Javascript giống như cách hộp thoại "xác nhận" và "cảnh báo" tạm dừng. Để làm điều đó với một DIV bạn sẽ phải chia mã của bạn thành nhiều khối và có trình xử lý sự kiện trên hộp xác nhận tùy chỉnh, hãy gọi phần tiếp theo của mã.

Đã có một số dự án hỗ trợ "tiếp tục" thành Javascript, chẳng hạn như Narrative Javascript vì vậy nếu bạn thực sự muốn làm cho nó hoạt động trong một khối mã bạn có thể xem xét.

Answer 2

Hãy thử điều này, vượt qua chức năng khách hàng javascript của bạn đối tượng 'this' và bắt đầu hộp thoại xác nhận tùy chỉnh của bạn nhưng luôn trả về false để ngăn việc postback kích hoạt. Trước khi bạn thoát khỏi chức năng xử lý, hãy sao chép thông tin có liên quan để kích hoạt postback theo cách thủ công vào nút 'Yes' của hộp xác nhận tùy chỉnh của bạn.

Answer 3

Trong trường hợp của tôi, mục tiêu là để hiển thị một hộp customConfirm bất cứ khi nào người dùng nhấp vào liên kết xóa nhúng trong mỗi hàng của một Repeater Net

Bất cứ khi nào người dùng nhấp vào liên kết xóa của bất kỳ hàng cụ thể, các chức năng Custom Confirm được gọi là. Bây giờ bên trong hàm xác nhận, ngoài việc hiển thị hộp mới, 2 điều sau đây cần phải thực hiện:

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

Ở trên nếu/cấu trúc khác liên quan đến trường hợp của tôi. Điều chính là chỉ biết rằng bạn có thể mô phỏng tạm dừng xác nhận & liên tục bằng cách sử dụng đối tượng sự kiện và hàm __doPostBack.

Answer 4

như Paul đã nói ... điều này phù hợp với tôi (tôi đoán bạn sử dụng ASP.NET, nhưng nếu không bạn có thể dễ dàng viết lại này):

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

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

Answer 5

Cách làm thế nào tôi đã làm điều này:

1. Tạo riêng hộp thoại xác nhận của bạn với các nút, chúng ta hãy nói "Yes" và " Không".
2. Tạo chức năng kích hoạt hộp thoại , giả sử confirmBox(text, callback).
3. Sự kiện ràng buộc trên các nút "Có" và "Không" - "Có" - callback(true), "Không" - callback(false).

4. Khi bạn đang gọi hàm sử dụng cú pháp sau:

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

Answer 6

Check-out Fiddle phương thức cảnh báo hộp của tôi: http://jsfiddle.net/katiabaer/UXM9y/33/ với jQueryUI modal

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

    });