Can't figure out why jQuery row toggle works on one table, but not another

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

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!

edited May 23 '17 at 12:12

Community

1
1

answered Feb 01 '13 at 02:07

David Spence

7,999
3
39
63

@Spencerooni: Thanks for the info. I'll definitely take a look at the article you linked. *I was wondering about whether the form tags really were necessary at all.* I am using ajax both to populate the tables (as a result of user selections elsewhere in the page) and to handle saving changes to the table's data. So if $.ajax is handling everything, can I just nix the form tags? I do need to point out, though that, as I said in my comment to niahar's answer, I tried removing the form tags and using my original code for the second table, but then that table's Cancel button didn't work at all. – marky Feb 01 '13 at 10:53
I found good articles on the differences between return false, e.preventDefault, and e.stopPropagation here: http://blog.webvines.co.uk/post/3743395029/return-false-preventdefault-and-stoppropagation-in and here: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ By the way, @Spencerooni, I fixed the stopPropagation typo that you pointed out and that fixed it, too (niahar's suggestion worked as well.) – marky Feb 01 '13 at 11:20

niaher · Answer 2 · 2013-02-01T02:25:35.667

Not sure if you've managed to make it work, but I tried Spencerooni's code in jsfiddle and it doesn't help.

However if you replace your last bit of js with this, then it should be fine:

$('tr input.cancelListEditBranch').click(function(e) {
    // Show the labels and hide the edit elements
    $(this).closest("tr").find('.edit').fadeOut(200);
    $(this).closest("tr").find('.detailDisplay').delay(200).fadeIn(200);
    return false;
});

Here's another jsfiddle.

The reason why it works in the first case and not the second, is that the second table is wrapped in form tag, so submit button automatically does a POST immediately as it is clicked, without waiting for the event to propagate. So if you want to cancel the form submission you need to capture the event at its very first stage (not when it's propagated up to the table).

Replacing your code with mine did, indeed, make the Cancel button work correctly. Because of your comment about the second table being in a form element, I tried removing the form tags and using my original code, and I was surprised to see that the Cancel button **still didn't work**. Any idea why not? — marky, Feb 01 '13 at 10:48

Can't figure out why jQuery row toggle works on one table, but not another

2 Answers2