How can I open a modal window from inside a child row?

GiovanniL

I've a table with several columns. In some columns there is a button action which opens a modal window.
But when a user view the table from a mobile, these columns go to a child row and the modal window doesn't work.

var table = $('#tabella').DataTable({
        processing: true,
        serverSide: false,
        responsive: true,
        searchDelay: 350,
        lengthChange: true,
        lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "Tutto"] ],
        pageLength: 25,
        drawCallback: function () 
        {
              var api = this.api();
              if (datedavisualizzare == "1") 
                { var len = api.page.len(-1); } 
              else 
                { var len = api.page.len(25); }
        },
        buttons: [
            'copyHtml5',
            'csvHtml5',
            'pdfHtml5',
        ],
        dom: 'Bflrtip',
        ajax: {url: rottaajax,
              /*error: function (jqXHR, textStatus, errorThrown) {
                window.location.href=appBaseUrl; // se c'è un errore torna alla home
                }*/
              },
        stateSave: false,
        ordering: true,
        language: {
                "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
            },
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
       // nascondo i campi di modifica degli eventi non creati dall'utente attuale (lascio il check, ma lo segnalo dopo), CONTARE solo i campi visibili 
            
        columns: [
            { data: 'id', name: 'id', visible: false }, //0
            { data: 'title', name: 'title', visible: false }, // 1
            { data: 'start_date', name: 'start_date', render: function ( data ) {return moment(data).format('DD/MM/YYYY');}, orderData:[ 12, 3, 1 ] }, // 2
            { data: 'start_time', name: 'start_time', render: function ( data ) {return moment(data, "HH:mm:ss").format('HH:mm');} }, // 3
            { data: 'end_time', name: 'end_time', render: function ( data ) {return moment(data, "HH:mm:ss").format('HH:mm');} }, // 4
            { data: 'check', name: "check",
              render: function(data){
                var vedi_span = '';
                // la malattia (15) se supera numero fissato diviene (1), che è segnalato nelle assenze.
                // lo stesso per i permessi (36) diviene (3), anche se al momento SCU e SCR non lo prevedono
                if (data == 0) {
                  vedi_span = '<span class="btn btn-secondary" data-toggle="tooltip" title="Inserisci Presente/assente" data-target="#CheckModal"><i class="icon-check-empty" ></i></span>';}
                  else if (data == 1) {
                  vedi_span = '<span class="btn btn-warning"   data-target="#CheckModal"><i class="icon-bed" ></i></span>';}
                  else if (data == 2) {
                    vedi_span='<span class="btn btn-success"   data-target="#CheckModal"><i class="icon-medkit"></i></span>';}
                  else if (data == 3) {
                    vedi_span='<span class="btn btn-warning"   data-target="#CheckModal"><i class="icon-twitter"></i></span>';}
                  else if (data == 4) {
                    vedi_span='<span class="btn btn-success" data-target="#CheckModal"><i class="icon-pregnant"></i></span>';}
                  else if (data == 7) {
                    vedi_span='<span class="btn btn-success" data-target="#CheckModal"><i class="icon-star"></i></span>';}
                  else if (data == 8) {
                    vedi_span='<span class="btn btn-success"   data-target="#CheckModal"><i class="icon-check"></i></span>';}
                  else if (data == 15) {
                    vedi_span = '<span class="btn btn-success"   data-target="#CheckModal"><i class="icon-bed" ></i></span>';}
                  else if (data == 36) {
                    vedi_span='<span class="btn btn-success"   data-target="#CheckModal"><i class="icon-twitter"></i></span>';}
                  else if (data == 88) {
                    vedi_span='<span class="btn btn-warning"   data-target="#CheckModal"><i class="icon-check"></i></span>';}
                  else {
                    vedi_span='<span class="btn btn-danger"   data-target="#CheckModal"><i class="icon-check-empty"></i></span>';}
                    return vedi_span;
                  }
            }, // 5
            { data: 'modifica', 
              render: function(modifica){
                var edit_span = '<a href="' + modifica + '"  class="modifica btn btn-primary" role="span" aria-pressed="true" data-toggle="tooltip" title="Modifica questo evento"><i class="icon-edit"></i></a>';
                  return edit_span;                
            }
            },  // 6
            { data: 'check', name: "check", visible: false }, // 7
            { data: 'change_start_time', name: 'change_start_time', render: function ( data ) {if (data === null) {return "";} else {return moment(data, "HH:mm:ss").format('HH:mm');}}}, //8
            { data: 'change_end_time', name: 'change_end_time', render: function ( data ) {if (data === null) {return "";} else {return moment(data, "HH:mm:ss").format('HH:mm');}}}, // 9
            { data: 'documento', 
              render: function(documento){
                var documento_span="";

                documento_span = '<span data-target="#FileModal"  class="modifica btn btn-primary" data-toggle="tooltip" title="Carica un PDF (max 200 kb) relativo a questo evento"><i class="icon-upload"></i></span>';
                  return documento_span;
                
              } // 10
            },
            { data: 'scarica', 
              render: function(scarica){
                 var scarica_span="";
                 if (scarica[0].includes('Volontari//') || scarica.includes('Volontari//')) // la seconda istanza copre il caso che il bottone sia riscritto dopo il caricamento
                 {
                   scarica_span = '<a href="" class="modifica btn btn-secondary" data-toggle="tooltip" title="Scarica il PDF relativo a questo evento"><i class="icon-file-pdf"></i></a>'; 
                 }
                 else
                 {
                  scarica_span = '<a href="' + scarica + '"  class="modifica btn btn-success" role="span" aria-pressed="true" data-toggle="tooltip" title="Scarica il documento relativo a questo evento"><i class="icon-file-pdf"></i></a>';
                  }
                  return scarica_span;
                
              }
            }, // 11
            { data: 'start_date', name: 'start_date', visible: false}, // 12
            { data: 'tipo', name: 'tipo', visible: false}, // 13
            { data: 'title', name: 'title' }
            
        ],
        // la colonna start data ordinata in base a un'altra
        columnDefs: 
        [ 
          { targets: [ 2 ], orderData: [ 12, 3, 1 ] }, // ordina per data, ora inizio, fine, cognome, nome
        ],
        order: [[ 12, "asc" ], [ 3, "asc" ], [ 1, "asc" ]]
    });

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin