Issue declaring and then sharing a module with require.js

Question

I'm currently trying to wrap my head around the require.js library, and I'm having an issue that, even if I kind of get the problem, can't seem to resolve it. I've first created a main.js file :

/*
 *
 * Require.js configuration for app
 */
require.config({
 baseUrl: 'assets/js',
 paths:{
    "async": 'vendor/requirejs-plugins/async',
    "jquery": "http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min",
    "common": "modules/common",
    "jquery-fineuploader": "vendor/jquery-fineuploader/jquery.fineuploader-3.0",
    "google" : "vendor/google/maps/google.init",
    "jqueryui" : "vendor/jquery-ui/jquery-ui-1.9.2.custom.min",
    "jqcookie": "http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.2/jquery.cookie.min"
},
shim: {
    'jqueryui': {
        deps: ['jquery']
    },
    'bootstrap' : {
        deps: ['jquery']
    },
    'common': {
        deps: ['jquery', 'bootstrap']
    },
    'google': {
        deps: ['jquery' , 'bootstrap']
    },
    'index':{
        deps: ['jquery' , 'bootstrap']
    },
    'jqcookie': {
        deps: ['jquery']
    },
    'jquery-fineuploader': {
        deps: ['jquery']
    }
}
 });

 require(["google", "index"], function() {
// Bisous 
 });

This file is meant to load the various required files for my app to run.

Then, to stay clean, I created a common.js file, meant to be my common helpers module:

//Calling define with module ID, dependency array, and factory function
define(['jquery', 'bootstrap'], function () {

return{
    /*
     *
     * All-in-one modal content handler
     *
     */
    modalRefresh : function(redirectUrl, method, data){

        console.log(redirectUrl);
        console.log(method);
        console.log(data);

        $.ajax({
            url: redirectUrl,
            type: method,
            dataType: "json",
            data: (data) ? data : '',
            success: function( json, textStatus, xhr ) {

                if(json.redirect){
                    modalRefresh(json.redirect, 'GET');
                    return false;
                }

                if(!$('#submitDialog').length){
                    console.log('not found');

                    $('<div class="modal hide fade submitModal" id="submitDialog">' + json.data + '</div>').modal();
                }else{

                    console.log('found');
                    $('#submitDialog').empty().html(json.data);
                }
            },
            error: function( xhr, textStatus, errorThrown ) {}
        });
    }
}
});

This file currently only contains what I need to handle my dialog windows, accross the app, even if it's meant to handle further application helpers in a near future.

My problem is I can't seem to access modalRefresh doing the following:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common){
  common.modalRefresh('test/call','POST', data = {test : 1});  
});

I really suspect my module not to be implemented the way it should be, by I can't find where I'm having an issue. Thanks for helping!

Answer 1

Your arguments for the function need to match the arguments in the array that preceded it.

So in other words:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common) {...

should be:

define(['jquery','jqueryui', 'bootstrap','common','async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(jquery, jqueryui, boostrap, common) {...

Of course, you don't need arguments for imports that you're not using directly (eg. jQuery), so what I do to avoid having to write them is put such imports at the end. In other words, I would re-write your define as:

define(['common', 'jquery','jqueryui', 'bootstrap', 'async!http://maps.googleapis.com/maps/api/js?key=AIzaSyA9NdU3m2ysLvAiK1vjHnba3yQtck-pSFE&sensor=false',"vendor/google/maps/clusterer.min", "tmp/clusteringData"],
function(common) {...