Getting clicked element's attributes

[jelewis8]

Is there a way to pull the clicked element's attributes (such as custom data attributes, or the href, for instance) into the modaal ?

I've tried $(this) inside before_open but it returns null.

[danodm]

Hi @jelewis8,

One way to do this is like so:

var my_link = $('.my-link');

my_link.modaal({
    before_open: function() {
        my_link.data('foo');
        // or
        my_link.attr('href');
    },
    after_open: function() {
        my_link.data('bar');
    }
})```

[jelewis8]

This only works for individual instances. If you have multiple instances ('.clickthis'), this only picks up the first instance on the page. Of course, this is fine if you're using IDs but it's not so great if you don't have that option.

…

On Sun, Nov 15, 2020 at 7:36 PM danodm ***@***.***> wrote: Hi @jelewis8 <https://github.com/jelewis8>, One way to do this is like so: var my_link = $('.my-link'); my_link.modaal({ before_open: function() { my_link.data('foo'); // or my_link.attr('href'); }, after_open: function() { my_link.data('bar'); }})``` — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGCTOXIPICH6XFGUPKII3LSQBXYFANCNFSM4TU7VUBA> .

-- -Jeremiah

[danodm]

@jelewis8 Correct. There are a number of ways you could approach this similarly to fetch those attributes. I don't believe this is an issue with Modaal at all, but something for you to establish in the rest of your javascript.

[MikeiLL]

@danodm that makes sense, but I sure wish you were in the mood to show an example of a solution. : ). Will share whatever I come up with... once I've solved it.

[MikeiLL]

@jelewis8 Here's what I have come up with

$('.info-popup').on('click', function() {
    var unique_id = $(this).data('unique_id');
    return $(this).modaal({
        after_open: function(ev){
            console.log(unique_id);
        },
    start_open: true
    });
});

What I'm doing is binding the clicked object to the modaal function, using jQuery's on method.

[jelewis8]

Ohhhh, that is clever--and I've never seen it done in this way before (I'm not a JS wiz so maybe this is common). I'm going to give that a try.

…

On Tue, Nov 17, 2020 at 10:20 AM Mike iLL Kilmer ***@***.***> wrote: @jelewis8 <https://github.com/jelewis8> Here's what I have come up with $('.info-popup').on('click', function() { var unique_id = $(this).data('unique_id'); return $(this).modaal({ after_open: function(ev){ console.log(unique_id); }, start_open: true }); }); What I'm doing is bind <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind>ing the clicked object to the modaal function, using jQuery's on <https://api.jquery.com/on/> method. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGCTOTD2OE5XDAZSTN2DRDSQKICFANCNFSM4TU7VUBA> .

-- -Jeremiah

[MikeiLL]

@jelewis8 I think the cleverness is on behalf of the creators of Javascript (and, I guess jQuery). I think this is actually a really common (unless it's wrong) way of doing it, and you and I are just ignorant (but becoming less so.)

[jelewis8]

That is fair! Still, it's amazing when you see it, it feels so obvious, but it would not (was not) obvious before seeing it. Happy to always be learning new techniques.

…

On Tue, Nov 17, 2020 at 10:26 AM Mike iLL Kilmer ***@***.***> wrote: @jelewis8 <https://github.com/jelewis8> I think the cleverness is on behalf of the creators of Javascript (and, I guess jQuery). I think this is actually a really common (unless it's wrong) way of doing it, and you and I are just ignorant (but becoming less so.) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGCTOWXZFWV6DSCBND36CTSQKI2PANCNFSM4TU7VUBA> .

-- -Jeremiah

[therbta]

I've fixed it like this:

<a href="#" class="pop" url="https://google.com"> </a>

$('.pop').on('click', function () {
	var url = $(this).attr('url');
	return $(this).modaal({
		type: 'iframe',
		content_source: url,
	});
});