TechQA.

Bootstrap confirmation requires two clicks before shows up?

581 views Asked by At 

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "[email protected]",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "[email protected]",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "[email protected]",
      "position": "Supervisor"
    }
  ]
};

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

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#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', '#customers :button.customer_delete', deleteCustomer);

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

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: function() {
      if (recordID) {
        var table = $('#customers').DataTable(); // Select DataTable by ID.
        table.row(targetTr).remove().draw(); // Remove record from DataTable.
      }
    }
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hearing Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- *** Start: JS and CSS for DataTables. *** -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
  <!-- *** End: JS and CSS for DataTables. *** -->
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">Welcome to Main Page</div>
      <div class="panel-body">
        <div id="customers_data" class="table-responsive"></div>
      </div>
    </div>
  </div>
</body>

</html>

As you can see in my example first time you click on delete button dialog is not showing. Second time will show. What could be the reason why dialog is not showing on the first click? I'm not sure if that has to do anything with dynamically built table? If anyone knows solution for this please let me know.

javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-confirmation
Original Q&A
2

There are 2 answers

1
Mathew Berg On

You should be creating your confirmation before the button click, but if you must do it this way add in a $(this).confirmation('show') after you create the confirmation.. This piece of code makes it work:

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "[email protected]",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "[email protected]",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "[email protected]",
      "position": "Supervisor"
    }
  ]
};

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

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#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');
    

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: function() {
      if (recordID) {
        var table = $('#customers').DataTable(); // Select DataTable by ID.
        table.row(targetTr).remove().draw(); // Remove record from DataTable.
      }
    }
  });
  $(this).confirmation('show');
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hearing Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- *** Start: JS and CSS for DataTables. *** -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
  <!-- *** End: JS and CSS for DataTables. *** -->
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">Welcome to Main Page</div>
      <div class="panel-body">
        <div id="customers_data" class="table-responsive"></div>
      </div>
    </div>
  </div>
</body>

</html>

0
Taplar On

Added the line to the code to show it does show the confirmation on the first click.

var myJSON = {
  "customers": [{
      "id": 100,
      "first": "Mike",
      "last": "Johnson",
      "email": "[email protected]",
      "position": "Consultant"
    },
    {
      "id": 101,
      "first": "John",
      "last": "Dunn",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 109,
      "first": "Lisa",
      "last": "Morgan",
      "email": "[email protected]",
      "position": "Secretary"
    },
    {
      "id": 233,
      "first": "Kris",
      "last": "Bradley",
      "email": "[email protected]",
      "position": "Programmer"
    },
    {
      "id": 57,
      "first": "Dave",
      "last": "Hart",
      "email": "[email protected]",
      "position": "Supervisor"
    }
  ]
};

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

function generateTbl() {
  var jsonData = myJSON.customers,
    buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";

  for (var key in jsonData) {
    buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
    buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
    buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
    buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
    buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
    buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
  }
  buildTbl += "</tbody></table></div>";
  $('#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', '#customers :button.customer_delete', deleteCustomer);

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

  $(this).confirmation({
    rootSelector: '[data-toggle=confirmation]',
    placement: 'bottom',
    singleton: true,
    title: 'Do you want to remove this account?',
    onConfirm: function() {
      if (recordID) {
        var table = $('#customers').DataTable(); // Select DataTable by ID.
        table.row(targetTr).remove().draw(); // Remove record from DataTable.
      }
    }
  });
  
  //added this line to show the confirmation immediately after initialization
  $(this).confirmation('show');
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hearing Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- *** Start: JS and CSS for DataTables. *** -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
  <!-- *** End: JS and CSS for DataTables. *** -->
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">Welcome to Main Page</div>
      <div class="panel-body">
        <div id="customers_data" class="table-responsive"></div>
      </div>
    </div>
  </div>
</body>

</html>

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in TWITTER-BOOTSTRAP-3

Related Questions in BOOTSTRAP-CONFIRMATION

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions