- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
11-15-2017 08:40 AM
Hi
I'm using an extension based on waitUntilExtension (see the post):
For past developments done with jQuery version 2.x is working but with 3.2.1 is not working.
Thanks in advance
Óscar
Solved! Go to Solution.
11-15-2017 02:22 PM
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.
11-16-2017 01:47 AM
03-21-2018 09:43 AM - last edited on 03-21-2018 10:19 AM by kathleen_jo
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
03-22-2018 01:40 AM - last edited on 03-22-2018 02:30 PM by kathleen_jo
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
03-27-2018 01:37 AM - last edited on 03-27-2018 05:29 AM by kathleen_jo
04-18-2018 07:20 AM - edited 04-18-2018 07:21 AM
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
04-19-2018 01:51 AM - last edited on 04-19-2018 10:42 AM by kathleen_jo
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>
04-20-2018 03:17 AM
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
04-20-2018 03:24 AM
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.
04-20-2018 03:34 AM
Sorry @ruipedromachado
I forgot to add the first parameter with the selector, $("#houseSituation").waitUntilExists("#houseSituation",function(){debugger;}); now is working
Many thanks
Best Regards
Copyright All Rights Reserved © 2008-2023