• Sign In
  1. Messages

What exactly does it take to have jQuery enabled/working within my custom Labkey module?

LabKey Support Forum (Inactive)

View Message

view list print
What exactly does it take to have jQuery enabled/working within my custom Labkey module? Leo Dashevskiy  2012-05-22 17:51
Status: Closed
 
Are some additional tweaks needed, is this not enough?

<link rel="stylesheet" href="<%=contextPath%>/jQuery/development-bundle/themes/base/jquery.ui.all.css">
<script type="text/javascript" src='<%=contextPath%>/jQuery/js/jquery-1.7.2.min.js'></script>
<style type="text/css"></style>
<script src="<%=contextPath%>/jQuery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="<%=contextPath%>/jQuery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="<%=contextPath%>/jQuery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="<%=contextPath%>/jQuery/development-bundle/demos/demos.css">
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>
<link rel="stylesheet" type="text/css" href="data:text/css,">
<script type="text/javascript" src="<%=contextPath%>/jQuery/js/jquery-ui-1.8.20.custom.min.js"></script>

<input type="text" id="datepicker" class="hasDatepicker">

Thanks.
 
 
Nick Kerr responded:  2012-05-22 18:58
Hi Leo,

We provide an JavaScript API for requesting additional scripts. Here is an example:

<a href="#" class="usejquery">See JQuery Run</a>
<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([
        '<your module>/jQuery/development-bundle/ui/jquery.ui.core.js',
        '<your module>/jQuery/development-bundle/ui/jquery.ui.widget.js'
        // add more files to this array
    ], true, jQueryReady, this, true);

</script>

See our JavaScript documentation for more information.

Thanks,
Nick
 
Leo Dashevskiy responded:  2012-05-22 19:07
Ok, thanks Nick! Got me started.
I've tried before on my own something similar (with LABKEY.requiesScript facilities), but was not precise, I guess, and so it did not work...
 
Leo Dashevskiy responded:  2012-05-23 13:29
So is there a difference between using

LABKEY.requiresScript( [ 'file1.js', 'file2.js' ], true, callBackFunc );

and

LABKEY.requiresScript( 'file1.js' );
LABKEY.requiresScript( 'file2.js', true, callBackFunc );

(taking into account that callBackFunc uses resources contained in file2.js)

?

Thanks.
 
Leo Dashevskiy responded:  2012-05-23 13:43
On a similar note, is there a call-back for LABKEY.requiresExt4Sandbox()?

Because it seems as if Ext 4 is not finished loading and I am already using Ext4 elements within my main JS code file.

My structure is the following:

LABKEY.requiresScript('LoadLibraries.js', true, flowGraph);

flowGraph calls LABKEY.requiresScript('flowGraph.js', true, <pass the web part div into it here>) and it's 'flowGraph.js', which contains references to Ext4

Now withing 'LoadLibraries.js' I have a line: LABKEY.requiresExt4Sandbox()

Am I not doing something correctly?
(I've already had the same or similar issue in the past, but it went away or may be was well hidden)

Thanks.
 
Leo Dashevskiy responded:  2012-05-23 14:02
Seems that I sorted out my current issues here. Or may be the issue got concealed for the future.
If there was something blatantly wrong with what I wrote previously, please, comment on it - otherwise there is no need.