Chuyển một biến sang hộp thoại Giao diện người dùng JQuery

Question

Tôi đang xóa bản ghi bằng cách sử dụng PHP. Tôi muốn sử dụng hộp thoại Giao diện người dùng JQuery để xác nhận hành động, nhưng tôi không biết cách chuyển một biến (RecordID) của tôi sang hàm URL chuyển hướng hoặc cho phép URL truy cập window.location.href.

$("#confirm").dialog({ 
resizable: false, 
autoOpen: false, 
modal: true, 
buttons: { 
    'OK': function() { 
      window.location.href = 'url and myvar??'; 
     $(this).dialog("close"); 
     }, 
    'Cancel': function() { 
     $(this).dialog("close"); 
     } 
    } 
}); 


$("#delete").click(function() { 
    $("#confirm").dialog("open").html ("Are U Sure?"); 
    return false; 
}); 

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a> 

Có cách nào tốt để làm điều này?

Answer 1

Bạn muốn thay đổi cấu hình của hộp thoại khi nhấp (trong trường hợp này, hành vi của nút Ok). Cho rằng bạn có nhiều giải pháp tất cả chúng xấu xí (imo). Tôi sẽ tư vấn tạo ra một hộp thoại khi đang bay, và phá hủy nó một khi nó đã được sử dụng, một cái gì đó như thế này:

$("#delete").click(function(ev) { 
    ev.preventDefault(); // preventDefault should suffice, no return false 
    var href = $(this).attr("href"); 
    var dialog = $("<div>Are you sure?</div>"); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       window.location = href; 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
}); 

Hoặc thậm chí tốt hơn, đóng gói hộp thoại xác nhận vào một chức năng để bạn có thể tái sử dụng nó, như vậy :

function confirmDialog(msg) { 
    var dialog = $("<div>"+msg+"</div>"); 
    var def = $.Deferred(); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       def.resolve(); 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       def.reject(); 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
    return def.promise(); 
} 

Và sau đó sử dụng nó như vậy

confirmDialog("are your sure?").done(function() { 
    window.location = $(this).attr("href"); 
}).fail(function() { 
    // cry a little 
}); 

bạn có thể phải kiểm tra xem các đối tượng thu nhập hoãn lại đã bị từ chối hoặc giải quyết trước khi bạn đóng hộp thoại, để đảm bảo r xác nhận đẩy ra gần (và không chỉ nhấn nút 'Hủy'). Điều này có thể được thực hiện với một def.state() === "pending" có điều kiện.

Để biết thêm thông tin về jquery hoãn: http://api.jquery.com/category/deferred-object/

Answer 2

Bạn có thể thử bằng cách sử dụng phương pháp .data() để lưu trữ dữ liệu cho bạn. Hãy xem câu trả lời này Passing data to a jQuery UI Dialog

Ví dụ để vượt qua một biến, bạn có thể lưu trữ nó bằng cách sử dụng chức năng dữ liệu, trước khi mở hộp thoại

$("#dialog_div") 
.data('param_1', 'whateverdata') 
.dialog("open"); 

Sau đó, bạn có thể có được điều này lại bằng cách:

var my_data = $("#dialog_div").data('param_1') 

Answer 3

Việc xóa hành động có thể không được thực hiện bằng GET, nhưng nếu bạn muốn thực hiện theo cách đó, tôi khuyên bạn nên sử dụng $ .data trong jQuery để mỗi liên kết có thuộc tính data-record-id. Sau đó, khi nhấp vào một trong các liên kết, nó bật lên hộp thoại và khi được xác nhận, nó sẽ thêm URL đó và chuyển hướng. Ví dụ:

$(function(){ 
    $(".deleteLink").click(function(){ 
     var id = $(this).data("record-id"); 
     var myHref = $(this).attr('href'); 
     $("#confirmDialog").dialog({ 
      buttons:{ 
      "Yes": function() 
       { 
        window.location.href = myHref + id; 
       } 
      } 
     }); 
    }); 

});

<a class="deleteLink" data-record-id="1">Delete</a> 
... 
<div id="confirmDialog"> 
    <p>Are you sure?</p> 
</div>