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>
 

$(document).ready does not work in Rails

I'm using a *.js.erb in my Rails-App, which reacts to a clicked Link.
But when I render my page, by getting there via a link_to, I have to refresh the Page, to make it work. Is there any Trick, how I can make this work?
Here is a very simplified version of my code:
$(document).ready(function(){
$('#toright').click(alert(">> was clicked"));
});
$(document).ready(function(){
$('#toleft').click(alert("<< was clicked"));
});
$(document).ready(function(){
$('#save').click(alert("save was clicked"));
});
$(document).ready(function() {
alert("The document is ready!");
});
After the site is rendered, it does not show my function, but when I type the URL into my address-bar, it works.
Some EDITS:
I'm using Rails 4.0.1
I have the js.erb in my assets folder
Ok. I've put them all in one $(document).ready, but I still have to reload my file for making my JS work.
UPDATE:
So I have edited my application.js to contain
$(document).ready(function(){
alert("The document is ready!");
$('#toright').click(alert(">> was clicked"));
$('#toleft').click(alert("<< was clicked"));
$('#save').click(alert("save was clicked"));
});
and put my js.erb to be only .js in my assets/javascripts folder.
But anyway, it just won't work until I have refreshed the page.

ready is a jQuery function, thus ensure you to use and include properly the jQuery library in your Javascript.
Furthermore, if you don't need to exchange data between your controller and your Javascript, I advice you to put your Javascript in your asset folder, for instance: /app/assets/application.js.
This is possible only for the Rails applications 3.x and 4.x.
Best regards.

Since the introduction of turbolinks in rails 4 you can use:
$(document).on('turbolinks:load', function() {
// Events
}
Instead of:
$(document).ready(function(){
// Events
}

My Javascript isn't working in Joomla 3, is something conflicting?

I have very siple javascript working in jsFiddle but for some reason when I add to Joomla 3 CMS it doesn't work. The content stays static and does not move. I am putting the html and js in a HTML Module with no WYSIWYG editor and even tried putting the js in external file and no dice. Any thoughts?
function ticker() {
$('#jsTicker li:first').slideUp(function() {
$(this).appendTo($('#jsTicker')).slideDown(1500);
});
}
setInterval(ticker, 6000);
fiddle: http://jsfiddle.net/KevinOrin/Zh3wU/
site: http://bit.ly/13GerYd

You wrote <script type="javascript"> instead of <script type="application/javascript">
EDIT
You've also forgot an extra }); in the end.

you can use jQuery no conflict as :
var jat = $.noConflict();
now replace $ in your code with jat

Running the provided code in a console on the example page shows it working, so I think you have a document ready issue.
You should run the function in a jQuery document ready statement. http://learn.jquery.com/using-jquery-core/document-ready/
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});

Jquery Initializing

I am trying to load a Jplayer on my website. The instructions say to use this code to initialise the plugin:
$('body').ttwVideoPlayer(myPlaylist, {options});
Where do I place this code?
The player loads correctly and the script works, but won't play the files in the playlist function.

I would usually put all initialization code in a $(document).ready handler.
$(document).ready(function() {
$('body').ttwVideoPlayer(myPlaylist, {options});
});

The code you have posted should be wrapped in an appropriate handler you're using like
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('body').ttwVideoPlayer(myPlaylist, {options});
});
</script>
Don't forget to add an appropriate jQuery library for it to work.

How to solve jQuery and mootoools conflict?

I use
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
to load jquery and then load an external script that contains these :
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
and also use a mootools plugin of course.
MY QUESTION IS THAT how should I use var $j = jQuery.noConflict(); in the above script to prevent conflicting

Wrap all the JavaScript that relies on jQuery in a closure to prevent namespace conflicts, like so:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
It looks weird, but the syntax is right (yes, the first line starts with a semicolon). This automatically substitutes jQuery for the $ object, which both jQuery and mootools make use of. Since you're using both, you should wrap all of your jQuery code in a closure like this (one for each .js file or script tag).

If the problem is just, you load MooTools, and then you load jQuery, and then MooTools doesn't work because jQuery has taken over the dollar function, then you probably just need code like this:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
That should get jQuery to relinquish $(). The code you have in your question already does the other handy thing, which is use the parameter to the ready event handler as a way to locally use a shorter name for the jQuery object.
I'd strongly recommend reading the jQuery page on working with other libraries and maybe the documentation for the noConflict() function.