I have a modal which automatically opens up after certain time period. The code to open the modal is written in a js file.
- xyz.js
var timehandle
//setTimeout function
timehandle=window.setTimeout("func()",x);
//function to open the modal
func(){
$('#modal').show();
}
i am clearing the timer from a jsp in order to avoid modal being opened.
- abc.jsp
<script>
head.ready(function() {
$(document).ready(function () {
window.clearTimeout(timehandle);
});
});
</script>
however, document.ready in the jsp is called earlier than the function to load the modal based on setTimeout. Can anyone tell me how do I make sure that the clearTimeout is called after the js file has been executed?
You should use <body onload="myFunction()"> since what you really want it to execute your js code after the page has loaded.
Execute a JavaScript immediately after a page has been loaded
Documentation
Related
When I load the html page the alert("hey") function appears immediately, why does the js function execute despite no onClick call? How do I prevent it from doing so? I'm new to js. Thanks for any help.
<body>
<div id="container"></div>
<script type="text/babel" src="js/es6.js"></script>
<script>
function toggleNav(){
alert("hey");
}
</script>
</body>
Are you sure you get such alert dialog,here i have ran for two times but without such problem,so check your code and clean your browser cache.or you can also change a browser and test it.
and if the question is still there, i think there maybe a closure function in your extra import js file.what i thought were only that, wish i can help you.
The alert Hey is not coming from the toggleNav() function, you should check your head part of HTML to see if there is a javascript file included which could be causing this, or show us what's in your es6.js file, the js function won't be executed unless it is being called like
toggleNav(); in your case.
And even if it was called on the onclick event it wouldn't be executed on the page load. Make sure you reload your page after you saved your changes.
I have a filtered list of items using https://mixitup.kunkalabs.com/
see screen for example
The user then selects to add another action - this uses fancybox as a popup and shows the user the next image:
Once the user has added the data, the pages does a partial post back using an update panel. the code then calls a js function from the code behind to close the popup and then call the mixitup function to reinitialize the list as it now has a new item in it, but it doesn't work.
Here's the code behind that calls the js
ScriptManager.RegisterStartupScript(Me, [GetType](), "Load", "ReloadData();", True)
and here is the js that will be called:
function ReloadData() {
parent.jQuery.fancybox.close();
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
}
The fancybox closes but the mixitup never gets fired as it it never passes the docment.ready test meaning its not loaded so cant run the jQuery, but I am unsure why?
$(document).ready() fires after the document is finished rendering. So, if you already rendered your page and are now interacting with it, that ready statement no longer has any relevance, until you reload the page. So, don't put that inside a function.
Just call your mixItUp code inside the function block.
function ReloadData() {
parent.jQuery.fancybox.close();
$('#Container').mixItUp({layout: {display: 'block'}});
}
As a suggestion: if you're already using jQuery, don't bother with update panels. Just do your ajax calls through $.ajax.
You should place the following code outside the ReloadData() function.
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
document ready function should always be kept at the top level. Also please check if there is any JS error while loading page.
How would I execute some javascript upon arriving at a new page? For example, click a link a new page loads and then some script is executed on that new page?
EDIT: The problem is that I only want the js to execute when you're arriving there from a certain page so dom ready code on that destination page would fire any time that page is loaded.
Just define your function at the end of your page body or in your <head>:
<script> myFunction(){
//some code here
}
</script>
And the set the onload on your page body to run that function:
<body onload="myFunction()">
This is the Javascript method. For jQuery, use $(document).ready().
with Jquery:
$(document).ready(function(){
//The code here is executed after the page is loaded
})
with Javascript
document.addEventListener("DOMContentLoaded", function(event) {
//The code here is executed after the page is loaded
});
A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time. Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, I were not able to get it working.
In you case, this function binds my anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when I refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
it work fine first time when page is loaded.
<script type="text/javascript">
$('body').flipLightBox();
</script>
If you need to call Javascript/jQuery function in an UpdatePanel you need place them inside the pageLoad() function:
<script type="text/javascript">
function pageLoad() {
$('body').flipLightBox();
}
</script>
This will call it on every update of the UpdatePanel.
How to add onload event to a div element?
I've read this, despite this I have a problem..
I know there's no onLoad for divs, but I should be able to execute a snippet like so:
...
<div id="content">
<div class="text">
</div>
</div>
<script type="text/javascript">
navigate('main.php', 'content');
</script>
....
This doesn't work, if I start a new browser session and navigate to index.php, it shows me a login window. After logging in it redirects me to index.php but with some session variables and cookies set. Now index.php contains the code above, prior to this content didn't exist.
Now to my issue: it appears as if most browsers refuses to accept that content exists,
in the navigate function I've got:
function navigate(str, what) {
if(what == null) {
what = document.documentElement;
} else {
what = document.getElementById(what);
}
what will become null because it's a not a valid Element at the moment of execution.
I've tried:
window.onLoad = naviate('main.php', 'content');
Which does nothing, same issue there..
Also tried putting the <script> block at the end without luck.
I can't use jQuery or anything so please keep it to standard Javascript, HTML and CSS.
Browsers in use: IE8, Chrome, FireFox.
Load index.php
Login to loginwindow
Load index.php
Upon completed load of index.php, read all elements including content
Update content with some AJAX data.
It works if
I login, load the page once with unsuccessful result and then refresh the page again.
And here's the reason why:
I use AJAX on the login window as well, it uses navigate() just as all my buttons and what not does. So the issue is that index.php gets loaded, with a login window, that login window updates the entire page with AJAX (javascript) which in turn, tries to call navigate() again from within the return data from the AJAX call...
The "inline" navigate() gets called!!!, it's just that it doesn't know all the elements because it's load via AJAX.
Try this :
window.onload = function(){
navigate('main.php', 'content');
}
According to my tests you can get div element by .getElementById even before the page is loaded.
Do not forget that the navigate function must be defined before it is called. So if you have your scripts at the end of document (which is correct), you must call the function after execution of theese scripts.
But anyway, you've assigned the .onload function wrongly. Do it like this:
window.onload = function(event) {
/*any script here*/
}
Or like this:
function load(event) {
/*any script here*/
}
window.onload =load;