Develop Reference

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?

Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")

You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});

You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/

you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>

Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});

concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>

If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

Can you use .load() to load html into div's with dynamic id's?

I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>

Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});

Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>

Jquery selected tab

I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>

this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/

<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..

Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});

<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});

JQuery .click function not working for contained <a> tags

I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.
<script type="text/javascript">
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
</script>
The pagination looks like this:
<div class="pagination">
<ul>
<li>1</li>
<li>2</li>
...etc
</ul>
</div>
For some reason, the function is never firing. I even put in a very obvious alert to confirm that it's hearing the click, but I'm not even seeing this.
So what is it that I'm doing wrong Everything seems correct to me...

Try to wrap it inside $(document).ready(function () { ... }); Something like below,
$(document).ready(function () {
$("div.pagination li").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).
$(document).ready(function () {
$(document).on('click', 'div.pagination li', function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.

Put it in a document.ready
$(function(){
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});

Try:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("div.pagination li a").click(function(event) {
event.preventDefault();
alert("Click");
var url = $(this).attr("href");
$("input[name='order']").val(order);
// Where is order coming from?
$("#form_session").attr('action', url).submit();
});
});
</script>
You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?

How to convert this jquery code into noconflict

will we have to replace every $ with jquery?
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}

As long as you are sure the snippet contains just jQuery usage of $ then you can wrap it in a closure
(function($){
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
})(jQuery);

use
$.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
Resolve the conflict issues
More detail : http://api.jquery.com/jQuery.noConflict/

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.tabs a').click(function(){
switch_tabs($j(this));
});
switch_tabs($j('.defaulttab'));
});
function switch_tabs(obj)
{
$j('.tab-content').hide();
$j('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$j('#'+id).show();
obj.addClass("selected");
}