Add 2 buttons in a cell.

Add 2 buttons in a cell.

classic12classic12 Posts: 228Questions: 60Answers: 4

I am using this

 { data : null,  responsivePriority: 1 , orderable: false, width : '200px' , title : '' , class : 'form-control' , 'defaultContent': '<button style="  color : red ; color: rgb(201, 191, 197) ; border-radius: 5px ; width: 100px; height: 100px; background-color: transparent; border-width: 0.5px; border-color: white;" >Click to Email Deal </button> '},
          

then getting the onclick event using

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

 var clientEmail;
clientEmail = prompt("Enter your email. Check your spam folder for sales@surplusanywhere.com", "");

if (clientEmail) {
    
    //alert("You entered: " + clientEmail);    
    
    var tr = $(this).closest('tr');
    
    if ( $(tr).hasClass('child') ) {
      tr = $(tr).prev();  
    }
        
        var data = tableDataChanged.row( tr ).data();
        selectedDeal = data['quoteID'];

        //alert(data[3]);
        var dataInEditor = encodeURI(data['notes']);
        var selectedDeal = encodeURI(data['quoteID']);
        var dealTitle = data['quoteTitle'];
        //dataInEditor = 'test123'; 
        var data2 = {
        body: dataInEditor,
        clientEmail : clientEmail,
        selectedDeal : selectedDeal,
        dealTitle : dealTitle
};
        console.log( data['notes'] );
        console.log( data['quoteID'] );
reqSendEmail = Ajax("http://www.xxx.com/php/xxxx.php","POST" , data2 , emailSent);
      


}
else {
    
    alert("EmEmail not sent. "); 
}

I don't want to add another column for space reasons.

I now want to add another button so I can show a new modal form with the data presented on a form.

So I presume I would have to give the buttons their own id and add another button.

What do I do here

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

to action the clicks on the new buttons.

Cheers

Steve Warby

This question has an accepted answers - jump to answer

Answers

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    I would actually need the same information as is used in the column details

                responsive: {
                    details: {
                    renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
                    display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for Deal No:  '+data.quoteID;
                    }
                } )
            }
        },
    

    So is it possible to call this on the second button ?

  • classic12classic12 Posts: 228Questions: 60Answers: 4
    Answer ✓

    Got this woking as follows

     { data : null,  responsivePriority: 1 , orderable: false, width : '200px' , title : '' , class : 'form-control' , 'defaultContent': '<button id="emailDeal"  style="  color : red ; color: rgb(201, 191, 197) ;  border-radius: 5px ; width: 100px; height: 100px; background-color: transparent; border-width: 0.5px; border-color: white;" >Click to Email Deal </button> <button id+"showDeal"  style="  margin-top: 10px color : red ; color: rgb(201, 191, 197) ; border-radius: 5px ; width: 100px; height: 100px; background-color: transparent; border-width: 0.5px; border-color: white;" >Click to Show Deal </button>'}
    

    Then changed the onclick event

    $('#dtDataChanged tbody').on( 'click', '#showDeal', function () {
            ChangeForm(formDetails);
    
    });
    
    $('#dtDataChanged tbody').on( 'click', '#emailDeal', function () {
    

    http://www.surplusanywhere.com/surplusAnywhere7

This discussion has been closed.