APP Studio HTML Canvas already has Jquery installed.But it is an older version.
Can i download a new version and move it to the particular location?Is it gonna work.?
I have to implement some jquery plugins for Scrollbars and auto search.

Anb how can i find the location to load the new jquery.
When i reference the new jquery versions using settings option in HTML Canvas,it is not working properly.
I am getting errors like "Jquery not defined" or " $" is not defined.
Any information on this will be very useful.

Thanks

This message has been edited. Last edited by: FP Mod Chuck,

I would not replace the already-provided jQuery files with an updated version. This will only cause problems.

There is an easy method of using two versions of jQuery, without each affecting the other.

Take a look at this:

Multiple versions of JQuery on the same page
jQuery.noConflict()

You include the jQuery file specifying noConflict and specify a different alias than $, something like this:

<script type="text/javascript" language="javascript">var jq17 = jQuery.noConflict();</script>
...
    window[clientId + "_tempid"] = jq17(obj).attr('id') + ';ForecastDiv';
    var pos = jq17(obj).position();
...

Using $ will reference the jQuery version that is supplied with WEBFOCUS, using jq17 will reference the jQuery you need.

This is an option if i am running a fex which needs jquery.
I am working on HTML canvas.
And to my knowledge i cannot add script tag in HTML composer.
Please correct me if i am wrong.

Using the GUI, you can definitely add references to JavaScript files and then add JavaScript code.

Create a JavaScript file to include the jQuery library and use conflict to ensure no conflict. Take a look at this:

StakOverflow: Load jQuery with Javascript and use jQuery

Use the GUI to add a script - point it to the JavaScript file location.

In the v8.0.08 environment I last worked on - we had to use the GUI to add the script, but then type the path manually in the pop-up window.

I haven't been in front of App Studio in several months, but there must be a way to add JavaScript like in the old days of onInitialUpdate...

This is how it goes in my html canvas.
I load another version of jquery and then use a funcion where i write i achieve no conflit and use the jquery code.

  
if(typeof(bRuntime) != 'undefined') {
// TODO: Add your inline runtime code here
}
//Begin function window_onload
function window_onload() {
UpdateData();
}
// Anonymous "self-invoking" function
(function() {
        // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);
})();




//var script = document.createElement('script');
//script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
//document.getElementsByTagName('head')[0].appendChild(script);


//var jq = 
//jQuery.noConflict(true);


jQuery.noConflict()(function($){
  // jQuery code here
var options = {
 data: ["blue", "green", "pink", "red", "yellow"]
};
 
$("#basics").easyAutocomplete(options);


});

But still i get error at jquery.noconflict()
that jquery is not defined.

The HTM file below was created using App Studio 8.1.05M.
It is a demo of how to dynamically include a different version of jQuery and apply noconflict.
I created this using the legal method - GUI only, with editing in the "Embedded JavaScript/CSS" tab.

It took quite a while to figure out - lots of gooooogling. It works for me.
The first version detected is 1.9.1 and I load 2.2.4.
NOTE: I am loading my jQuery from my baseapp folder, so, make sure you change the code appropriately.
You only need to copy the one function:

// Load different version of jQuery with noconflict
(function ($) {
    var script = document.createElement('script');
    script.src = '/approot/baseapp/jquery-2.2.4.js';
    script.onload = function () {
        myJQ = jQuery.noConflict(true);

        alert('$ jQuery version: ' + $.fn.jquery);
        alert('myJQ jQuery version: ' + myJQ.fn.jquery);
    }
    document.head.appendChild(script)
})(jQuery);

The complete file:

<!DOCTYPE html>
<html><!-- Copyright 1996-2013 Information Builders, Inc. All rights reserved. --><head><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="mycharsetmeta" http-equiv="Content-Type" content="text/html; charset=WINDOWS-1252"><meta name="Generation" content="Created in release 8105, Generation 4"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
//confidential_id=IBI_OptionsScript
var bRuntimes=true;var szHtmlAlias="./ibi_html/";var is_mobile="false";var szRunTimeHtmlAlias="runTimeHtmlAlias";var cgipath="cgipath";var ib_composer="ib_composer";var map="ib_composer_map";var grid="ib_composer_grid";var emf="ib_composer_emf";var ibiOptions = new Array(cgipath,ib_composer);if(typeof(szRunTimeHtmlAlias) === 'string' && szRunTimeHtmlAlias.indexOf('/') == 0)szHtmlAlias=szRunTimeHtmlAlias;document.write('<script src="'+szHtmlAlias+'ibigbl.js" type="text/javascript"><\/script>');</script><script type="text/javascript">
//confidential_id=IBI_ibigblloadCss
if(typeof ibigblloadCss === 'function'){ibigblloadCss(null);addIntlTranslatedJS("composertrans.js");}else {alert("JavaScript alias './ibi_html/'  is not valid.");window.location("about:blank");}</script><title>HtmlPage</title><script type="text/javascript">
//confidential_id=clientEventHandlersJS

if(typeof(bRuntime) != 'undefined') {
// TODO: Add your inline runtime code here
}
//Begin function window_onload
function window_onload() {
UpdateData();
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload

// Load different version of jQuery with noconflict
(function ($) {
    var script = document.createElement('script');
    script.src = '/approot/baseapp/jquery-2.2.4.js';
    script.onload = function () {
        myJQ = jQuery.noConflict(true);

        alert('$ jQuery version: ' + $.fn.jquery);
        alert('myJQ jQuery version: ' + myJQ.fn.jquery);
    }
    document.head.appendChild(script)
})(jQuery);


</script><style type="text/css">.internal_default {

}
</style><!--//confidential_id=focus_xmlelement
<rootxmlnode focoption="_FOC_NULL"><html_elements><html_body thumbnailscale="4" use_appl_css="no" maptype="0" autofitchildren="no" mobiledocument="no" edaconnectionrequired="false" ibiapp_app="entrptadmin" ismre="1" ibif_ex="/WFC/Repository/entrptad/std_reports/Test/HtmlPage1.htm"><html_event eventname="load" eventhandlername="window_onload"/><layer name="default"/></html_body><html_element bindcontrolid="text1" layername="default" elementtype="4" myviewonautofit="dontyouever"/><html_element rtFileName="htmlpathsub/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css" bindcontrolid="LINK1" type="cssfile"/><html_element rtFileName="htmlpathsub/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css" bindcontrolid="IBI_THEME_CSS" desc="Information Builders" type="cssfile"/></html_elements><variables></variables><requests></requests><tasks><task id="load" trigger="load"/></tasks><animations></animations></rootxmlnode>
--><script type="text/javascript">
//confidential_id=updateHeadElements
if(typeof updateHeadElements === 'function'){updateHeadElements();}</script></head>
<body class="IBI_PageBg"><span tabindex="-1" class="internal_default" id="text1" style="left: 10px; top: 10px; width: 80px; height: 30px; position: absolute; z-index: 1;">Test</span></body><script type="text/javascript">
//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</script></html>
<!-- cc yyvr -->

I guess this is only the first step. Now to use it in the real world...