We Keep Coding

jquery - ajaxStop is not consistently executing javascript redirect

I am using jquery 1.9.1. I have logout code where I need to post to multiple pages then do a redirect:
<script type="text/javascript">
window.onload=function(){
$( document ).ajaxStop(function() {
logoutRedirect();
});
logoutOfApps();
}
</script>
These methods are in a different javascript file (but I think that is irrelavent).
function logoutOfApps(){
$.post("/app1/logout");
$.post("/app2/logout");
}
function logoutRedirect(){
var redirectOnLogoutURL = null;
redirectOnLogoutURL = "/mylogoutdisplaypage";
top.location = redirectOnLogoutURL;
}
SECOND TRY: This also doesn't work consistently:
<script type="text/javascript">
window.onload=function(){
logoutOfApps();
logoutRedirect();
}
</script>

Make sure both requests have finished before you redirect
function logoutOfApps(){
return $.when(
$.post("/app1/logout"),
$.post("/app2/logout")
)
}
logoutOfApps().done(logoutRedirect);

Just for completeness thought I would document exactly how I changed it, which took a little while to get just right. Thank you adeneo for your answer that I accepted.
<script type="text/javascript">
window.onload=function(){
onLoadOfPage();
}
</script>
This is in the second file (I preferred all jquery code in one file):
function onLoadOfPage(){
$( document ).ajaxStop(function() {
logoutRedirect();
});
logoutOfApps().done(logoutRedirect);
}
function logoutOfApps(){
return $.when(
$.post("/app1/logout"),
$.post("/app2/logout")
)
}
function logoutRedirect(){
var redirectOnLogoutURL = null;
redirectOnLogoutURL = "/mylogoutdisplaypage";
top.location = redirectOnLogoutURL;
}

jquery load function not working in combination with other js code

I have a problem regarding the combination of two parts of the code. This code alone is working fine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>
<script>
$('#left-panel-link').panelslider();
$('#close-panel-bt').click(function() {
$.panelslider.close();
});
But when I add this one below, the second function (panelslider.close) is not working anymore. Moreover, the load function of the second part of the code is not working neither.
$(document).ready(function() {
$('#content').load('content/index.php');
$('ul#menuslider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
});
});
I probably missed something important? Any help is welcome, as I don't know which keyword to use in order to look for a solution. I already tried "combine ajax and jquery", "load not working" and others, but without success.
Thanks in advance! Jonas

Something like this:
<script>
(function($){
$('#left-panel-link').panelslider();
var content = $('#content');
content.load('content/index.php');
$(document)
.on('click', '#close-panel-bt', function() {
console.log("about to close the panel");
$.panelslider.close();
})
.on('click', 'ul#menuslider li a', function() {
var page = $(this).attr('href');
console.log("about to reload content");
content.load('content/' + page + '.php');
});
}(jQuery));
</script>

Quit function on body onLoad

I need a script thats redirects the user to a second side, when the mainpage need to long to load.
I did this:
<script type='text/javascript'>
$(document).ready(function() {
setTimeout("location.replace('contact.html')",10000);
});
</script>
To sametime a preloader opens an get hided on on body onload, when that happens i need to kill the functon above?
Anybody an idea?

Try this:
var redirect = setTimeout(function(){
window.location = 'somewhere'
}, 10000)
$(document).ready(function() { // or $(window).load(function() {
clearTimeout(redirect);
});

setTimeout("location.replace('contact.html')",10000);
Instead, you can try
setTimeout(function(){window.location='contact.html'},10000);

You Can try Following
var Ispreloader=false;
<script type='text/javascript'>
$(document).ready(function() {
if(!Ispreloader)
{
myfunction();
}
});
function myfunction()
{
setTimeout("location.replace('contact.html')",10000);
}
//------------Whenever preploadeer loads on bodu unload set the variable to true
Ispreloader=true;
</script>

Js javascript code problem

Hi i have a problem with my js code. So, i include in 'head' in my site, script
var Engine;
jQuery
(
function($)
{
Engine =
{
utils :
{
site : function(id)
{
$('#content').html('<strong>Please wait..</strong>').load('engine.php',{'site':id},function()
{
os = {adres:'drugi'};
history.pushState(os,'s',ts);
}
);
},
topnav : function()
{
$('div li').bind('click',function()
{
Engine.utils.site($(this).attr('rel'));
unbind('click',false);
}
);
}
}
};
Engine.utils.topnav();
}
);
Now i want call included script in index.php
<script language="JavaScript" type="text/javascript">
Engine.utils.site(1);
</script>
And here is a problem above code doesn't works.
But if i click on any 'li' element Engine.utils.site work's correctly.
Please help me i try fix it a few days.
Sory for my bad english

Have you tried putting the call in a ready function?
<script language="JavaScript" type="text/javascript">
$(function() {
Engine.utils.site(1);
});
</script>

This happens because of closure. Your object Engine is not visible outside anonymous function

Html div on load event for a dynamically added div element

How i can make some thing like this?
<div id='myDiv' onload='fnName()'></div>
can't use
window.onload = function () {
fnName();
};
or
$(document).ready(function () {fnName();});
the div element is dynamic. The div content is generated by xml xsl.
Any ideas?

You can use DOM Mutation Observers
It will notify you every time the dom changes, e.g. when a new div is inserted into the target div or page.
I'm copy/pasting the exmple code
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
observer.disconnect();

The onload attribute probably wouldn't fire on the <div> if you're injecting it dynamically (as the document is likely already loaded, but maybe it'd still work...?). However you could either poll for the element by simply doing something like this (similar to YUI's onContentAvailable):
// when the document has loaded, start polling
window.onload = function () {
(function () {
var a = document.getElementById('myDiv');
if (a) {
// do something with a, you found the div
}
else {
setTimeout(arguments.callee, 50); // call myself again in 50 msecs
}
}());
};
Or you could change the markup (I know nothing about XSL) to be something like this:
Earlier on in the page:
<script type="text/javascript">
function myDivInserted() {
// you're probably safe to use document.getElementById('myDiv') now
}
</script>
The markup you generate with XSL:
<div id="myDiv"></div>
<script type="text/javascript">
myDivInserted();
</script>
It's a bit hacky but it should work.

If you're not already using jQuery there's no reason to start using it just for this, you can write:
window.onload = function () {
fnName();
};

You could use jQuery. The following code would be place in your <head> tags.
$(document).ready(function() {
// Your fnNamt function here
});
EDIT
Kobi makes a good point
You could also write
$(document).ready(function(){fnNamt();});,
or more simply,
$(document).ready(fnNamt);, or even
$(fnNamt)

Without jQuery with plain JS eg:
<script type="text/javascript">
function bodyOnLoad() {
var div = document.getElementById('myDiv');
// something with myDiv
...
}
</script>
<body onload="bodyOnLoad()">
....
<div id='myDiv'></div>
....
</body>

I had the same Issue, and after searching I found this.
In my case, the javascript appends the head of the index html to load a tab content html file, and onload I want to add that tab to the dom, display it and make other js stuff to change the tabs style.
I added the line with .onload = function(event) {...}
var link = document.createElement('link');
link.rel = 'import';
link.href = 'doc.html'
link.onload = function(event) {...};
link.onerror = function(event) {...};
document.head.appendChild(link);
This worked like a charm, and maybe it helps some other researcher :)
I found it on HTML5 Imports: Embedding an HTML File Inside Another HTML File

How about using jQuery/ready(..) for this?
Like here: http://api.jquery.com/ready#fn
In the context of your question,
$(document).ready(function () {fnNamt();});

I would suggest you to use jQuery.
Steps:
1. Download Jquery library from here http://code.jquery.com/jquery-1.5.min.js .
2. in your HTML, head section create a script tag and use this code below.
$(document).ready(function() {
// write your code here..
});

I'd suggest circle-style func:
SwitchFUnc = false;
function FuncName(div_id) {
var doc = window!=null ? window.document : document;
var DivExists = doc.getElementById(div_id);
if (DivExists) {
//something...
SwitchFunc = true; //stop the circle
}
}
while (SwitchFunc!=true) {
FuncName('DivId');
}