Упростите условия jQuery, которые содержат различные поля ввода

объяснение

Каждая строка таблицы содержит значок удаления в последнем столбце. Значки обернуты тегом привязки с соответствующим идентификатором базы данных. Пользователь нажимает на значок, чтобы удалить эту конкретную строку (некоторые идентификаторы не предназначены для удаления, например, системный администратор).

Существует сценарий, когда пользователь может вручную изменить идентификатор из инструмента разработчика. Поэтому, когда пользователь нажимает на значок, функция fn_deleteRow срабатывает и AJAX GetDelUser назывался. Если пользователь авторизован для удаления, в диалоговом окне должны отображаться кнопки Yes/No иначе в диалоговом окне должно появиться предупреждающее сообщение с кнопкой Ok только.

Мой вопрос

Если пользователь не авторизован для удаления определенных идентификаторов, при проверке базы данных диалоговая кнопка должна просто отображать 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>

1 ответ

Решение

Использование $.alert если не разрешено и $.confirm в случае, если позволено и перемещать их внутри Ajax success функция, а не вызов $.confirm по умолчанию и отправка вызова ajax.

Другие вопросы по тегам