JQuery Modal Trigger for Unique Elements

Question

Let's say I have a collection containing 3 elements.

Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.

Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?

Here is a link to a gist containing the problematic code https://gist.github.com/anonymous/85481507a1171467cae5

I have tried using a suggestion below that implements the following:

$('#hingle_dingle_0').on('click', function(e){
    $('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    console.log(button);
});

However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.

Thanks for any help!

Please show how you are triggering the modal. – Malk Oct 29 '15 at 17:50 — Malk, Oct 29 '15 at 17:50
@Malk added a fiddle to demonstrate. – Neurax Oct 29 '15 at 18:05 — Neurax, Oct 29 '15 at 18:05

score 0 · Answer 1 · answered Oct 29 '15 at 18:25

0

The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">

You can capture the calling button by tapping into the event thrown when the modal is opened:

$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
    console.log(e.relatedTarget.id);
});

Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.

answered Oct 29 '15 at 18:25

Malk

11,855
4
33
32

Will try this when I get home and post results, thank you for promptness. – Neurax Oct 29 '15 at 18:37
Saw the button inside the form right after posting, thanks for clarifying on that. As for `e.relatedTarget.id`, this didn't work. I fixed the ids (#remove_btn1) so they're all unique, however when doing console.log(e) on your function above, I found no relatedTarget nor anything that gives me the relationship. – Neurax Oct 29 '15 at 19:28
http://stackoverflow.com/questions/26187370/bootstrap-modal-relatedtarget-is-undefined – Malk Oct 29 '15 at 19:47
I see that. Implemented on my own sheet, I get `[Log] Object (networks, line 187) currentTarget: div#confirmRemoveNetwork.modal fade in data: undefined delegateTarget: body.modal-open handleObj: Object isTrigger: 3 jQuery21408603978690225631: true namespace: "bs.modal" namespace_re: /(^|\.)bs\.(?:.*\.|)modal(\.|$)/ result: undefined target: div#confirmRemoveNetwork.modal fade in timeStamp: 1446152046437 type: "shown" __proto__: Object ` back for e. Here is a link to the source. https://gist.github.com/anonymous/4e771aeb3c568d3a6a41 – Neurax Oct 29 '15 at 20:55
I don't know if it matters, but try including the bootstrap.js before the script tag. – Malk Oct 29 '15 at 21:10

JQuery Modal Trigger for Unique Elements

1 Answers1