Подтверждение начальной загрузки / всплывающее окно не работает с таблицами данных в адаптивном представлении - PullRequest
Новая
       25

Подтверждение начальной загрузки / всплывающее окно не работает с таблицами данных в адаптивном представлении

0 голосов
/ 05 января 2019

У меня большой стол с 3 кнопками, 2 кнопки отлично работают как в настольном, так и в адаптивном режимах, последняя кнопка, которая является кнопкой экспорта, прекрасно работает только в настольном режиме, как показано ниже: когда пользователь находится в адаптивном режиме, эта кнопка не работает, она все еще вызывает другие события javascript, но не вызывает событие подтверждения popover / bootstrap.

Я пробовал несколько вариантов, таких как использование .delegate, .live, .on, я считаю, что это как-то связано с DOM. Я использую поповер из http://bootstrap -confirmation.js.org / 

//this is the code for the button
<a role="export" class="btn custom-confirmation" data-original-title="" title="" data-popout="true" data-singleton="true"   data-content="Choose how you want to export this file" data-toggle="confirmation" aria-label="Settings" onclick="excelExport('<?php echo $portal['workpackage']; ?>');">
<i class="fas fa-download icon-colour  fa-lg" aria-hidden="true" >
</i>
</a>





// Datatable initialization code
 $(document).ready( function () {


  if (document.getElementById('myTable')) {

$('#myTable').css('visibility','visible');
var table = $('#myTable').DataTable(
  {
    responsive: true,
    columnDefs: [
      {
        targets: [0, 3, 4, 5, 7, 8, 9, 11, 12, 13], visible: true}
      ,
      {
        targets: '_all', visible: false }
      ,
      {
        targets: [5,8,9],
        render: $.fn.dataTable.render.moment( 'DD MMM YY' )
      }
      ,
      {
        width: "20%", targets: [4] }
    ],
    "order": [[ 10, "des" ]],
    "pageLength": 10,
    rowGroup: {
      enable: true,
      dataSrc: 1,
    }
    ,
    "dom": '<"toolbar">frtip',
    initComplete: function(){
      $("div.toolbar").html('<button type="button" style="margin:5px;" id="modalcreate"  class="btn btn-primary" data-toggle="modal" data-backdrop="static" data-target="#exampleModalCenter1" onclick="getUser();">Create EWN</button>');
    }


  }
 );

  }





//bootstrap-confirmation.js code
$('.custom-confirmation').confirmation({
rootSelector: '.custom-confirmation',
container: 'body',
title: '',

buttons: [
  {
    class: 'btn btn-primary',
    label: 'PDF File',
    onClick: function() {
alert('Exporting as PDF File');

},
    value: 'PDF'
  },
  {
    class: 'btn btn-primary',
    label: 'Excel File',
    onClick: function() {
alert('Exporting as Excel File');
        document.getElementById('submittask4').click();

},
    value: 'Excel'
  },
  {
    class: 'btn btn-secondary',

    label: 'Cancel',
    cancel: true
  }
]
});
        });

Я хочу иметь возможность нажимать кнопку в мобильном режиме, чтобы подсказка отображалась так, как показано на рисунке при первом нажатии. Спасибо за любую помощь

...