Develop Reference

How to make Javascript load on pageload

I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work

Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.

here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});​
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;

Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
 

Run/load function when there is a form on the page

The following script link, is linking to a JavaScript file that handle form validation
<script type="text/javascript" src="assets/js/form-validation.js"></script>
And it is included to all the pages using PHP include, the question is; how do I only make it run or even load when there is a form on the page?
I tried this: $('form').load('form-validation.js', function(){ /* callback */ });
But did not work, I also searched and did not find a real answer...

You should use jQuery.getScript(), it load a JavaScript file from the server using a GET HTTP request, then execute it.
You can use .length property to check form exists or not.
if ($('form').length) {
$.getScript('form-validation.js', function () {
/* callback */
});
}
EDIT
There is no option to add it to the JS file it self, and make it work
//Place this code at the top of your form-validation.js file
$(document).ready(function () {
if ($('form').length > 0) {
//Do validation
}
});

use jquery to do it :
<script type="text/javascript">
$(document).ready(function(){
if ($('form').length>0) {
$.getScript('form-validation.js', function () {
});
}});
</script>

Append script in head by jquery

I want append script in head if there is tag <script> in the body, i try as following but it don't work, How can done it?
DEMO: http://jsfiddle.net/rYXJx/
JS:
var TAREA = $('body').find('textarea').length;
if(TAREA > 0){
$('head').append('<script type="text/javascript" src="files/js/nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>');
};

You can use jquery getScript function:
http://api.jquery.com/jQuery.getScript/
so the correct code looks like the below:
$.getScript('files/js/niceEdit.js');

One of the problems in your script is that the </script> inside the string literal actually breaks the outer <script> tag. You might notice these characters in your page which seem to come out of nowhere:
');};
Secondly, while it is still possible to inject a <script> tag in the head, there is no direct/easy/cross-browsr way of knowing when the script has finished loading. And you cannot use a script before it is loaded completely.
Best solution is to use jQuery.getScript() which provides a callback. Use the callback to call nicEditors.allTextAreas() function:
$(document).ready(function () {
if ($("textarea").length > 0) {
$.getScript("files/js/nicEdit.js", function () {
// no need for onDomLoaded -- DOM is loaded at this point!
nicEditors.allTextAreas();
});
}
});

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");
});
});

Loading an external script after page load with jQuery

I'm a little confused how to do this, basically I have a page that has a Facebook Share button inserted via JavaScript:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
The problem is that it's blocking the page load at that part, how can I insert this tag after page load and still have the script execute? I'll like to do it in an unobtrusive way, ideas?

Use the jQuery getScript command inside $(document).ready. This will download the script after the page has loaded. Example:
$(document).ready(function() {
$.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share", function() {
alert("Script loaded and executed.");
});
});

You could use the jquery.getScripts to load it asynchronously.

Try something like this:
$(document).ready(function() {
var script = document.createElement( 'script' );
script.src = "http://static.ak.fbcdn.net/connect.php/js/FB.Share";
script.onload=optionallyDoSomethingWithTheScriptYouJustLoaded();//not needed
var headID = document.getElementsByTagName("head")[0];
headID.appendChild(script);
});

Inject the script tag into the dom as a callback of the document ready event.

you could do something like:
$(function() {
$.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share', function() {
//do nothing here
});
});