tags:

views:

163

answers:

7
+3  Q: 

when this javascript function is called?

Hello everyone,

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function.

<!doctype html>
<html lang="en">
<head>
    <title>Test</title>
    <link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>

<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab1 info</p>
    </div>
    <div id="tabs-2">
        <p>tab2 info</p>
    </div>
</div>

</div>

</body>
</html>

thanks in advance, George

+6  A: 

It will be called when the document is ready. It is equivalent to:

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

Document.ready indicates that the page is fully loaded on the client. WebParts are serverside controls and will be processed first in order to produce the html document sent to the client. Thus webparts will be processed before the document.ready client-side event fires.

From the Gecko docs:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Peter Lillevold  2010-01-17 13:03:08
What exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)?
George2  2010-01-17 13:07:08
Don't know what 'web parts' is, but `$(document).ready()` basically means the DOM (the access to HTML elements via JavaScript) is ready, but not all images and other external resources are loaded.
Douwe Maan  2010-01-17 13:12:07
WebPart I mean ASP.Net webpart.
George2  2010-01-17 13:16:27
Ah, I don't have experience with ASP.net whatsoever, so I can't help you with that.
Douwe Maan  2010-01-17 13:17:49
As @DouweM says, document.ready indicates that the DOM is ready, that is the page is fully loaded on the client. WebParts are a serverside control (apart for some client-side functionality using javascript) and will thus process before the document.ready client-side event fires.
Peter Lillevold  2010-01-17 13:30:53
seriously, what is it with ASP.Net making up ludicrous names for basic HTML... *the output is just HTML!*
nickf  2010-01-20 03:18:27
@nickf - to what names are you referring to?
Peter Lillevold  2010-01-20 07:43:42
@Peter "web parts" for starters.
nickf  2010-01-20 09:36:41
@nickf - a webpart is not a name for basic HTML, it is specific to a type of server-side control in ASP.Net, basically encapsulating some functionality that can easily be dropped onto a ASP.Net page. The ASP.Net runtime will eventually generate HTML based on the page, but those two things are NOT the same.
Peter Lillevold  2010-01-20 13:13:08
+8  A: 

It comes from the jQuery library you're including:

<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>

$ is an alias for the jQuery function.

See jQuery(callback) reference documentation:

A shorthand for $(document).ready().

Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.

For more information, have a look at Tutorials:Introducing $(document).ready()

Gregory Pakosz  2010-01-17 13:03:32
I am wondering what exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)? So, if a webpart in a page needs this javascript function, then I could add this function to head of the page?
George2  2010-01-17 13:25:47
1. Document ready will happen before webpart loaded or not? 2. Currently all code I showed in my question are in a single aspx page. Now I want to move all remaining html code into a webpart and want to keep the head section the same for the aspx page, not sure whether it works?
George2  2010-01-17 13:35:31
see http://docs.jquery.com/Tutorials:Introducing_$(document).ready() for more info
Gregory Pakosz  2010-01-17 14:11:35
Any comments or ideas to my question 1 and 2 just above?
George2  2010-01-17 16:07:30
@George2: You should either: Edit your question to include points 1 and 2 in there, or (possibly better as they are different questions) post them as new questions, using the tags [jquery] and [sharepoint]
Zhaph - Ben Duguid  2010-01-19 11:16:06
+1  A: 

This is a jQuery call and it gets called when a document gets loaded.

more info at http://docs.jquery.com/Core/jQuery#callback

dmonlord  2010-01-17 13:04:40
I am wondering what exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)?
George2  2010-01-17 13:15:48
You can have multiple $(function(){}) statements. You can even add it to a web part. Browser will trigger all the statements when the browser loads the page. Browser has no idea of a web part. A page is a page for him and the jQuery document ready function is a client side function, therefore it doesn't matter if you have web parts or not. A page is a page for a browser.
dmonlord  2010-01-17 13:20:06
So, if a webpart in a page needs this javascript function, then I could add this function to head of the page?
George2  2010-01-17 13:24:55
1. Document ready will happen before webpart loaded or not? 2. Currently all code I showed in my question are in a single aspx page. Now I want to move all remaining html code into a webpart and want to keep the head section the same for the aspx page, not sure whether it works?
George2  2010-01-17 13:34:45
+2  A:  
$(function(){

});

is jQuery (a Javascript library) shorthand for:

$(document).ready(function(){

});

It is what you use to do with <body onload="xxx"> but more sophisticated. You can get a fuller explanation here.

Chris S  2010-01-17 13:05:01
I am wondering what exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)?
George2  2010-01-17 13:14:45
1. Document ready will happen before webpart loaded or not? 2. Currently all code I showed in my question are in a single aspx page. Now I want to move all remaining html code into a webpart and want to keep the head section the same for the aspx page, not sure whether it works?
George2  2010-01-17 13:30:08
Bad jquery, their URL isn't encoded `http://docs.jquery.com/Tutorials:Introducing_$(document).ready()`
Chris S  2010-01-17 14:45:00
Any comments or ideas to my question 1 and 2 just above?
George2  2010-01-17 16:06:40
+1  A: 

That syntax is an alias for

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

This event is used in jQuery to invoke a script as soon as the DOM is ready. It's like window.onload, but doesn't wait for all the images to fully load before firing.

Alex JL  2010-01-17 13:05:14
I am wondering what exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)?
George2  2010-01-17 13:15:15
1. Document ready will happen before webpart loaded or not? 2. Currently all code I showed in my question are in a single aspx page. Now I want to move all remaining html code into a webpart and want to keep the head section the same for the aspx page, not sure whether it works?
George2  2010-01-17 13:42:29
It is separate from ASP, so it doesn't matter how the page is put together server side. Your server outputs all of the HTML at once, correct? As soon as the browser has finished parsing it into a DOM tree, jQuery detects that the code on the 'ready' section can be executed.
Alex JL  2010-01-17 13:53:43
"It is separate from ASP" -- what does "it" mean?
George2  2010-01-17 16:06:05
I mean that your client side code (javascript/jquery) is unconnected to your server side code. Once ASP/.NET/whatever has output the page HTML the browser and javascript take over, and it doesn't matter if you used webparts, etc. to put the page together on the server or not.
Alex JL  2010-01-17 17:39:29
+2  A: 

That's a shorthand used in jQuery and one that is absolutely unclear and unnecessary in my opinion. Not too long ago, we used to write:

$(document).ready(function() {
    $("#tabs").tabs();
});

Now we can also write this to do the above:

$(function() {
    $("#tabs").tabs();
});

The function that is passed to $(document).ready is executed when the page is loaded and the DOM is ready, in other words the document has been loaded in memory. This code is written in jQuery, a Javascript library that makes DOM operations easier.

This is how the above code translates to plain Javascript:

window.onload = function() {
    $("#tabs").tabs();
};

where window is a global object that represents the page window, of course.

Anurag  2010-01-17 13:07:51
I am wondering what exactly mean document is ready? I am designing page with web parts, and I am not sure what document ready means for web part (e.g. document is loaded before all web parts are loaded)?
George2  2010-01-17 13:23:52
1. Document ready will happen before webpart loaded or not? 2. Currently all code I showed in my question are in a single aspx page. Now I want to move all remaining html code into a webpart and want to keep the head section the same for the aspx page, not sure whether it works?
George2  2010-01-17 13:36:13
The above code doesn't translate to the plain JS you posted. It adds your function to a queue and calls each sequentially. If it did what you suggest, then subsequent `document.ready` calls would override previous ones.
nickf  2010-01-20 03:20:56
Thanks for that update Nick, I didn't know that. Just checked out the jquery docs - "You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added."
Anurag  2010-01-20 04:07:00
+1  A: 

I'm not sure why you tagged your post "SharePoint" but note that this is not suported on SharePoint pages. You need to push scripts that run on page load on a stack and SharePoint will execute them. The syntax is:

_spBodyOnLoadFunctionNames.push("myOnloadFunction");

This will require the javascript fu:

function myOnloadFunction()
{
    $("#tabs").tabs();
}

to be available, which can execute your onload code.

ArjanP  2010-01-20 03:02:06

related questions

Displaying Flash content in a C# WinForms application
How to get the value of built, encoded ViewState?
Unhandled Exception Handler in .NET 1.1
How do I connect to a database and loop over a recordset in C#?
How do I most elegantly express left join with aggregate SQL as LINQ query
Get a new object instance from a Type in C#
.NET Testing Framework Advice
Automatically update version number
What is the difference between an int and an Integer in Java/C#?
How to write to Web.Config in Medium Trust ?
WinForms ComboBox data binding gotcha
How do you sort a C# dictionary by value?
Adding Scripting functionality to .NET applications
Floating Point Number parsing: Is there a Catch All algorithm?
How do I print an HTML document from a web service?
Decoding T-SQL CAST in C#/VB.net
Anatomy of a "Memory Leak"
How do I get a distinct, ordered list of names from a DataTable using Linq
Reliable Timer in a Console Application
How do I fill a DataSet or a DataTable from a LINQ query resultset ?
What's the difference between Math.Floor() and Math.Truncate() in .NET?
How do I calculate relative time?
How do I calculate someone's age in C#?
Are there any conversion tools for porting Visual J# code to C#?
When setting a form's opacity should I use a decimal or double?