use 2 jquery functions

Question

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();

});

It's not the shortest way to write it, but your two separate pieces of code would work if you put them both in the page. — Anthony Grist, Apr 03 '13 at 12:03

score 7 · Accepted Answer · answered Apr 03 '13 at 12:02

7

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

answered Apr 03 '13 at 12:02

Flo Edelmann

2,573
1
20
33

Much better than my answer :) – Mark Withers Apr 03 '13 at 12:02

score 3 · Answer 2 · answered Apr 03 '13 at 12:02

3

jQuery supports method chaining.

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

answered Apr 03 '13 at 12:02

Daniel Imms

47,944
19
150
166

You're right.. this is true only if the plugins you are using supports chainability – Mihai Matei Apr 03 '13 at 12:04

score 1 · Answer 3 · answered Apr 03 '13 at 12:02

1

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

answered Apr 03 '13 at 12:02

Mark Withers

1,462
5
16
34

score 1 · Answer 4 · answered Apr 03 '13 at 12:02

1

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

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

answered Apr 03 '13 at 12:02

VisioN

143,310
32
282
281

score 0 · Answer 5 · answered Apr 03 '13 at 12:03

0

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

answered Apr 03 '13 at 12:03

sasi

4,192
4
28
47

score 0 · Answer 6 · edited Apr 03 '13 at 12:06

0

Simple, use

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

edited Apr 03 '13 at 12:06

Jeff Shaver

3,315
18
19

answered Apr 03 '13 at 12:04

IndoKnight

1,846
1
21
29

score 0 · Answer 7 · answered Apr 03 '13 at 12:05

0

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.

answered Apr 03 '13 at 12:05

dreamweiver

6,002
2
24
39

score 0 · Answer 8 · edited May 23 '17 at 10:25

0

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.

edited May 23 '17 at 10:25

Community

1
1

answered Apr 03 '13 at 12:07

DOK

32,337
7
60
92

but maybe toink uses other libraries so that `$` has to be escaped? – Flo Edelmann Apr 03 '13 at 12:08
Well, @elektronikLexikon, there is always the possibility of collisions when multiple libraries are used, but that is not the question here. – DOK Apr 03 '13 at 12:16
it could be the reason why he used `jQuery(document).ready(function($)` in his question, though. – Flo Edelmann Apr 03 '13 at 12:33

Jezen Thomas · Answer 9 · 2013-04-03T12:25:39.207

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.

use 2 jquery functions

9 Answers9