CODEWITHSUNDEEP
javascriptjquery
toink
toink

Reputation: 255

use 2 jquery functions

I would like to ask on how I can use both functions once the page loads

jQuery(document).ready(function($)
{
    $('#list').tableScroll({height:500});

});

and

jQuery(document).ready(function($)
{
    $('#list').tableSorter();

});

Upvotes: 0

Views: 176

Answers (9)

Jezen Thomas
Jezen Thomas

Reputation: 13800

Here's how I would do it:

// Create an immediately-invoked function expression
(function ($) {

    // Enable strict mode
    "use strict";

    // Cache the selector so the script
    // only searches the DOM once
    var myList = $('#list'); 

    // Chain the methods together
    myList.tableScroll({height:500}).tableSorter();

}(jQuery));

Writing your jQuery in an IIFE like this means you can run the code alongside other libraries that also use $, and you won’t get conflicts.

Be sure to include this JavaScript at the end of your document, just before the closing </body> tag.

Upvotes: 0

DOK
DOK

Reputation: 32841

There is a shorter version of jQuery(document).ready(function()) that you could use that would have the same result:

 $(function() {
   // code to execute when the DOM is ready
 });

For this situation, using the elegant chaining:

$(function() {
    $('#list').tableSorter().tableScroll({height:500});
 });

For a discussion of the difference between these two approaches, see this very helpful question.

Upvotes: 0

IndoKnight
IndoKnight

Reputation: 1864

Simple, use

jQuery(document).ready(function() {
    $('#list').tableScroll({height:500}).tableSorter();
});

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

I guess its fine to have more than one

jQuery(document).ready(function($) { .... }

both will be called on page on load body :). irrespective of no of call`s made, all will be called on page load only.

Upvotes: 0

sasi
sasi

Reputation: 4318

$(document).ready(function() {
    $("#list").tableScroll({ height: 500 }).tableSorter();
});

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50189

jQuery supports method chaining.

jQuery(document).ready(function($) {
    $('#list')
        .tableScroll({height:500})
        .tableSorter();    
});

Upvotes: 3

Flo Edelmann
Flo Edelmann

Reputation: 2613

jQuery(document).ready(function($) {
    $('#list').tableSorter().tableScroll({height:500});
});

Upvotes: 7

VisioN
VisioN

Reputation: 145398

Just put both under one DOM ready handler and use chaining:

$(document).ready(function() {
    $("#list").tableScroll({ height: 500 }).tableSorter();
});

Upvotes: 1

Mark Withers
Mark Withers

Reputation: 1482

jQuery(document).ready(function($)
{
    $('#list').tableScroll({height:500});
    $('#list').tableSorter();
});

Upvotes: 1

Related Questions