Cannot Handle Links in content with JQuery

[melkishengue]

Hi Robin,

just wanted to know there was a way to handle the links in the content of the modal, with JQuerys eventListeners for example. When I click on these Links they just don't react, although I attached some eventlisteners to them. I really find your plugin awesome ;)

Thanks.

[robinparisi]

Hi,

If you can post an example of your code (especially the part where you bind events and instantiate the modal), I could take a look at this :)

[ginsterbusch]

Having the same issues here. Already tried different variations of either setting up the modal before or after the jQuery content injection, but always getting some JS errors ..

[ginsterbusch]

Code example:

var strSearchPageURL = jQuery('.menu .link-search a, .search-link, a.link-search').eq(0).attr('href');

            if( strSearchPageURL != '' ) {
                var modalSearch = new tingle.modal({
                    footer: true,
                    onOpen: function() {
                        console.log('opened search modal ..');
                    },
                    onClose: function() {
                        console.info('closed search modal!');
                    },
                });



                jQuery.get( strSearchPageURL, function( data ) {
                    var strSearchPageContent = jQuery( data ).find('#main').html();
                    //strSearchPageOverlay = '<div class="modal search-page" id="search-modal">' + strSearchPageContent + '</div>';
                    //strSearchPageOverlay = '<div class="modal search-page closed" id="search-modal">' + strSearchPageContent + '</div>';

                    //document.getElementsByTagName('body')[0].insertAdjacentHTML('afterbegin', strSearchPageOverlay );

                    modalSearch.setContent( '<div class="tingle-content-wrapper">' + strSearchPageContent + '</div>' );

                });

                jQuery('.menu .link-search a, .search-link, a.link-search').on('click', function( e ) {
                    e.preventDefault();

                    modalSearch.open();
                });
        }

This essentially digs up the URL to the search page of a WordPress site I'm developing for a client, uses AJAX to get that singular page and parses out the important part, ie. the content. Thus, we insert that filtered-out content .. and after that, add an event listener. Which doesnt seem to work :(

FYI: Before trying out tingle, I've been fiddling around with Magnificent Popup. Which after all is NOT so magnificent because its lacking style. ALL of it, you oughta style it completely for yourself, with no real defaults to go for. So thats why I thought a non-jQuery-dependent, simple, but already prepared modal script would be a better option .. now if it just WOULD WORK!!! ..

cu, w0lf.

[robinparisi]

So, I assume this part doesn't work?

modalSearch.open();

What error message did you get?

[ginsterbusch]

Firebug / JS-Console says:

TypeError: body is null
https://localhost/lms/wp-content/themes/_p/assets/js/tingle.js?ver=4.6.1
Line 95

cu, w0lf.

[ginsterbusch]

Possible bugfix:

var bodyTag = document.getElementsByTagName('body')[0];

bodyTag.classList.add('tingle-enabled');

At least, that works for me ;)

cu, w0lf.

[ginsterbusch]

Interesting part is: At some point you've been using document.body, but later on you stopped doing so and just use body.

I've replaced all calls to plain ole body with document.body, and now it works as it should ;)

cu, w0lf.

[ginsterbusch]

Just created a pull request. The issue as such is: the variable body is local, NOT stretching towards functions. You could either use a this.myVar globalization, or go for the ugly window.my_fancy_options.I_got_an_opinion_too trick.

[melkishengue]

Hi guys, ``

here is what I did to handle links in the modal content:
<a href="#" id="awesome_link_id">Click me!</a> a link in the modal

and then to handle:

var link_id = document.getElementById("awesome_link_id");
var linkClicked = function() {
var elt = this;
// We can now use with jquery
$(elt).toggle(300);
};
link_id.addEventListener('click', linkClicked, false);

Hope it helps!

[robinparisi]

Hey, sorry for the late reply!

Good catch, there's no need to use an intermediate variable for body (this comes from a previous refactoring).

However, I do not think the problem you had was a scope problem (body was shared inside tingle IIFE). It's probably because tingle was loaded in the HEAD, so during initialization, body was equal to null. By removing the body variable, body was used during tingle opening (so, after DOM fully loaded).

In any case, this is now fixed. Thanks for filing an issue and for your PR :)

[robinparisi]

@melkishengue So you attach your event after passing your content to tingle?