I have an <a> tag that toggles the show/hide of a Bootstrap Modal.

<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo"></a>

Where emailFoo modal looks like

<div  id="emailFoo">
    <div >
        <div >
            <div >
                <button id="sendEmail">OK</button>
            </div>
        </div>
    </div>
</div>

I want to obtain the data of FOO upon the clicked event of an #email button inside the #emailFoo

How can I get the value of the foo from the button that opened the modal in the #sendEmail click event?

$( "#sendEmail" ).click(function() {
    //Get foo here from Parent modal that button is inside
     
    //$('#emailFoo').dataset['foo']
});

As a workaround I can obtain foo from when the modal is first opened. I was thinking I can then set this value somewhere else so that the button click can get it.

I.e.

    $('#emailFoo').on('show.bs.modal', function () {

        //This works! How can I do the same thing from the `sendEmail` click event above?
        const callerFromAnchorTag = $(e.relatedTarget);
        const foo = callerFromAnchorTag [0].dataset['foo'];
    });

CodePudding user response：

Answer by Ali works, but you can try this too:

1. Add a hidden field in the modal: <input type="hidden" id="hidden-value">

2. On clicking the modal toggle, set the value of this hidden-value:

    $('#open-modal').on('click', function(event) {
        $('#hidden-value').val($(this).data('foo'));
    });
   

3. On clicking the OK button, get the value (just logging here):

    $( "#sendEmail" ).on('click', function() {
        console.log($('#hidden-value').val());
    });
   

This is an answer more on the way of 'set the value somewhere, then get it on click'.

CodePudding user response：

it seems you want to get the foo value in this way:

$( "#sendEmail" ).click(function() {

     const btn = $(this);
     
     const modal_id = btn.parents('.modal').attr('id');

     let toggler = $('body').find('[data-target="#'   modal_id  '"]');

     console.log(toggler.attr('data-foo'));
});

UPDATE:

new part:

so we have several toggler in a page, you want to detect witch toggler is the caller of modal?

A fancy way to achieve this (by js objects):

class Modal {
    constructor(selector) {
        this.$modal = $(selector);

        this.modal_id = this.$modal.attr('id');
        this.$toggler = null;

        this.init();
        this.events();
    }

    init() {
        const obj = this;
    }

    events() {
        const obj = this;

        $('[data-toggle="modal"]').on('click', function () {
            const $a_toggler = $(this);
            if ($a_toggler.attr('data-target') === '#'   obj.modal_id)
                obj.$toggler = $(this);
        });
    }

    get_toggler() {
        return this.$toggler;
    }
}

usage:

making new modal object (at first of your code):

const my_modal = new Modal($('#emailFoo'));

returning toggler jquery object (wherever you want to get it):

console.log(my_modal.get_toggler());

another simple way:

make a hidden input inside your modal like this:

<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo" data-toggler="toggler-1"></a>
<div  id="emailFoo">
    <input type="hidden"  value="" hidden>
    <div >
        <div >
            <div >
                <button id="sendEmail">OK</button>
            </div>
        </div>
    </div>
</div>

after clicking on togglers, save its id or some attribute like data-toggler="__toggler-number__" (I used data attribute):

$('[data-toggle="modal"]').on('click', function () {
    const toggler = $(this);
    const toggler_identifier = toggler.attr('data-toggler');
    let modal_id = toggler.attr('data-target');
    $(modal_id).find('.js-toggler__input').val(toggler_identifier);
});

so you can get the toggler by jQuery:

let toggler_identifier = $("#sendEmail").parents('.modal').find('.js-toggler__input').val();
console.log($('[data-toggler="'   toggler_identifier   '"]'))

be care about:

data-toggler attributes should be unique

some points:

better to use classes over data-attributes to select DOM, data-attributes should use to store little data.

CodePudding user response：

You can try this instead assign foo to button data-attr

$('#emailFoo').on('show.bs.modal', function () {
    const callerFromAnchorTag = $(e.relatedTarget);
    const foo = callerFromAnchorTag [0].dataset['foo'];
    $('#sendEmail').attr('data-foo', foo);
});

then

$('#sendEmail').click(function(){
    const foo = $(this).data('foo');
});