Get button click in editor modal popup.

classic12

Hi guys,

I have

{ data : null, title : "Email details" , "defaultContent": "<button>Email!</button>"},

I have the button click working in the rows using

$('#dtDataChanged tbody').on( 'click', 'button', function () {
        var tr = $(this).closest('tr');
    
        if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();  
    }
        
        var data = tableDataChanged.row( tr ).data();
        console.log( data['notes'] );
        var dataInEditor = encodeURI(data['notes']);
        reqSendEmail = Ajax("http://www.xxx.com/php/xxx.php?body=" + dataInEditor , emailSent);

  } );

I show all the cells in the modal using

  tableDataChanged =  $('#dtDataChanged').DataTable( {
 
            responsive: {
                details: {
             renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for Quote ID '+data.quoteID;
                }
            } )
        }
    }

When I use the modal form in responsive the button shows but obviously not click action.
What is the correct syntax to get the button to work in the modal form

Cheers

Steve Warby

allan

Are you using the default modal or something like a Bootstrap modal?

It looks like there might be a bug in the modal display - it should allow you to select rows based on information in the modal, but the information for that doesn't appear to be present.

I'll check into that.

Allan

classic12

I'm just using the above code.

tableDataChanged =  $('#dtDataChanged').DataTable( {
 
          responsive: {
              details: {
           renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
          display: $.fn.dataTable.Responsive.display.modal( {
              header: function ( row ) {
                  var data = row.data();
                  return 'Details for Quote ID '+data.quoteID;
              }
          } )
      }
  }

Cheers

Steve Warby

classic12

Hi Allan,

in your busy shedule did you manage to look at this.

www.surplusanywhere.com

shrink the page so it goes into responsive mode.

allan

I haven't yet I'm afraid. I'll post back when I do get a chance to do so.

Allan

allan

I've committed my fix, but in the end, I'm not convinced that it is the same as the issue you are seeing.

You have:

$('#dtDataChanged tbody').on( 'click', 'button', function () {

So it is listening for a button click inside the table. But the Responsive button isn't in the table.

You could use something like:

$(document).on( 'click', 'div.dtr-modal button', function () {
  var row = table.row( $(this).closest('tr') );

  $('button', row.node() ).click();
} );

That should basically act like a proxy - i.e. when there is a click on the button in the modal it will activate a click on the button in the table.

Allan