CODEWITHSUNDEEP
jqueryasp.net-mvc-4
Richard77
Richard77

Reputation: 21621

Where to place the jquery function, template or external file?

I'm writing an application where I've been putting jQuery code just inside the page where it's needed. I wanted just to get the big picture of how it will work. Now that the basic is there, I'd like to rewrite all the javascript. Transfer codes from individual pages to an external file.

Knowing that most of jQuery code starts with something like:

$(function () {

});

Do I need to put something like this in the template or what? I've tried to put it in the external file, but it seems not to work.

Any idea?

Upvotes: 0

Views: 850

Answers (4)

iConnor
iConnor

Reputation: 20189

There isn't much to it,

In my opinion the best way to start your javascript file with jQuery is like so 

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

        // All code here

    });
}(jQuery));

Now this code with prevent conflict with jQuery/Javascript and it will only fire when the document is ready to be worked with. That's all there is to it. Just make sure you have jQuery loaded and your custom javascript file is loaded after jQuery, and you should be set to go. Need any more info. Just comment.

$(function() {
   // ... 
});

Is the same as 

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

Upvotes: 1

carter
carter

Reputation: 5432

Make sure to include your jQuery before your own code like this:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="YOUR_PATH/custom.js"></script>

Within your code:

(function () {

})();

This will execute as soon as the js is ready in the browser. It is not necessary, it just depends on whether you need the code to be executed immediately or not. It will also keep your code encapsulated, which means variables declared within it are less likely to conflict with other code. But again it is not necessary if your javascript only handles events.

e.g.

$('#YOUR_ELEMENT').on('click', function(){
  alert('It executed when you clicked me!');
});

Upvotes: 1

cheersjosh
cheersjosh

Reputation: 1209

When you are dealing with jQuery you need to tell it to load when the page is ready so we use this syntax to get us started:

$(document).ready(function() {

    // jQuery code goes within here...

});

This, of course, is placed in the external file. Now, to load the external jQuery file in your HTML page, just include this line:

<script src="js/filename.js"></script>

I like to put it at the very bottom of the <body> tag as it will then get loaded last. This can be especially important if loading a large JavaScript file as all the HTML gets loaded first.

Also, you may have already done this but, when dealing with jQuery you need to ensure that you have the required jQuery library file included on your page as well. This should be loaded before any other jQuery scripts. Using a CDN is a common way of doing this, as the example below suggests:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

Hope this helps.

Upvotes: 3

Darkagelink
Darkagelink

Reputation: 645

I always use the "Unobtrusive Comprehensive DOM-ready Execution"

MAIN.util = (function($) {
    return {
        init: function () {
        var body = document.body,
            controller = body.getAttribute("data-controller"),
            action = body.getAttribute("data-action");

        MAIN.util.exec("common");
        MAIN.util.exec(controller);

            if(action && action.length) {
                MAIN.util.exec(controller, action);
            }

            try { MAIN.util.nav.init();
            } catch(e) { }
        },

        exec: function (controller, action) {
            var ns = MAIN,
            action = (!action) ? "init" : action;

            if(controller !== "" && ns[controller] && typeof(ns[controller][action]) === "function") {
                ns[controller][action]();
            }
        },
    };
}(jQuery));

is a sweet way on how to keep your code clean and organize...

Hope this helps :/

Upvotes: 1

Related Questions