How to have button click event separated from button click event

dan-z

i have been trying to have separate button click event and row click event. how ever when i try to edit a tuple using a button click event row click event triggers.

Below is my table loading and row click event.

$(document).ready(function () {
            var dataTable;
            $('#Person').parsley();

            $.ajax({
                url: "/Details/GetAllDetails",
                type: "Get",
                datatype: "json",
                success: function (data) {

                    dataTable = $("#persondatatable").DataTable({
                        select: true,
                        data: data,
                        columnDefs: [
                            {
                                "click": false, "targets": [6],
                                "width": "24%"
                            }
                        ],
                        columns: [
                            { "data": "Id", "visible": false },
                            { "data": "Firstname" },
                            { "data": "LastName" },
                            { "data": "PhoneNo" },
                            { "data": "Email" },
                            { "data": "SSN" },
                             {
                                 "data": "Id", "render": function (data) {

                                     return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'

                                 }
                             }
                        ],

                    })

                        $('#persondatatable tbody tr').on('click', function (e) {

                            e.stopPropagation();
                            var datalist;

                            var id = dataTable.row(this).data().Id;

                            $.ajax({
                                type: 'Post',
                                url: "/Details/ViewDetails/" + id + " ",
                                success: function (data) {

                                    FirstName.textContent = data[0].Firstname,
                                    LastName.textContent = data[0].LastName,
                                    Address.textContent = data[0].Address,
                                    DOB.textContent = data[0].DOBString,
                                    Email.textContent = data[0].Email,
                                    Phone.textContent = data[0].PhoneNo,
                                    SSN.textContent = data[0].SSN
                                }
                            })
                        });
                    } 
                
            });
        }) 

shown below is my edit table function

  function editdetails(id) {
            $('#Person').parsley().reset();
            $.ajax({
                url: "/Details/Edit/",
                type: "POST",
                data: JSON.stringify({ id: id }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var id = data[0].Id;
                    $('#id').val(data[0].Id),
                    $('#firstname').val(data[0].Firstname),
                    $("#lastname").val(data[0].LastName),
                    $('#address').val(data[0].Address),
                     $('#dob').val(data[0].DOBString),
                    $('#email').val(data[0].Email),
                      $('#phone').val(data[0].PhoneNo),
                    $('#ssn').val(data[0].SSN)
                }
            });
        } 

kthorngren

See if one of these SO threads about stopPropagation() helps:
https://stackoverflow.com/questions/13589022/can-i-exclude-a-button-click-inside-a-tr-click-event
https://stackoverflow.com/questions/21352529/button-inside-table-row-tr-when-clicking-button-only-do-button-action

Kevin

dan-z

No... it didn't work either. Anyway Thanks for replying.

kthorngren

What did you try?

Maybe this thread will help:
https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute

I took your code snippets and made a simple example using stopPropagation():
http://live.datatables.net/duzoveja/1/edit

Here are a couple examples, that don't use onclick, that might work better for you:

Uses columns.render:
http://live.datatables.net/qemodapi/1/edit

Uses `-option columns.defaultContent':
http://live.datatables.net/xijecupo/1/edit

Kevin

dan-z

I used exactly as you have mentioned on your example but it gave
"e.stopPropagation is not a function" on console but kept on triggering view details function on row click event and edit button click event. any explanation for this.?

kthorngren

Forgot to mention that I added the event parameter to your onclick:
onclick="editdetails(event, ' + data + ')"

Kevin

dan-z

Thanx mate, it worked fine You are a partner in progress....