Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Bootstrap modal popup button calling multiple times?

I created bootstrap confirm popup, when I click bootstrap ok button on confirm modal then ok button call itself twice or more instead one call, issue is AJAX call for delete is executing multiple times.

My confirm button click jQuery code,

$("#btnOk").on('click', function (e) {
        e.preventDefault();
         $.ajax({
            //ajax call for update/delete
        });
        $('#bsModel').modal('hide');
        $('#bsModel').data("modal", null);
  }); 

Remove sorting arrows icons from header and clone header row in jQuery Data Tables

Use following CSS code to remove sort arrows icon they display in the headers to indicate sorting options

/* Remove sorting arrows in jQuery Data Tables */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting_desc:before {
    background: none;
    content:none;
}


Use following CSS code to remove sort arrows(ascending and descending order icons) from duplicate header rows or custom column based filter row.

/* Remove sorting arrows from cloned header filleter row from jQuery Data Tables */
table.dataTable thead tr:nth-child(2) th.sorting,
table.dataTable thead tr:nth-child(2) th.sorting_asc,
table.dataTable thead tr:nth-child(2) th.sorting_desc,
table.dataTable thead tr:nth-child(2) th.sorting_desc:after,
table.dataTable thead tr:nth-child(2) th.sorting_desc:before {
    background: none;
    content:none;
}

Bootstrap modal popup header close button is not working

My bootstrap close modal not working not and not found any JavaScript error with console.

I added close button in model header, shared my popup html code also

My model html

<!-- Modal  popup--> 
<div class="modal fade" id="sampleModel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="bsModelTitle">Title </h5>
  <button type="button" id="btnModeClose" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
 
  <div id="ModelData" class="modal-body">
     My model body content
   </div>
    <div class="modal-footer">
    <button id="btOk" type="button" class="btn btn-success">OK</button>
    <button id="btCancel" type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
    </div>
   </div>
  </div>
  </div>

please provide solution for this issue