How to use Modal Bootstrap to confirm delete yes/no?

Question

I have modal box that should confirm if user wants to delete record or not. SO far I got this to work but I have function inside of the function. This is not recommended as I know in JavaScript so I was wondering if there is another solution to avoid this problem? Here is example:

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "mjohnson@gmail.com",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "jdunn@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "lmorgan@gmail.com",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "kbradley@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "dhart@gmail.com",
      "position": "Supervisor"
    }
  ]
};

$(document).ready(function() {
  generateTbl();
});

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "";

  for (var key in jsonData) {
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
  }
  buildTbl += "Customer ID First Name Last Name Email Position Delete
" + $.trim(jsonData[key].id) + " " + $.trim(jsonData[key].first) + " " + $.trim(jsonData[key].last) + " " + $.trim(jsonData[key].email) + " " + $.trim(jsonData[key].position) + " ";
  $('#customers_data').empty().append(buildTbl);
  buildDataTable('customers', [5], 5);
}

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

$('#customers_data').on('click', ':button.customer_delete', deleteCustomer);

function deleteCustomer() {
  var recordID = $(this).closest('tr').attr('id'), // Get record ID.
    targetTr = $(this).parents('tr');

  $('#deleteModal').modal('show'); // Show delete modal box.
  $('.confirm_delete').on('click', function() {
    if (recordID) {
      var table = $('#customers').DataTable(); // Select DataTable by ID.
      table.row(targetTr).remove().draw(); // Remove record from DataTable.
    }
  });
}




















  
    Welcome to Main Page
    
      
    
  


  
    
      
        
        Confirm Delete
      
      
        You are about to delete customer record, this procedure is irreversible.
        Do you want to proceed?

If anyone knows better solution please let me know.

Muhammad Usman · Accepted Answer

Define your recordID out of the scope of the function.

Update it's value inside the function and then you'd be able to use it anywhere in your function and when you're able to do that, you can move your function out of the function that handles the click event

here

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "mjohnson@gmail.com",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "jdunn@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "lmorgan@gmail.com",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "kbradley@gmail.com",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "dhart@gmail.com",
      "position": "Supervisor"
    }
  ]
};

$(document).ready(function() {
  generateTbl();
});
var recordID = null;

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "";

  for (var key in jsonData) {
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
    buildTbl += "";
  }
  buildTbl += "Customer ID First Name Last Name Email Position Delete
" + $.trim(jsonData[key].id) + " " + $.trim(jsonData[key].first) + " " + $.trim(jsonData[key].last) + " " + $.trim(jsonData[key].email) + " " + $.trim(jsonData[key].position) + " ";
  $('#customers_data').empty().append(buildTbl);
  buildDataTable('customers', [5], 5);
}

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

$('#customers_data').on('click', ':button.customer_delete', deleteCustomer);

function deleteCustomer() {
 recordID = $(this).closest('tr').attr('id'), // Get record ID.
    targetTr = $(this).parents('tr');
  $('#deleteModal').modal('show');  

}
  $('.confirm_delete').on('click', function() {
    if (recordID) {
      var table = $('#customers').DataTable(); // Select DataTable by ID.
      table.row(targetTr).remove().draw(); // Remove record from DataTable.
    }
  });





  Hearing Application
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  
    
      Welcome to Main Page
      
        
      
    
  
  
    
      
        
          
          Confirm Delete
        
        
          You are about to delete customer record, this procedure is irreversible.
          Do you want to proceed?

How to use Modal Bootstrap to confirm delete yes/no?

Answers (2)

Related Questions