We Keep Coding

How do you know when something is a Javascript function, and when its a jQuery function [duplicate]

Sometimes I make a function and call the function later.
Example:
function example { alert('example'); }
example(); // <-- Then call it later
Somehow, some functions cannot be called. I have to call those functions inside:
$(function() { });
What do $(function() {}); and (function() { }); mean, and what's the difference/purpose of these?

$(function() { ... });
is just jQuery short-hand for
$(document).ready(function() { ... });
What it's designed to do (amongst other things) is ensure that your function is called once all the DOM elements of the page are ready to be used.
However, I don't think that's the problem you're having - can you clarify what you mean by 'Somehow, some functions are cannot be called and I have to call those function inside' ?
Maybe post some code to show what's not working as expected ?
Edit: Re-reading your question, it could be that your function is running before the page has finished loaded, and therefore won't execute properly; putting it in $(function) would indeed fix that!

The following is a jQuery function call:
$(...);
Which is the "jQuery function." $ is a function, and $(...) is you calling that function.
The first parameter you've supplied is the following:
function() {}
The parameter is a function that you specified, and the $ function will call the supplied method when the DOM finishes loading.

It's just shorthand for $(document).ready(), as in:
$(document).ready(function() {
YOUR_CODE_HERE
});
Sometimes you have to use it because your function is running before the DOM finishes loading.
Everything is explained here: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Some Theory
$ is the name of a function like any other name you give to a function. Anyone can create a function in JavaScript and name it $ as shown below:
$ = function() {
alert('I am in the $ function');
}
JQuery is a very famous JavaScript library and they have decided to put their entire framework inside a function named jQuery. To make it easier for people to use the framework and reduce typing the whole word jQuery every single time they want to call the function, they have also created an alias for it. That alias is $. Therefore $ is the name of a function. Within the jQuery source code, you can see this yourself:
window.jQuery = window.$ = jQuery;
Answer To Your Question
So what is $(function() { });?
Now that you know that $ is the name of the function, if you are using the jQuery library, then you are calling the function named $ and passing the argument function() {} into it. The jQuery library will call the function at the appropriate time. When is the appropriate time? According to jQuery documentation, the appropriate time is once all the DOM elements of the page are ready to be used.
The other way to accomplish this is like this:
$(document).ready(function() { });
As you can see this is more verbose so people prefer $(function() { })
So the reason why some functions cannot be called, as you have noticed, is because those functions do not exist yet. In other words the DOM has not loaded yet. But if you put them inside the function you pass to $ as an argument, the DOM is loaded by then. And thus the function has been created and ready to be used.
Another way to interpret $(function() { }) is like this:
Hey $ or jQuery, can you please call this function I am passing as an argument once the DOM has loaded?

I think you may be confusing Javascript with jQuery methods. Vanilla or plain Javascript is something like:
function example() {
}
A function of that nature can be called at any time, anywhere.
jQuery (a library built on Javascript) has built in functions that generally required the DOM to be fully rendered before being called. The syntax for when this is completed is:
$(document).ready(function() {
});
So a jQuery function, which is prefixed with the $ or the word jQuery generally is called from within that method.
$(document).ready(function() {
// Assign all list items on the page to be the color red.
// This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
$('li').css('color', 'red');
});
The pseudo-code for that block is:
When the document object model $(document) is ready .ready(), call the following function function() { }. In that function, check for all <li>'s on the page $('li') and using the jQuery method .CSS() to set the CSS property "color" to the value "red" .css('color', 'red');

This is a shortcut for $(document).ready(), which is executed when the browser has finished loading the page (meaning here, "when the DOM is available"). See http://www.learningjquery.com/2006/09/introducing-document-ready. If you are trying to call example() before the browser has finished loading the page, it may not work.

jQuery.proxy() Function not being called in Chrome

I am facing an issue where a jQuery function is not being called even though the proxy has successfully loaded (from what I can tell). The call we are making works fine on first load, but when we try to load this script in via AJAX it calls the required $.proxy() to the Initialise function, but then doesn't actually call that function.
The dynamic loaded in code is:
<script language="JavaScript"><!--
var ctrl = new VideoControl({"Id":"bc1093c8290a4037846c2052695a7d3a"}, "...");
//-->
</script>
And the javascript to create the object is:
function VideoControl(controlIds, videoMarkUp) {
this.controlIds = controlIds;
this.videoMarkUp = videoMarkUp;
var thisControl = this;
$(function () { $.proxy(thisControl.Initialise(), thisControl); });
}
VideoControl.prototype.Initialise = function () {
// do stuff
}
So the main function is called, but the Initialise() is not called when this is loaded in via AJAX controls in Chrome or IE...this does however work in firefox.
There is a stackoverflow answer which explains why $function is not being called but how do I get it to a point it will call (similar to how firefox deals with it)
Is anyone aware of something that firefox does differently when working with jQuery vs the other browsers?
There are no errors showing on the chrome developer tools, is there anywhere else that could be looked at in order to diagnose this?
Thank you in advance.

So the main function is called, but the Initialise() is not called
when this is loaded in via AJAX
$(function() {}) is alias for .ready() ; handlers for .ready() should be called at most once . AJAX appear to occur after document is loaded ? , where .ready() has previously called , $.isReady set to true preventing handlers within subsequent .ready() or $(function(){}) from being called.
Try removing $(function() {}) wrapper surrounding
function VideoControl(controlIds, videoMarkUp) {
this.controlIds = controlIds;
this.videoMarkUp = videoMarkUp;
var thisControl = this;
$.proxy(thisControl.Initialise, thisControl);
}
use
$(document).ready(VideoControl)
Though , not certain why $.proxy is used here ? , as the context of thisControl.Initialise not appear to be changed to a different context : this ?
Note also that js at Question thisControl.Initialise() called function; where function should be referenced jQuery.proxy( function, context [, additionalArguments ] )

Jquery document ready with function declaration?

I want to know why the below code works differently when according to the documentation it should do the same thing.
http://learn.jquery.com/using-jquery-core/document-ready/
First example:
<script>
$( document ).ready(function() {
document.write("And what?");
});
</script>
It actually overwrites everything on the page and return only "And What?"....
Second example:
<script>
$( document ).ready(test());
function test() {
document.write("And what?");
}
</script>
It actually returns the content of the page with "And what?" at the end of it, so it does append the text but why?!
What are the difference between those two functions and how to get the same example with Yahoo YUI?

document ready and document write are not the same thing:
document.ready is a jQuery event that will be triggered after your DOM finish to load.
document.write is a native function of JavaScript that will override all the content of your page by the value you send as argument.
The difference between the 2 codes you show is that in the first one you are sending a function as param and in the second one you are sending the result of function as param because you are calling test when you include the braces.
So with your codes the problem is that in 1 you call the function after DOM is ready and in 2 you exec the function at the time you call it.
To have same result in both code you should to remove braces when you send test function as param in the second example:
<script>
$( document ).ready(test);
function test() {
document.write("And what?");
}
</script>
Besides this little different the 2 results that you are getting are because is the "strange" way that document.write works. Check out the documentation which explains why this happens.

If you call document.write() after the document has finished loading, then the browser will clear your current page and start a new blank page. That is how it is written to work. So this:
<script>
$( document ).ready(function() {
document.write("And what?");
});
</script>
will always clear the page and start a new one with only "And What?" in it.
Your second code example would generate the same result if you didn't mistakenly call the test function before $(document).ready() fires. If you did this:
<script>
$( document ).ready(test);
function test() {
document.write("And what?");
}
</script>
You would get the same result as above.
Instead, when you do this:
<script>
$( document ).ready(test());
function test() {
document.write("And what?");
}
</script>
You're calling test() immediately (it is not waiting for the doc to be ready) and then passing it's return value (which is undefined) to $(document).ready().
To pass a function reference so it can be called LATER, you pass only the function's name without parens after it. If you put parens after the name, you are instructing the JS interpret to execute the function right now and pass the return result instead. If you pass only the function's name, you are passing a function reference that the function can then call later.

jQuery .ready() bug?

I'm developing a JS functions to handle it in $(document).ready(...).
These functions are in file "a.js".
In function "example(TAG_ID)" I call:
console.log( $('#anything').children().length )
OK. When I include in Application Main Javascrip file: $(document).ready(example(TAG_ID)), is returned: 0
But. When I include <script>$(document).ready(example(TAG_ID))</script> after the element whose id is TAG_ID, is returned: 7 (as it should be)
Description of jQuery.ready() function is: "Specify a function to execute when the DOM is fully loaded."
I think it is not running after the elements are fully loaded... Why?

$(document).ready(example(TAG_ID))
evaluates example(TAG_ID) immediately. As the docs you quoted say, what you want to do is pass a function to ready() for it to run when the DOM is ready, which will defer the evaluation:
$(document).ready(function() { example(TAG_ID) })

function in $(document).ready() not finding body element of DOM

I am writing an AngularJS web app and have a function outside of any scope that needs to call a function inside of a scope. I call the function and follow the instructions given in this answer.
function returnDest(callback) {
$(document).ready(angular.element(document.getElementById('body')).scope().getTask(function() {
if(callback) {
callback(locationInfo);
}
}));
}
It works often, but sometimes the function does not successfully run. A debugger gives me:
Uncaught TypeError: Cannot read property 'getTask' of undefined
I do not know why the function is being called on undefined when $(document).ready should have the function fire only after the DOM has been loaded. The same error pops up if I use $(window).load(). What can I do to ensure this function runs successfully?
For reference, here is the line in the HTML file where the 'body' element is defined
<body style="background-color:#e6e8f3" ng-app="app" ng-controller="controller" id="body">

$(document).ready should be outside of your function:
$(document).ready(function returnDest(callback) {
angular.element(document.getElementById('body')).scope().getTask(function() {
if(callback) {
callback(locationInfo);
}
})});

You're using .ready incorrectly. The moment you call returnDest, which is happening before the DOM is ready, it tries to get an element with the ID of body. Since it's not loaded, body can't be accessed. Instead, omit the body ID and use it like this:
function returnDest(callback) {
$(document).ready(function() {
angular.element(document.body).scope().getTask(function() {
if (callback) {
callback(locationInfo); // Not sure where locationInfo is coming from
}
});
});
}

angular.element returns a jQuery object.
ready() expects the argument you pass it to be a function that it will call when the document is ready.
It sounds like you need to wrap everything you are trying to pass to ready in function () { ... }.