Question

My scripts are getting to big to maintain and I want to move some of that to a separate file but cannot get it to work.

I have the following:

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

some code....

initEdit(theme, isAdmin, dataAdapterCustomers, dataAdapterShops, dataAdapterOrderStatus);

some more code.....

});

In the edit.js file I have the following:

function initEdit(theme, isAdmin, dataAdapterCustomers, dataAdapterShops, dataAdapterOrderStatus) {

        $("#dateEdit").jqxDateTimeInput({ 
            width: '200px', 
            height: '18px', 
            formatString: "yyyy-MM-dd",
            theme: theme  
        });

some more code.....

}

When doing that I get the following error:

Uncaught TypeError: Property ‘$’ of object [object DOMWindow] is not a function

I tried to enclose the initEdit function with the following:

(function($) {
function initEdit(theme, isAdmin, dataAdapterCustomers, dataAdapterShops, dataAdapterOrderStatus) {

        $("#dateEdit").jqxDateTimeInput({ 
            width: '200px', 
            height: '18px', 
            formatString: "yyyy-MM-dd",
            theme: theme  
        });

some more code.....

}})(jQuery);

but then I get an error that it cannot find initEdit.

I do include the additional .js file and when I checked the source code of the file and clicking on it, it loads and therefore the page did load it. I must add that the original jQuery script is within script tags within a php file. I also run jQuery in noConflict mode.

Could it be that the edit.js gets executed before it is called from the main function?

Any suggestion would be highly appreciated!

Answer 1

Try this:

function initEdit(theme, isAdmin, dataAdapterCustomers, dataAdapterShops, dataAdapterOrderStatus) {

        jQuery("#dateEdit").jqxDateTimeInput({ 
            width: '200px', 
            height: '18px', 
            formatString: "yyyy-MM-dd",
            theme: theme  
        });
}