簡化包含不同輸入框的jQuery條件

Question

說明

每個表的行在最后一列包含一個刪除圖標。 圖標由帶有各自數據庫ID的錨標記包裹。 用戶將單擊圖標以刪除該特定行（某些ID並不意味着要刪除，例如系統管理員）。

在某些情況下，用戶可以從開發人員的工具中手動更改ID。 因此，在用戶單擊圖標后，將觸發函數fn_deleteRow並調用ajax GetDelUser 。 如果用戶有權刪除，則對話框應顯示按鈕Yes/No ，否則對話框應僅顯示帶有Ok警告消息。

我的問題

如果用戶無權刪除某些ID，則在數據庫驗證后，對話框按鈕應僅顯示Ok而不是Yes / No。 如何使用下面的代碼使其動態化？

 $(document).ready(function() { function fn_deleteRow(id) { $.confirm({ backgroundDismiss: true, icon: 'fa fa-exclamation', theme: 'modern', closeIcon: true, animation: 'scale', type: 'red', content: function() { var self = this; return $.ajax({ url: 'action/<?php echo basename(__FILE__);?>', dataType: 'json', data: 'GetDelUser&id=' + id, method: 'post' }).done(function(data) { console.log(data); if (data.status == 'success') { self.setContentAppend('<h3>' + data.name + '</h3>'); } else { self.setContentAppend('<div>' + data.message + '</div>'); } }).fail(function() { self.setContentAppend('<div>Fail!</div>'); }).always(function() { //self.setContentAppend('<div>Always!</div>'); }) }, contentLoaded: function(data, status, xhr) { //this.setContentAppend('<div>Content loaded!</div>'); }, onContentReady: function() { //this.setContentAppend('<div>Content ready!</div>'); }, title: 'Confirm to delete:', buttons: { 'Yes': { btnClass: 'btn-red', action: function() { var self = this; self.setContent('Checking callback flow'); return $.ajax({ url: 'action/<?php echo basename(__FILE__);?>', dataType: 'json', data: 'ConfirmDelete&id=' + id, method: 'post' }).done(function(data) { console.log(data); self.setContentAppend('<div>Done!</div>'); $.notify({ message: data.message }, { type: data.status, placement: { from: "top", align: "left" }, newest_on_top: true, delay: 0 }); if (data.status == 'success') { $('#userTable').DataTable() .row(row.parents('tr')) .remove() .draw(); } }).fail(function() { self.setContentAppend('<div>Fail!</div>'); }).always(function() { self.setContentAppend('<div>Always!</div>'); }); } }, /*cancel: function () { $.alert('Canceled!'); },*/ 'No': { btnClass: 'btn-blue' } } }); } $(document).on("click", ".btnDelete", function(e) { e.preventDefault(); var row = $(this); var id = row.attr('id'); console.log(id); fn_deleteRow(id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="table-responsive"> <table id="userTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Status</th> <th>Created Date</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td></td> <td><a href="user-master-detail.php?id=3">Jeff</a></td> <td></td> <td></td> <td>Active</td> <td>2017-11-10 00:00:00</td> <td><a href="" class="btnDelete" id="3"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> </tr> <tr> <td></td> <td><a href="user-master-detail.php?id=2">Wong Ching Chong</a></td> <td>myemail@domain.com</td> <td>0123456789</td> <td>Active</td> <td>2017-05-10 12:20:19</td> <td><a href="" class="btnDelete" id="2"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> </tr> <tr> <td></td> <td><a href="user-master-detail.php?id=1">System Administrator</a></td> <td></td> <td>0198765432</td> <td>Active</td> <td>2017-03-29 20:34:51</td> <td></td> </tr> </tbody> </table> </div> 

Answer 1

在$.alert的情況下使用$.alert ，在允許的情況下使用$.confirm ，並將它們移至ajax success函數內，而不是默認情況下調用$.confirm並發送ajax調用。