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>
 

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

Changing the value of embed src using jquery

I have the following scenario..
When the user visit my website I show the user some audio files from the server. When the user clicks on one link, then the jquery function is eventually executed and change the source of the embedded object to selected file.
The codes are given in this link.
I got some answers for this question but the problem isn't solved.
What happening for me is, When I click on the link. The song plays in new page. I need to play the song with embedded object inside the div.

Try this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(document).on('click', "#song", function(e){
e.preventDefault(); //<----------stops to navigate to link
var musicSrc = $(this).attr('href');
$('#music').find('embed').attr('src', musicSrc);
});
});
</script>
note:
make sure to load the jQuery library first:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Well of course it's not working. The event should be added after the page loads. Using jquery, it would look like this :
<script type="text/javascript">
$(function () {
$(".song").click(function(e) {
$('#mplayer').attr('src', $(this).attr('href'));
e.preventDefault();
});
});
</script>

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?

You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/

As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo

It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

Javascript syntax for jQuery .load() function

I've just attempted to make a simple script to use ajax to load a new part of a page. The class remove/add to change the relevant text colour works fine. However, the new html does not seem to appear. I have a feeling this is to do with my general js syntax but I can't work it out.
Javascript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page_menu a").click(function() {
$("#page_menu p").removeClass("current");
$(this).children().addClass("current");
var project = $(this).attr("name");
var loadUrl = project + ".html";
$("#project_image").load(loadUrl);
return false;
});
});
</script>
An example of an anchor tag in the html would be:
<a name=example href="#">Example</a>
The html file I'm looking to load would be called "example.html" and the code in it:
<h1>Hello</h1>
I'm sure it's pretty straight-forward but I'm just not seeing it!
Cheers,
Rich

I would use the href of the anchor directly:
Example
<div id="project_image"></div>
And then AJAXify it:
$(function() {
$('#page_menu a').click(function() {
$('#page_menu p').removeClass('current');
$(this).children().addClass('current');
$('#project_image').load(this.href);
return false;
});
});

Anchor's most certainly do have a name attribute, so that part would be okay.. but to make things cleaner, change your anchor to:
Example
For length sake you can use shorthand syntax for $(document).ready, and also do the class changes in one chain. Then just load the page specified in the href and to see if the request actually worked, add a callback, like so:
$(function() {
$("#page_menu a").click(function(e) {
$("#page_menu p").removeClass("current").filter(this).addClass("current");
$("#project_image").load(this.href, function(res) {
// This will allow you to see the response from the server without having to dig through requests
// If you don't have a console for some reason, just change this to alert()
console.log(res);
});
e.preventDefault();
});
});