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: fire call on fadeIn function

I'm currently using the ImageZoom plugin (view here), the plugin is great and works a charm. But for a site I'm working on the images (that you need to zoom into) are being appended to their container via $("CONTAINER_CLASS_HERE").html('...etc, thus aren't present on load (this function needs to stay too), this means though that the ImageZoom() function isn't working, even when calling it inside the fadeIn function.
jSFiddle demo here: http://jsfiddle.net/y2tdaak2/
jQuery:
$(document).ready(function () {
$('.single-letting-lightbox-image').ImageZoom();
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
});
});
Any suggestions on how to get this to work would be greatly appreciated, can't figure it out!

Here you are a working solution :) http://jsfiddle.net/y2tdaak2/1/
$(document).ready(function () {
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$('.single-letting-lightbox-image').ImageZoom();
});
});
});
});
You need to call ImageZoom after the image is loaded :)

have you tried to callback the function?
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
// callback the function to make it work again since the way you do this is not yet loaded
$('.single-letting-lightbox-image').ImageZoom();
});

How to highlight first row of table JQuery on page load ?

My following code works fine if any row is clicked:
$(document).ready(function() {
$('#currentloc_table tr').click(function(event) {
$("#"+$(this).attr('id')+" input:checkbox")[0].checked = ! ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
});
Here is the CSS:
.selected td {
background: yellow;
}
What I need that on page load, first row of this table should get highlighted. How can i do that?

Try this
$(document).ready(function () {
$('#currentloc_table tr').click(function (event) {
$("#" + $(this).attr('id') + " input:checkbox")[0].checked = !($("#" + $(this).attr('id') + " input:checkbox")[0].checked);
if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
// Add these lines
var firstTr = $('#currentloc_table tr:first');
firstTr.addClass('selected');
firstTr.find("input:checkbox")[0].checked = true;
});
working demo

You can try this use .first() or :first() to select the target:
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected');
....
or:
$(document).ready(function() {
$('#currentloc_table tr:first').addClass('selected');
....
You can though take a look at these:
.eq() and :eq()
nth-child()
:first-child
read documentation

Trigger the function after load
$('#currentloc_table tr:first-child').trigger('click');
For this to work you should add this after binding click event with:
#currentloc_table tr

Seems like your code could be improved sligtly:
$('#currentloc_table tr').click(function (event) {
var check = $("input:checkbox", this)[0];
check.checked = !check.checked;
$(this)[check.checked ? 'addClass' : 'removeClass']('selected');
});
To select the first row:
$('#currentloc_table tr:first').click();

$(document).ready(function () { $('#currentloc_table').find('tr:first').addClass('selected');});

Try this ,
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected_f');
// rest of your stuff ....
And css
.selected_f {
background: yellow;
}
Your CSS class taking as default for selected class, so its not adding that class , and not able to see the effect

Try with this
$(document).ready(function(){
$("#currentloc_table tr:first"):css('background','yellow');
})
or else try with
$("#currentloc_table tr").eq(0):css('background','yellow');

jquery .bind for image onclick not working in Firefox?

I wonder why the below code works fine in IE but not Firefox (3.6.15)?
HTML:
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
JavaScript:
EnableBuyButton(btbuy1);
function EnableBuyButton(ABtnId)
{
var btElement = document.getElementById(ABtnId);
btElement.setAttribute("disabled", "");
$('#' + ABtnId).bind('click', function ()
{
alert('User clicked buy btn');
});
}

Have a look, I've also done a little tidying up http://jsfiddle.net/bkKNU/
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
EnableBuyButton("btbuy1");
function EnableBuyButton(ABtnId)
{
$('#' + ABtnId).attr("disabled","").bind('click', function ()
{
alert('User clicked buy btn');
});
}

You want to use an id but you are actually using the Html element that is identified by the id,
try
EnableBuyButton('btbuy1');
in stead of
EnableBuyButton(btbuy1);
You can also call the Jquery selector with the element itself
$(btElement)

Try this:
$(function() {
var EnableBuyButton = function(ABtnId)
{
var btElement = $('#' + ABtnId);
btElement.attr("disabled", "");
btElement.bind('click', function ()
{
alert('User clicked buy btn');
});
}
EnableBuyButton('btbuy1');
});
Hope it helps
jsfiddle: http://jsfiddle.net/aPvgm/1/

function EnableButton(id)
{
$('#' + id)
.removeAttr("disabled")
.click(function ()
{
alert('User clicked buy btn');
});
}