Develop Reference

How to bind event Jquery to page?

I have Jquery function that executes AJAX query to server.
How can I call this after load page in the specified url page? May I bind this to element HTML, I mean:
<div id="graph" onload="function()"></div>

jQuery handles the HTML file with a variable called document.
Document has two popular event states
load when the page has been loaded
ready when the page has been loaded and all other decorations to the HTML have been applied.
jQuery provides hooks for these states.
To run javascript code after each of the events listed above, you have to put the function within the appropriate event scope.
For loading, this would be…
$(document).load(function() {
// javascript code you want to execute
})
After the page has been ready, but not yet rendered, you can apply some other javascript code using
$(document).ready(function() {
// javascript code you want to execute
})

One way using jQuery:
$(document).ready( function() {
//do whatever you need, you can check if some element exists and then, call your function
if($("#graph").length > 0)
callfunction();
});
No jQuery, only vanilla js:
window.onload = function() {
if(document.getElementById("graph"))
callfunction();
}

Initialize script

I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.

You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call

Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.

I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});

simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});

What is the proper way to initiate a JavaScript function on load in a CMS?

I need to call a function on page load. Typically this would be handled with a body onload call, however I'm in a CMS that reuses the body tag on multiple pages. I only need the script to run on a single page. Is there a next-best-location to initiate an onload function?

Use the window.onload event:
window.onload = function() {
// do stuff
};
If you have access to jQuery, you can use one of the .ready() syntaxes:
$(document).ready(function() {
// do stuff
});
OR:
$(function() {
// do stuff
});

You can instantiate it in a separate js file, so it will only be called when that file is loaded, not the CMS template. i.e.
window.onload = function(){
// Do stuff
};

If you are using jQuery, you can add a load event on window:
$(window).on('load', function(){
// do stuff here
})
You also have DOM ready with jQuery:
$(function(){
//stuff here
});

Jquery manage local script with full ajax site

Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks

I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>

Sometimes loading JavaScript

I'd like to conditionally load a set of javascript functions (which involve jQuery) on a given page.
The situation is that our site has a bunch of stuff that happens on $(document).ready (mostly fancy menu setup and a couple of CSS class manipulations), but one or two pages need more setup. It's enough code (and specific enough) that I don't want to just toss it into the main file, but rather just load it on those specific pages.
It seems that I can't do this by just loading a new file specific.js into those pages that contains
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} ());
In the above example, something(Else); works fine, but .click and .bind don't seem to do anything. What I ended up doing is
function specificStuff () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
};
and adding if(specificStuff) specificStuff(); to the main js file. It works, but it seems like there should be a better way of accomplishing this (ideally one that would keep all the changes in specific.js and not touch the general settings).
Is there a canonical way of conditionally loading js code to run in document.ready?

You can call $(document).ready(); multiple times in a web page/script file. Just wrap your jquery bindings as such in your specific.js file:
$(document).ready(function(){
$(something).click(function () { Stuff(happens); });
something(Else);});

You can load the page specific Javascript in the html of those pages, each script with its own document.ready function.

try removing the () when passing a function to document.ready:
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} **()**);
with the (), it will execute right away and not wait for the document to be ready.

You can call the jquery document ready function as many times as you need. I think your issue is with how you've set up your function. If you're trying to call the ready function, it should be like this:
$(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
});
Also, if the something elements are created by your main.js file, you should include it before your specific.js file.