Call external jQuery file

Question

Hi I am trying to write a web app using jQuery and I want to separate the JS code with HTML markup. Here is the code:

FILE: index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Search</title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
    ...
    <input type="button" id="button_batch_update" value="Save"/>

    <script type="text/javascript" src="js/customer_search.js"></script>
</body>

FILE: customer_search.js

!function($){
    $("#button_batch_update").click(function(e){
        e.preventDefault();
        alert("u clicked me!");
    });
}(window.jQuery);

I copied the JS file code from bootstrap website (http://twitter.github.io/bootstrap/javascript.html). It works, but I don't really understand why the external JS file will work. Could someone help me out with this? Thanks!

`!function(){}();` works the same as `(function(){})();` – Kamarkaka Apr 18 '13 at 19:06 — Kamarkaka, Apr 18 '13 at 19:06

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

When you include the external file, its really including it as part of the current HTML page.

So, if you have an external file which looks like this:

<script>

function myFunc(){

}

</script>

And you include it in your HTML header, it's as if the function were written in your original HTML document:

<html>
<body>

    <script>
    
    function myFunc(){
    
    }
    
    </script>

</body>
</html>

therefore allowing you to call the function.

By the way ...

While we're having this discussion, it may help to inform you that you can do this for many other types of files including, but not limited to:

css
php
xml
...

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 18 '13 at 17:22

What have you tried

11,018
4
31
45

Thx for your explanation. What still confuses me is that why the "!function($){", "}(window.jQuery);" code will work the same as the "$(document).ready()" ? I thought the shorthand would be "function($){}"? – Kamarkaka Apr 18 '13 at 17:29
@Kamarkaka That code does not run until it is included by the page calling it. And therefore window will reference the current window once the page loads. – What have you tried Apr 18 '13 at 17:31
Is this "!" a specific syntax? because removing it will prevent any code inside from running... – Kamarkaka Apr 18 '13 at 17:50

score 1 · Answer 2 · answered Apr 18 '13 at 17:29

in Javascript function(){} is how you declare a function and function(){}() will execute it. So when the script file is added, the browser requests that script file and executes the contents inside (basically parses it, compiles it and makes it available to support your html).

so

  < script src="js/jquery-1.9.1.min.js"></script >

will execute jquery code. jquery attaches itself to the global window object. so now anyone can access it with window.jQuery or simply as jQuery (inferred global).

then when your html finds your script

function($){
    $("#button_batch_update").click(function(e){
         e.preventDefault();
         alert("u clicked me!");
    });
}(window.jQuery)

it is executing it and passing window.jQuery as a function parameter, which is accepted as "$" inside your closure.

This really clears out a lot... One last thing though...I just tested that "function($){...}(jQuery)" will NOT execute after the page is loaded but "!function($){...}(jQuery)" will do. Is this "!" a specific syntax? — Kamarkaka, Apr 18 '13 at 17:50
it is an expression. You can remove the "!" and then wrap the whole function inside () i.e. (function(){....}()) and it will work just fine. it is just another shorthand. — Sujesh Arukil, Apr 18 '13 at 19:19

Call external jQuery file

2 Answers2

By the way ...