HTML5 drag event using a $(function() { ... } library

Question

I have been playing around with HTML5 and Javascript for the first time and I am stuck. My question in short is how do I call a method (in html) inside a JS file which starts with

$(function() { ... }

Basically I used azure which gives you a code project to start but when it gave me the files there was a page.js which started with:

$(function() {
var client = new WindowsAzure.MobileServiceClient('[...]', '[...]'),
    todoItemTable = client.getTable('todoitem');
...

The azure service has a very simple database which I need to use to create a Kanban boardesc webpage.

I made my task element draggable and added events to handle it but I am unable to create the event method in this JS file and if I have it in my HTML I am unable to call any of the methods in the .js

I have asked around work and no one seems to have seen the $(function() { ... } thing before and I can't find the info that I need anywhere.

Thanks

score 0 · Answer 1 · answered Sep 03 '13 at 14:22

0

That is the jQuery shorthand for the $(document).ready(handler) function. Anything you put in the function will be executed when the document is finished loading.

jQuery ready function

answered Sep 03 '13 at 14:22

StoicJester

364
2
12

score 0 · Accepted Answer · answered Sep 03 '13 at 14:23

0

You do not call this method directly; the syntax you're looking at is JQuery's document.ready in other words this function gets called when your document is finished loading.

JQuery Link - Document.Ready

answered Sep 03 '13 at 14:23

cillierscharl

7,043
3
29
47

That clears a lot of things up. My undestanding of it probably made my question a bit hidden. There are methods in that function and I need to call these bcause the table declaration is in there. I am using netbeans now and it seems to suggest that these methods are private. Is there a way to expose these to the HTML? – Keithin8a Sep 03 '13 at 14:38
@Keithin8a - if the methods dont need any members that are contained in the function you can move them outside the function body. Otherwise you would need to rewrite them to take in certain parameters that you can pass to the functions from all contexts that you intend on using it. – cillierscharl Sep 03 '13 at 14:44
I moved the methods and declarations out and it works fine now. Thanks for your answer I have quite a good understanding on how to use it now. Microsoft always like to make things more complicated! – Keithin8a Sep 03 '13 at 14:52

score 0 · Answer 3 · edited May 23 '17 at 12:29

That syntax is jQuery - specifically an an alias of the "DOMReady" function ( http://api.jquery.com/ready/ ) which is called after the DOM has finished loading.

Try looking at this question's suggested answer by Derick Bailey.

Why define an anonymous function and pass it jQuery as the argument?

He includes some sample code of how to write a code using a JavaScript Module pattern.

Good luck! Anthony

HTML5 drag event using a $(function() { ... } library

3 Answers3