Clicking a button on a page causes to a javascript file to be loaded. How do I call a function on the completion of the loaded file?
Description
You can load the file using jQuery's getScript() function and then call a function from this script.
Sample
$.getScript('YourJavascriptFile.js', function() {
// file is loaded
});
More Information
jQuery.getScript()
Take a look at:
http://api.jquery.com/jQuery.getScript/
I believe you can put a $(document).ready in the script file you are dynamically loading, which will execute as soon as the loading is complete (assuming the DOM it's being loaded into is already "ready")
$(document).ready(function () {
// save the world
});
Related
I’m wanting to use an AJAX get method to retrieve contents from a page URL. The method works fine, the issue I’m getting is that call returns data before the page is completely loaded
Is there a way I can have the AJAX call only retrieve contents after say 5 seconds for example? (To ensure the page is fully loaded)
You can see on the page below, the page loads and then an additional loading symbol appears which loads the content. I want to retrieve the page data once all content has been loaded
https://pool.pm/addr1qy2465r5axxz92f0rlfyymz5zvsxad2v038slu70qeegm4aac2mvf8qqsgva9exmwhwpxymt896v5anudtr2wee77y6qgudr8k
You can use the onload global event handler. The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
For example
window.onload = function() {
doSomething();
};
And if you need to do the call after 5 secs, do the following
window.onload = function() {
setTimeout(() => {
doSomething();
}, 5000);
};
I'd like to be able to call a jquery function once window.location has completed loading a URL. Is this possible? I can't seem to find anything online about this.
for instance:
if(parseInt(msg.status)==1) {
window.location=msg.txt;
alert("This URL has finished loading")
}
Thanks,
-Paul
You can either use window.onload of the destination page (if you have access to modify the code of that page), or you can use window.onunload to have the alert be launched when unloading the current page. You cannot execute code on the current page after the new page has been loaded.
Yes.
This page demonstrates onload/onunload behavior.
<html>
<head>
<script>
window.doUnload = function(){
alert("Here!");
}
window.doLoad = function(){
window.location="http://www.google.com";
}
</script>
</head>
<body onload="doLoad();" onunload="doUnload();"></body>
</html>
After a user logs in for the first time I need to load my index page to initialize everything but then need to forward them to another page for profile completion.
use window.location to redirect the user to your index, adding a query parameter (something like window.location=index.php?firstLogin=true ) and on your index redirect (using javascipt http 300, header() or whatever you are using) to the profile page after it ends loading if the parameter is set
Iframe
One (ugly) method you could use is to instead of using window.location, clearing the body, adding an iframe with the relevant path and listening to its onload function.
After that you can run code inside the iframe as long as it's not cross-site scripting.
I use this method to perform small automated scripts, that can't really on third-party plugins.
Ajax
Another method might be using ajax to load the page/body content. Then replacing your body with the newly loaded body and start executing the next functions.
In my main window main.htm I have a div button that loads another htm file into a large div when clicked. I use .load() to achieve this:
$('#mainpanel').load("search.htm");
There is a function in "search.htm" called test() which only consists of alert("hi"); and I want this to load when search.htm is loaded into the div. I used the body onload tag and window.onload = test; and even $( document ).ready() but nothing works. It only works if I access search.htm on its own, but if I access it through main.htm it does't alert "hi". Is there a way to use .load() to load the page and a function? or is there a way to get the function the onload when I select the div that loads the page?
The onload / document ready will only fire once (when the parent document is loaded)
Either add a
<script type="text/javascript">
test();
</script>
to the end of the search.htm (so it's executed after everything else in the page has been parsed) or call test(); from the parent page after the load completes (via a callback)...
$('#mainpanel').load("search.htm", function(){
test();
});
It depends which page you want to be responsible for executing the function. In the latter case, the parent page needs to know the name of the function in search which may or may not fit your design.
Using window.onload or $( document ).ready() doesn't make sense because the document is most likely already loaded when you run that function.
You can pass a callback to .load and access the function inside there. The callback is executed when the other page is loaded:
$('#mainpanel').load("search.htm", function() {
test();
});
Of course test must be in global scope for this to work.
As always, it's advisable to the read the documentation of the methods you are using: https://api.jquery.com/load/.
I load this javascript file dynamically in the <head/> of my document like this
<script type="text/javascript">
if (window.screen.width <= 1600)
{
console.log("start");
var jsref1 = document.createElement('script');
jsref1.setAttribute("type", "text/javascript");
jsref1.setAttribute("src", "/javascript/mobileFunction.js");
document.getElementsByTagName("head")[0].appendChild(jsref1);
}
console.log(end)
</script>
In my all my javascript file I have this custom event called which is at the end of $(document).ready
$(document).on("xsltready", function () {
...more code....
console.log("event alled here " + a variable);
The problem is that I see the output for the two console from the dynamically loaded javascript and when I check the resource folder under the script folder in web-inpector(I am using mobile safari and remote web inspector) the file is there. The problem is that sometimes when I refresh the page it looks like the file is not loaded since none of the console.log() from inside the script is executed and. But if I refresh a few times again it comes back. Is this a behavior with loading javascript dynamically?
Note
I can still call the method inside the dynamically loaded JS file, but the custom event I trigger at the end of $(document).ready is not executed at all.
Thanks to #Levi, his comment is above he helped me go in the right direction. He was correct in that the the $(docuemnt).ready is fired before the script has loaded. the DOM does not wait for the script to load, before it is ready. ~ Levi. So what I did was instead of firing my custom event in the $(docuemnt).load it is fired in the $(window).load event, which solve the problem. But now I have a performance issue.
I will be redirecting the user to a page. This page gets all of its content from a REST api in JSON format. So on page load I would like to execute the $.get() request and load the contents of my divs in the page.
I know how to execute the get request, however, I don't know how to do it on page load. I have a application.js file for my entire application. So I can't put it in document.ready because that it would load on each page in my application.
I will be executing the get request like this:
$.get(
$(this).data('myurl'),
function (data) {
var item = data.response.item[0];
$('mydiv').html(item.text);
}
);
With jQuery this is very easy, but you have to put this block in your 'start'-page:
$(function() {
// this code will be executed on page load
app.start();
});
From what I understand, you only want to get data from rest api on a specific page..
for that you can do:
$(function(){
if (window.location.href.indexOf('/your/page/url') > -1){
// your $.get here
$.get('/torestapi', function(){ //update divs });
}
});
Add it as an inline script block with a separate document.ready, or just before </body>.
Or add it to a separate js file, and link it only from the specific page where you want to use it.