Get button click in editor modal popup.

Get button click in editor modal popup.

classic12classic12 Posts: 228Questions: 60Answers: 4

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

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

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

    Allan

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

This discussion has been closed.