How to include your own instances of jQuery and jQueryUI in Text Areas

Last updated:
11:46am Dec 03, 2019

Introduction

To avoid having your scripts be dependent on the jQuery and jQueryUI instances included with a particular version of TIBCO Spotfire, you need to include your own instances with your scripts. This article describes step by step how to do that. A DXP file with the full example is attached with this article.

For more information on using JavaScript in Text Areas, see Best Practices for Writing Custom JavaScript Code in Text Areas.

Import the jQuery and jQueryUI libraries

In order to use jQueryUI in your script, you must first include the library in the Text Area where it is going to be used. The best way to do this is to create a separate script entry and place that before your own script. Even if you only plan to use jQueryUI, you also need to include jQuery since that is a dependent library. You need to make sure that you use a jQuery version that is compatible with the jQueryUI version you want to use. The attached DXP file for an example of how the import is done for jQuery v3.3.1 and jQueryUI v1.12.1.

// Install jQuery.
jQuery code goes here ...

// Install jQueryUI of a version that is compatible with the 
// jQuery version installed above.
jQueryUI code goes here ...

// Assign a global variable so that jQuery can be accessed 
// by other scripts later.
// Use the noConflict mechanism to restore any exising 
// jQuery object in scope. This avoids conflicts with any 
// version of jQuery that might be used by Spotfire.
window.CustomJQuery = window.$.noConflict(true);

// Add the jquery-ui.css with embedded images.
var $ = window.CustomJQuery;
var css = CSS code goes here ...
$("<style/>").text(css).appendTo($("#" + styleContainerId));

 

Use the imported libraries in custom scripts

Now, you can start using the jQueryUI in your script. Since the library is placed before your script, it will automatically be in the context of your script.  You can access your jQuery instance from the global variable window.CustomJQuery that was assigned in the previous step.

 

The first example script defines an accordion control:

var $ = window.CustomJQuery;
var $div = $("#" + id);
$div.accordion();

var css = ".accordion-title {color:green;font-size:20px;}";
$("<style/>").text(css).appendTo($div);

 

The second example script defines a draggable div:

var $ = window.CustomJQuery;

var $div = $("#" + id);
$div.css("background-color", "lime").draggable();

var version = $.fn.jquery;
$("<p/>").css("margin", "10px").text("jQuery version in scope: " + version).appendTo($div);

 



The scripts used in the Text Area HTML:

<div id="demo-draggable" style="width:200px;background-color:lightgray;padding:20px;">
This is a div made draggable with jQuery UI included in a custom javascript.
</div>

<div style="width:300px;margin:20px;" class="custom-style">
<div class="accordion-title">
Example of accordion:
</div>
<div id="demo-accordion">
  <h3>Header One</h3>
  <div>One.</div>
  <h3>Header Two</h3>
  <div>Two, two, two.</div>
  <h3>Header Three</h3>
  <div>Three: 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3.</div>
</div>

 

You can view the full example in the attached dxp file.

Attachments

Feedback (6)

Hi,



Would it be at all possible to provide an example of a simple pop-up box which can be styled using CSS?

Currently having some difficulty updating some pop-up boxes in the transistion from 7.10 to 10, specifically for their functionality in the webplayer! Any comments would be much appreciated, thanks! 

s.a.a.tabor 4:08am Dec. 18, 2019

don't seem to open the attached dxp file with my 7.10 version of spotfire.

spotfirefighter 6:06pm Nov. 19, 2019

I needed to make some changes in order to get my custom jQueryUI to work with my specific version of jQuery (1.8.3). At least in Spotfire 10.3 I noticed there are couple verisons of jQuery; there is a global one (3.4.0) which can be seen in window.jQuery.fn.jquery, and then in the scope of the script itself there is another version (1.12.4) which can be seen in jQuery.fn.jquery. 

As so, in order to get jQueryUI added to my 1.8.3 version I had to override the jQuery variable with the custom jQuery before the jQueryUI code.

/*! jQuery v1.8.3 jquery.com | jquery.org/license */
//(function(e,t)...

window.CustomJQuery = $.noConflict(true); 

// If you do not override both $ and jQuery in this scope, then jQueryUI
// will be added to the local version of jQuery (which is 1.12.4 in SF 10.3)
var $ = window.CustomJQuery;
var jQuery = window.CustomJQuery;

/*! jQuery UI - v1.9.2 - 2019-07-12
* http://jqueryui.com
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.menu.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js, jquery.ui.effect.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js
* Copyright jQuery Foundation and other contributors; Licensed MIT */
//(function(t,e){function i(e,i){...

// jQueryUI CSS code with base64 images
var jQueryCSS = `css_code`

// Assuming you have
$("<style/>").text(jQueryCSS).appendTo($("#jQueryUIWrapper"));

 

esteban.jenkins 2:24am Jul. 23, 2019

Thanks Magnus - I found tools for generating the base64, pretty painful!

Something else I noticed though. In your example you've modified the JQueryUI code so that it assigns to the window.JQuery variable rather than the JQuery variable. I was completely thrown by this - I created my own version where I downloaded just the pieces of JQuery UI I needed, followed your instructions and found it didn't work. I eventually worked out that I needed to either hack the JQueryUI code, or move the noConflict code up above JQueryUI and then assign local variables for $ and JQuery to the CustomJQuery variable. I went with the second approach so that I wouldn't forget about the method later.

pete.thompson 7:49am Jan. 17, 2019

Hi Pate and thanks for for your feedback! It is correct that you need to manually edit the CSS file and include the images required by jQueryUI as inline base64 strings (there are free tools available that converts PNG -> base64).

In those places in the CSS that refer to a URL:

url(myimage.png)

is replaced by the image inline:

url(data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulr....)

Magnus Rylander 7:18am Jan. 15, 2019

Hi Magnus, good stuff. One question though - how did you generate the CSS for JQuery UI with the embedded images? Every download I've generated references images via URIs rather than embedding them - do I need to manually edit the CSS or is there some nice easy way?

pete.thompson 3:45am Jan. 14, 2019