Using JavaScript modules in external files

Question

I have a skeleton of a module which adds a record to a database with a button click.

var Person = (function () {
    var ajaxOpts = {
        type: "POST",
        url: "",
        contentType: "application/json",
        dataType: "json",
        success: function () { },
        error: function () { },
        data: {}
    }
    function insert(data) {
        ajaxOpts.url = "../Service.asmx/InsertPerson";
        ajaxOpts.data = JSON.stringify(data);
        ajaxOpts.error = function (xhr) {
            console.log(xhr.status);

        };
        ajaxOpts.success = function (data) {
            console.log('record successfully added');
            console.log(data.d);

        }
        $.ajax(ajaxOpts);
    };
    return {
        insert: insert
    }
} ());

and I call it from my webpage like:

$(document).ready(function () {
            $('#btnSubmit').click(function () {
                var data = {
                    personId: $('#personId').val(),
                    firstName: $('#firstName').val(),
                    lastName: $('#lastName').val()
                };
                Person.insert(data);
            });
        });

How can I modify this code to make sure that $ is the jQuery object and not another library?

In both files or where exactly?

Felix Kling
– Felix Kling

2013-11-15 02:03:01 +00:00
Commented Nov 15, 2013 at 2:03 — Felix Kling
– Felix Kling, Commented Nov 15, 2013 at 2:03
Let's say both files are loaded with a CDN.

wootscootinboogie
– wootscootinboogie

2013-11-15 02:06:11 +00:00
Commented Nov 15, 2013 at 2:06 — wootscootinboogie
– wootscootinboogie, Commented Nov 15, 2013 at 2:06

Felix Kling · Accepted Answer · 2013-11-15 02:05:34Z

1

For plugins you usually wrap the code in an IIFE and map jQuery to $. You could do the same for your module (you even already have an IIFE):

var Person = (function($) {
    // ...
}(jQuery));

For document.ready callbacks, a reference to jQuery is passed to the callback:

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

Just make sure that you are using jQuery outside of the functions.

answered Nov 15, 2013 at 2:05

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wootscootinboogie Over a year ago

So all I really need to do is change my IIFE like you have it their in your first code block? What makes that work? I think it takes whatever parameters is passed to it and returns jQuery? I guess this works because I'm calling Person methods inside of jQuery?

Felix Kling Over a year ago

"What makes that work?" I'm not sure what you mean. You pass jQuery as argument to the function and name the parameter $. So any use of $ inside the function refers to the parameter and not to the global $. Is this what you wanted to know?

wootscootinboogie Over a year ago

I worded that poorly, let's say I was using another library that used $ besides jQuery, how do those objects not collide and mess up (doesn't prototype use $ as well?)

Felix Kling Over a year ago

Well, inside the function, $ will refer to jQuery then. It will shadow the global $ variable. If you also want to be able to access the other library, you could use $j instead of $ to access jQuery and $ to access the other library.

user2672373 · Accepted Answer · 2013-11-15 02:03:19Z

0

How about replacing code in your main page like this:

(function($) {
    $('#btnSubmit').click(function () {
        var data = {
            personId: $('#personId').val(),
            firstName: $('#firstName').val(),
            lastName: $('#lastName').val()
        };
        Person.insert(data);
    });
}(jQuery));

answered Nov 15, 2013 at 2:03

user2672373

Collectives™ on Stack Overflow

Using JavaScript modules in external files

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related