Hi Diego,

Thanks for the post. You'll need to do a couple things to get jQuery running:

1. Get the version of jQuery you're looking to use from their website.
2. Create a 'web' directory next to your 'views' directory and place jQuery there (e.g. ../externalModules/helloworld/web/jquery-x.xx.js).
3. Next to your helloWorld.html, create the helloWorld.view.xml (you may have already done this) adding a "dependencies" section. Here's a brief example:

<view xmlns="http://labkey.org/data/xml/view" title="Hello, World!">
      <dependencies>
            <dependency path="jquery-x.xx.js"></dependency>
      </dependencies>
</view>

Here is a more complete write-up on this topic:

https://www.labkey.org/wiki/home/Documentation/page.view?name=scriptdepend

Thanks,
Nick

Nick,

So once I have declared the dependencies in "helloWorld.view.xml"

<view xmlns="http://labkey.org/data/xml/view" title="Hello World View">
    <dependency path="../externalModules/helloworld/js/jquery-2.2.2.min.js"/>
    <dependency path="../externalModules/helloworld/js/jquery-ui-1.11.4.custom/jquery-ui.js"/>
</view>

Do I still need to declare jQuery in the Javascript below? "LABKEY.requiresScript([ .... ]);

Thanks,
Diego

############# JAVASCRIPT BELOW ###############

<script type="text/javascript">

    var jQueryReady = function() {

        /* Use JQuery */
        $('a.usejquery').click(function(event){
            alert('JQuery allowed this to happen.');
        });
           
    }

    /* Request the scripts -- you do not need to provide the Context Path */
   LABKEY.requiresScript([
        'https://code.jquery.com/jquery-2.2.3.min.js',
        'https://code.jquery.com/ui/1.11.4/jquery-ui.js'
        // add more files to this array
    ], true, jQueryReady, this, true);

</script>

FWIW, you can probably declare your dependency directly on that URL, instead of copying the JS file and distributing it w/ your module:

<dependency path="https://code.jquery.com/jquery-2.2.3.min.js"></dependency>

though i havent done that in a while.

if declaring dependencies explictly in the XML, you dont need to use LABKEY.requiresScript.

If you do want to distribute that JS file w/ your module, the path you provide is relative to the web root, not the module's root. so if you put the file in: "../externalModules/helloworld/js/jquery-2.2.2.min.js", this probably wont work. I think Nick was suggesting you place it somewhere like:

../externalModules/helloworld/web/jquery-2.2.2.min.js

in which case you'd just use the path relative to /web:

<dependency path="jquery-2.2.2.min.js"></dependency>

you could use a subfolder named after your module, which I'd argue is better practice - so modules dont clash:

../externalModules/helloworld/web/helloworld/jquery-2.2.2.min.js

which should mean:

<dependency path="helloworld/jquery-2.2.2.min.js"></dependency>

Thanks Ben.

Yes, remote dependency declarations will work as well. They're briefly described at the end of the script dependency documentation. Additionally, I agree, it is good advice to use a subfolder to "namespace" your modules web folder.

Thanks,
Nick

Nick,

Have notice that if I only modify the dependencies on the "helloWorld.view.xml" the jQuery script is not called... file attached.

Also tried adding a subfolder under "web/helloworld/jquery-x.js" but to no avail. the second screenshot displays the folder structure I am using and the firebug error -> "NetworkError: 404 Not Found - http://localhost:8080/labkey/helloworld/jquery-2.2.2.min.js?161624521"

Thanks,
Diego

#################### JAVASCRIPT ###################
 // Request the scripts -- you do not need to provide the Context Path */
   LABKEY.requiresScript([
        'helloworld/jquery-2.2.2.min.js',
        'helloworld/jquery-ui-1.11.4.custom/jquery-ui.js'
        // add more files to this array
    ], true, jQueryReady, this, true

Hi Diego,

Just curious, but does the script work if you put in the full HTTP path for those JS files?

Regards,

Jon

Jon,

If i do use the full http address to an external jquery site that hosts the libraries, everything works just fine! That is why i find this issue kinda weird..

Thanks,
Diego

Hi Diego,

I admit that I was first having issues with this when I created the module just as a regular directory structure. But once I created an actual zipped module that was within my intelliJ build, the files worked without any issue.

Can you give my module a try and see how it works on your end? I had separated the file types as well into respective directories (scripts, css, images).

Regards,

Jon

Jon,

Do I simply drop the "helloWorld.module" zipped file into my "/usr/local/labkey/externalModules/" directory? If so after restarting tomcat, "folder management -> folder type" under "modules" list the "helloWorld" module does not show up...

Thanks,
Diego

Hi Diego,

No, any .module file is actually supposed to be placed in the modules directory of a standard LabKey instance, not a development one.

Also, I placed my module in the customModules folder, but placing it under externalModules is okay too as long as you have optional.modules files pointing at your externalModules directory.

I've supplied you with a zip of my module. Please drop this either under the customModules or externalModules directory and unzip it there. It should create a helloWorld director with a sub-directory of resources (with a bunch of other subdirectories under it) and the module.properties file.

Regards,

Jon

Jon,

Dropped the "helloWorld.zip" into "/usr/local/labkey/externalModules/" -> unzipped -> restarted tomcat, was able to add helloworld module as "<Select Web Part>". The only issue is that the "js" internal libraries are not working... Also firebug is not displaying any errors when using "internal" libraries.... Does it work for you?

Thanks,
Diego


###################################
# WORKING
##################################
    LABKEY.requiresScript([
        'https://code.jquery.com/jquery-2.2.3.min.js',
        'https://code.jquery.com/ui/1.11.4/jquery-ui.js'
        // add more files to this array
    ], true, jQueryReady, this, true);
  
###################################
# NOT WORKING
##################################
   LABKEY.requiresScript([
       "/helloWorld/scripts/jquery-2.2.2.min.js",
       "/helloWorld/scripts/jquery-ui.js"
        ], true, jQueryReady, this, true);

Hi Diego,

Yes it does work for me, which is why I sent you the module and the zip file.

Let's confirm a few things here before we go any further:

1. Are you using IntelliJ (or some kind of IDE) or are you just running LabKey on the server as a standalone thing?
2. Can you actually access the JS script if you go to this URL?

http://localhost:8080/labkey/helloWorld/scripts/jquery-2.2.2.min.js

Regards,

Jon

Jon,

Trying to access http://localhost:8080/labkey/helloWorld/scripts/jquery-2.2.2.min.js

displays a "HTTP Status 404 - Not Found" error

1.) I am using Komodo Edit a "simplified IDE"
2.) Running LabKey on a server as a standalone web service

Thanks,
Diego

Hi Diego,

So do you actually compile anything within Komodo Edit, similarly to something like an "ant build" or "ant rebuild"?

Also, when I drop in the helloWorld.module file within my standalone instance of LabKey (not my development one that is tied to my IntelliJ IDE), the module works without any issue and that URL I provided you is accessible as well.

Regards,

Jon

Jon,

I do not compile anything with Komodo Edit. What I do is write code for example foo.htm or foo.xml and save file(s) in respective folder. You think my LabKey server install can be corrupted?

Thanks,
Diego

Hi Diego,

I can't say for certain. I do know that there are only so many ways to create a module and looking over this entire thread, it seems like you're using an unusual hybrid between our source version of LabKey that is from our SVN repository and our regular installed version.

For example, our installed version doesn't automatically come with an externalModules directory, while our source version from SVN does (see screenshots).

Can you send me a screenshot of your directory structure? It will let us know what we're working with here.

Regards,

Jon

Jon,

Have attached a screenshot of the zipped file I used to install LabKey. When I installed LabKey 15.x a couple months back (barely learning) , I was following a tutorial which asked for the "externalModules" directory, so I created it myself... You think that could be it? Since I created the directory myself?

Also the owner of "externalModules" is "diego" not "www" which tomcat uses...

Have attached a screenshot of files "ls -l"

Thanks,
Diego

Hi Diego,

Can you remove any instance of helloWorld you already have in the modules and externalModules directory (or just move them somewhere else that is outside of the LabKey directory), then take my helloWorld.module file and drop it into your modules directory, then restart Tomcat?

Regards,

Jon

Jon,

That worked perfectly! So I should not install any modules inside of "externalModules"??

functionality works, except there is a an "The following modules experienced errors during startup: [helloWorld]" have attached a few screenshots.

Thanks,
Diego

Hi Diego,

Sounds like that's just the old module that was loaded. If you go to Admin > Site > Admin Console and then go to the middle of the screen, you should see a link for "Module Details", then scroll down and you'll be at a list of Unknown Modules where you can then delete the bad modules out of the LabKey database.

And yes, please refrain from using externalModules. Due to your instance of LabKey not being built from source, you will always want to build your modules within the modules directory instead or build them outside of that directory, zipping up the contents with a .module extension, then dropping that .module file into the modules directory.

Regards,

Jon