We Keep Coding

Execute jQuery after Other JS file Dynamically loads content

I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.
My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.
How can I execute my script as soon as Script#1 successfully loads it's dynamic content?
I've found this post which does seem to address the same issue but using the setInterval function as #Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..
jQuery(window).load(function ($)
{
var i = setInterval(function ()
{
if ($('div.enrollment').length)
{
clearInterval(i);
// safe to execute your code here
console.log("It's Loaded");
}
}, 100);
});
Any help on guidance on this would be greatly appreciated! Thanks for your time.

It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.
I would try to add another tag with an id inside and test for its existence:
<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>
Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)
var healCodeLoadingInterval = setInterval(function(){
var healCodeLoading = jQuery('healcode-widget #healCodeLoading');
if (healCodeLoading.length == 0) {
clearInterval(healCodeLoadingInterval);
// Everything should be loaded now, so you can do something here
}
}, 100);
healcode.js should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.
Hope that helps.

If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2
$.get( "ajax/test.html", function( data ) {
// Now you can do something with your data and run other script.
console.log("It's Loaded");
});
The function is called, after ajax/test.html is loaded.
Hope that helps

Notify JS with element Selector Doesn't works 100%

I'm using Notify JS from here :
http://notifyjs.com/
And this is my HTML :
<div>
<p><span class="elem-demo">aaaa</span></p>
<script>
$(".elem-demo").notify(
"Hello Box",
{
autoHide:false
}
);
</script>
</div>
It doesn't work correctly. I can see the arrow, but not the message.
I've check using my browser "inspect element", the class notifyjs-container has "display:none" and when i try change it into "display:inline" via my own css, the message does appear, but without its animation.
Anybody can help ?
Here I attach the image of the small arrow i said earlier :

You need to put the notify setup inside the doc ready, ie:
$(function() {
$(".elem-demo").notify("Hello");
});
What is happening is that the .notify() script is running before the page has fully rendered, so the .elem-demo does not yet exist when $(".elem-demo") tries to find it, so the .notify() has nothing to attach itself to.
$(function() { ...
is shorthand for
$(document).ready(function() { ...
which is jquery's way of saying - don't run this script until the page elements have completely finished loading.
It's generally a good idea to put all your scripts into a ready function like this (multiple $(function() { ... can be called, they don't need to be all in the same one).
More info on the jquery learning page: https://learn.jquery.com/using-jquery-core/document-ready/

Design pattern for loading content via Ajax on initial page load

One screen I have needs to render entirely before it calls ajax to start a long-running task. I.e. loading the layout before loading in a report that takes 10+ seconds (relies on web services).
I can do this by adding a separate script to the page and calling the Ajax when that script is loaded, but is that the best design? E.g.
_myreport.js:
$( document ).ready(function() {
var report = {
load: function() {
//test for report-container and run Ajax load if it exists
}
}
report.load();
});
I might have several pages for this and I don't particularly like having multiple scripts for multiple different pages. Or I might want to re-use scripts across multiple pages when the Ajax call may or may not be required (and the container may or may not exist). I can check for the existence of the container before running the Ajax but to me this doesn't feel like a good design. I'd like to call it when required, not call it every page load and then test if it's applicable via the container existing.
I tried putting a small call to the function in the body after the container, but this results in an error as the report.load() function has not yet been defined:
template.phtml
<div id='report-container'></div>
<script>
$( document ).ready(function() {
report.load();
});
</script>
What is a common/standard and clean way of doing this that I can re-use across multiple applications?

report.load has not been defined because it's warped in $( document ).ready.
You are trying to call it after the report-container has loaded but before entire DOM has.
If you declare your ajax loading function outside of $( document ).ready, it will be avalable.
Same with the call to it, you are running a script after the div loads, but becouse it's wrapped in $.ready, instead of executing right away, it waits for the rest to load...
Something like this should work
// not wrapped in $( document ).ready
var report = {
load: function() {
// not sure if you need to test for container, this function is called after it loads
//run Ajax
}
}
<div id='report-container'></div>
<script>
// not wrapped in $( document ).ready
report.load();
</script>

Jquery event in manipulated content by another script

I have page where an external script manipulates the content. The completion of manipulation takes a while depending on connection speed, etc.
What i want to do is to change attributes of some elements in manipulated content. When i try
$('#confirmButton').remove();
it doesn't work as the button does not exist at the time of running this jquery function.
What can i do to wait for the manipulation to complete, and then run my Jquery manipulations?

I was able to solve this by calling the external script from within jquery
$.getScript("http://externalscript.js", function(){
//alert("Script loaded and executed.");
//call remove function a bit later in case manipulation takes long
window.setTimeout(function (){ $('#confirmButton').remove(); }, 500);
});

Javascript won't load using jQuery Mobile with navigation-geolocation

I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred

Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!