CODEWITHSUNDEEP
javascriptjqueryhtml-tablepositionz-index
Gareth Daine
Gareth Daine

Reputation: 4196

JavaScript Issue on Table

I have a table of results from a database and then I have the following JavaScript that allows a user to click a table row, which will then take them to the correct record.

var pathName = window.location.pathname;

$('table tr').click(function(event) {
    var modelId = $('section').attr('data-id');
    var dataType = $(this).attr('data-type');
    var id = $(this).attr('data-id');

    if(pathName === '/accounts/' + modelId) {
        if(dataType === 'contact') {
            pathName = '/contacts';
        } else if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/contacts/' + modelId) {
        if(dataType === 'note') {
            pathName = '/notes';
        } else if(dataType === 'opportunity') {
            pathName = '/opportunities';
        }
    } else if(pathName === '/events/' + modelId) {
        pathName = '/delegates';
    }

    var showUrl = pathName + '/' + id;

    if(id === undefined) {
        event.preventDefault();
    } else {
        window.location = showUrl;
    }
});

THat works great, except that in each table row, I have a form with a button to delete the record, which when clicked bring up a popup. Unfortunately, because now the table rows are clickable to take the user to the correct records, if they click the delete button it attempts to show the popup but then quickly redirects to the record show view.

I'm thinking this could possibly be fixed with CSS but I've tried position: relative; and z-indexing to no avail.

Can anyone point me in the right direction?

Upvotes: 2

Views: 61

Answers (3)

Derek Henderson
Derek Henderson

Reputation: 9706

You have to stop propagation on the click of the button:

element.click(function (e) {  // 'element' would be your button/a/input
    e.stopPropagation();

I've created a little fiddle to demonstrate how this works: http://jsfiddle.net/PVvfV/.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

In the click event for the form button write this piece of code.

e.stopPropagation();

It will stop the event from bubbling to the parent.

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

Cancel the click event of the button in order to not propagate it to the table row.

Upvotes: 0

Related Questions