jQuery waitUntilExists not working with 3.2.1 jQuery version

[ofernandezg]

Hi

I'm using an extension based on waitUntilExtension (see the post):

https://community.tealiumiq.com/t5/iQ-Tag-Management/Using-jQuery-waitUntilExists-to-modify-page-ele...

For past developments done with jQuery version 2.x is working but with 3.2.1 is not working.

Thanks in advance

Óscar

[ruipedromachado · Accepted solution]

Hi @ofernandezg,

According to Jquery reference https://api.jquery.com/selector/ 

this.selector was deprecated with jquery 1.7 and completely removed with jquery 3.x.

Since this.selector cannot be used anymore, as per reference, we should pass the selector as a parameter into the function. I have change/adjusted the IIFE to cope with it:

(function (e, f) {
    var b = {};
    var g = function (a) {
        if(b[a]) { 
            f.clearInterval(b[a]);
            b[a] = null;
        };
    };

    e.fn.waitUntilExists = function (s, h, o, c) {
        if(o == null || o == undefined) o = 0;
        var d = e(s)
        var k = d.not(function () {
            return e(this).data("waitUntilExists.found");
        });

        if (h === "remove") {
            g(s);
        } else {
            k.each(h).data("waitUntilExists.found", !0);
            if (o && d.length) {
                g(s);
            }
            else if (!c) {
                b[s] = f.setInterval(function () {
                    console.log(s + " handler is running");
                    d.waitUntilExists(s, h, o, !0);
                }, 500);
            }
        }
        return d
    }
})(jQuery, window);

With this, your plugin calls also have to be adjusted to the format

$(selector)..waitUntilExists(selector, anonymous function, "true or false if the handler should be deleted after it runs");

Here is an example:

$("#mySelector1").waitUntilExists("#mySelector1", function () {
    console.log("1 is there");
}, true);

$("#mySelector2").waitUntilExists("#mySelector2", function () {
    console.log("2 is there");
}, true);

Thats it.

If you add an element with any of does ID's "$("<div />").attr("id","mySelector2").appendTo("body");" you will see the console message stopping (because on my example I defined the last parameter as true other wise it will keep of listening)

PS: this implementation actually should work with any version of Jquery.

[ofernandezg]

Hi @ruipedromachado

Thank you for your prompt reply, it's working now!

Kind Regards

Óscar

[ofernandezg]

Hi @ruipedromachado,

I have a problem with this piece of code, sometimes the element that we expect is not rendered in the screen (error in ws, etc...), and the function is running until the element exists. Is there any solution to fix this problem?

Thanks in advance

Óscar

[ruipedromachado · Accepted solution]

Hi @ofernandezg, 

Here is a new implementation with a time period.

(function (e, f) {
    var b = {};
    var r = 5; // tries for 5 seconds, change to which ever is the prefered retry period 
    var br = {};
    var g = function (a) {
        if (b[a]) {
            f.clearInterval(b[a]);
            b[a] = null;
        };
        if (br[a])
            br[a] = null;
    };

    e.fn.waitUntilExists = function (s, h, o, c) {
        if (o == null || o == undefined) o = 0;
        var d = e(s)
        if (br[s] == null || br[s] == undefined) br[s] = 0;
        var k = d.not(function () {
            return e(this).data("waitUntilExists.found");
        });

        if (h === "remove") {
            g(s);
        } else {
            k.each(h).data("waitUntilExists.found", !0);
            if (o && d.length) {
                g(s);
            }
            else if (!c) {
                b[s] = f.setInterval(function () {
                    console.log(s + " handler is running");
                    d.waitUntilExists(s, h, o, !0);
                }, 500);
            }
        }
        br[s] = br[s] + 1;
        if (br[s] == r * 2) {
            g(s);
            console.log(s + " handler stopped running after " + r + " seconds trying");
        }
        return d
    }
})(jQuery, window);

This snippet will try to find the element for 5 seconds and then it stops. 

You can adjust the retry period on this line:

var r = 5; // tries for 5 seconds, change to which ever is the prefered retry period 

[ofernandezg]

Thank you very much for the quick response, @ruipedromachado.

It's working fine!

Kind regards

Óscar

[ofernandezg]

Hi @ruipedromachado

I understood that the soluction will work with any version of jQuery, is not working for jQuery 1.11

Thanks in advance

jquery-1.11.0.js:384 Uncaught TypeError: Cannot read property 'call' of undefined
at Function.each (jquery-1.11.0.js:384)
at jQuery.fn.init.each (jquery-1.11.0.js:137)
at jQuery.fn.init.e.fn.waitUntilExists (<anonymous>:25:9)
at <anonymous>:2:11

[ruipedromachado]

Hi @ofernandezg,

Seems to be working. Also tryed with version 1.10.0.

Here is a full page example with 1.11.0 to run on your local environment. It works out of the box.

The page has 1 element which will be caught immediatetly and 2 buttons to add element 2 and 3 which will be caught as soon as they are added. Please note that the retry period is 5 seconds, if the buttons to add element 2 and 3 are not pressed you will see on the console saying the handler has experied. after that reload the page to try again. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- 
        
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

        
        -->

        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>


        <style>
            .container {
                border: red solid 1px;
            }
            .element {
                border: green solid 1px;
                margin: 10px;
            }
        </style>
        <script>

            (function (e, f) {
                var b = {};
                var r = 5; // tries for 5 seconds, change to which ever is the prefered retry period 
                var br = {};
                var g = function (a) {
                    if (b[a] != null && b[a] != undefined) {
                        f.clearInterval(b[a]);
                        delete b[a];
                    }
                    ;
                    if (br[a] != null && br[a] != undefined)
                        delete br[a];
                };

                e.fn.waitUntilExists = function (s, h, c) {
                    var d = e(s)
                    if (br[s] == null || br[s] == undefined)
                        br[s] = 0;
                    var k = d.not(function () {
                        return e(this).data("waitUntilExists.found");
                    });

                    if (h === "remove") {
                        g(s);
                    } else {
                        k.each(h).data("waitUntilExists.found", !0);
                        if (d.length) {
                            g(s);
                        } else if (!c) {
                            b[s] = f.setInterval(function () {
                                console.log(s + " handler is running");
                                d.waitUntilExists(s, h, !0);
                            }, 500);
                        }
                        br[s] = br[s] + 1;
                        if (br[s] == r * 2) {
                            g(s);
                            console.log(s + " handler stopped running after " + r + " seconds trying");
                        }
                    }
                    return d
                }
            })(jQuery, window);


            /*
             * 
             * usage
             * 
             */


            /*
             
             $("#brand-logo").waitUntilExists("#brand-logo", function () {
             console.log("1 is there");
             });
             
             $("#mySelector2").waitUntilExists("#mySelector2", function () {
             console.log("2 is there");
             });
             
             $("#mySelector3").waitUntilExists("#mySelector3", "remove");
             
             
             */

            function addElement(id) {

                $("#container" + id).append("<div class='element' id='element" + id + "'>this is element" + id + "<div>");

            }

            $("#element1").waitUntilExists("#element1", function () {
                console.log("element1 found");
            });

            $("#element2").waitUntilExists("#element2", function () {
                console.log("element2 found");
            });

            $("#element3").waitUntilExists("#element3", function () {
                console.log("element3 found");
            });

        </script>
    </head>
    <body>

        <p>
            open the console and reload the page.
            <br>
            after that check console messages.
        </p>

        <hr>
        <br>
        <br>

        <div id="container1" class="container">
            container 1
            <div id="element1" class="element">this is element1 and its available at page load. the listener for this element was fired on page load.</div>
        </div>
        <br>
        <button onclick="addElement(2);">Add element2 to container 2</button>
        <div id="container2" class="container">container 2</div>
        <br>
        <button onclick="addElement(3);">Add element3 to container 3</button>
        <div id="container3" class="container">container 3</div>
        <br>
    </body>
</html>

[ofernandezg]

Hi @ruipedromachado

You can check  in this page https://simuladores.bancosantander.es/SantanderES/mortgagesimulatorweb.aspx?por=santander#/t1

If you add the next selector $("#btn_calculateMaxMortgage").waitUntilExists(function(){debugger;}); it raise the next error:
jquery-1.11.0.js:384 Uncaught TypeError: Cannot read property 'call' of undefined
at Function.each (jquery-1.11.0.js:384)
at jQuery.fn.init.each (jquery-1.11.0.js:137)
at jQuery.fn.init.e.fn.waitUntilExists (<anonymous>:25:9)
at <anonymous>:1:32

Best regards

[ruipedromachado · Accepted solution]

Hi,

Just tryed, I believe the issue is with the usage. The function requires the ID to be passed in as a first parameter.

So instead of:

$("#btn_calculateMaxMortgage").waitUntilExists(function(){debugger;});

It should be

$("#btn_calculateMaxMortgage").waitUntilExists("#btn_calculateMaxMortgage", function(){debugger;});

Here is a screen shot from the page:

Hope this helps.

[ofernandezg · Accepted solution]

Sorry @ruipedromachado

I forgot to add the first parameter with the selector, $("#houseSituation").waitUntilExists("#houseSituation",function(){debugger;}); now is working

Many thanks

Best Regards