Call user defined jQuery function with JS

Question

I use a jQuery window libray https://github.com/humaan/Modaal

which triggers events this way $("class of element").modaal({arg1, arg2,...});

--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---

To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:

<iframe src="External.html" id="mainContent" onload="access()"></iframe>

which calls this function:

function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}

Actually it will only work on every second click. Any idea what I did not consider properly?

Best

JQuery IS a javascript. If you are able to call elements in your loaded svg (in pure js), you can do it with JQuery as well. But as Modaal is a JQuery plugin, you have to have JQuery objects. — Sven Liivak
– Sven Liivak, Commented Feb 11, 2019 at 9:20
@SvenLiivak Sorry but I did not get your answer. Even if I use a Html in an iframe, I cannot pass it the jQuery event. I can call a Javascript function on an iframe document like document.getElementById("iframeID").contentDocument.getElementById("elementID") but the jQuerry will not get attached to this element. Is there a way to trigger an external element e.g. a <div> within an iframe with jQuery? A <div> should be an jQuerry elemnt, isn't it? — Hirschferkel
– Hirschferkel, Commented Feb 11, 2019 at 9:44
@SvenLiivak I tried this already, I htink. I get the rigth element, but it will only work on every second click, no idea, why? No error message in console... $("#mainContent").contents().find("IDofDIVelement").modaal({}); — Hirschferkel
– Hirschferkel, Commented Feb 11, 2019 at 12:41
You dont need to set a own listener, moodal does that for you. The very only line you need in demonstrated code is: $("#mainContent").contents().find("IDofDIVelement").modaal({}); — Sven Liivak
– Sven Liivak, Commented Feb 11, 2019 at 13:01

Sven Liivak · Accepted Answer · 2019-02-11 20:15:04Z

1

You do not need to wait windows loading but iframe only:

$(function() {
    $("#mainContent").bind("load",function(){
        var myIframeElement = $(this).contents().find(".modaal");

        myIframeElement.modaal({
            content_source: '#iframe-content',
            type: 'inline',
        });
    });
});

answered Feb 11, 2019 at 20:15

Sven Liivak

1,41311 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hirschferkel · Accepted Answer · 2019-02-12 07:43:58Z

The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with

$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});

This worked properly to attach the functionallity to an element within the iframe.

Actually modaal will vanish the envent handler after the overlay was opened and closed again. So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue. (It can be optimised by @SvenLiivaks answer):

 $(window).on("load", function() {
     reload();
    });

function reload() {
    var length = $("#iframeID").contents().find("#IDofDIVelement").length;
    // The following check will return 1, as the iframe exists.
    if (length == 0) {
        setTimeout(function() { reload() }, 500);
    } else {
        $("#iframeID").contents().find("#IDofDIVelement").modaal({
            content_source: '#modalwrapper',
            overlay_close: true,
            after_close: function reattach() {
                reload();
            }
        });
    }
}

Collectives™ on Stack Overflow

Call user defined jQuery function with JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related