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

Answer 1

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

Answer 2

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

Answer 3

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