[SOLVED] Simplify jQuery conditions that contains different input boxes

Simplify jQuery conditions that contains different input boxes

Explanation

Each table's row contains a delete icon at the last column. The icons are wrapped with anchor tag with respective database id. The user will click on the icon to delete that particular row (some IDs are not meant to be deleted example system admin).

There is a scenario where user able to manually change the id from the Developer's tool. So upon user click on the icon, the function fn_deleteRow is triggered and ajax GetDelUser was called. If the user is authorized to delete, the dialog should display buttons Yes/No, else the dialog should display warning message with button Ok only.

My question

If the user is not authorized to delete certain IDs, upon database validation, the dialog button should just display Ok instead of Yes/No. How do I make it dynamic using the code below?

$(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>

Solution

use $.alert in case not alllowed and $.confirm in case allowed and move them inside the ajax success function rather than having call $.confirm by default and sending ajax call.