Question

I set up a test page that is from an actual project page stripped down to just enough to demonstrate my problem. Here’s the link.

To see what I mean, go to the link and observe how clicking on the top table’s rows toggles displaying that row’s textboxes and then labels, alternately. Note how clicking on the Cancel button makes both rows show the labels.

The bottom table behaves the same when you click on its rows. But the problem rears its ugly head when you click on the Cancel button in the bottom table. Instead of just hiding that row’s textboxes, the page actually refreshes.

I’ve spent HOURS on this and I can’t for the life of me figure out what’s going on, nor how to fix it.

I’d really appreciate it if someone could take a look at this and help me figure out what’s going on.

Answer 1

stopPropogation is case sensetive. Your second event handler uses the wrong casing (it starts with a capital S).

// Prevent bubbling of click events in #tblBranchCoverage
$('#tblBranchCoverage').on('click', ':input', function (e) {
    e.stopPropagation();
});

// Prevent bubbling of click events in #tblViewEditAllBranches
$('#tblViewEditAllBranches').on('click', ':input', function (e) {
    e.StopPropagation();
});

However as niahar points out, your second table is within a form and e.stopPropagation isn’t quite enough. You can amend both of your event handlers to simply return false instead. It’s probably worth having a read at the differences between e.stopPropogation(), e.preventDefault() and return false in this case.

If you’re thinking of going with the approach of using ajax for updates when you click save, you could simply use basic buttons instead of input buttons and not worry about having to cancel form submits.

<button type="button">Save</button>

Note the type="button" bit is important otherwise it will behave like an input button and and submit your form!