[SOLVED]jquery ui install to AS

December 14, 2015, 11:14 AM

I found the answer to the below. I editted each css and removed all references to images/. Of course i now have all the images in my baseapp, but at least it works.

I downloaded the UI extracted all, and copied to AS, but the icons do not appear when I run my code. I cannot create an images subdirectory in baseapp where the ui js and css are.

The datepicker itself does appear, and works.

Using the index.html from the download has the icoons.

I suspect the ui expects them in the /images subdirectory.

code is:


-HTMLFORM BEGIN
<HTML>
<HEAD>
	<TITLE>Calendar Popup To Select Date</TITLE>
  <script src="/approot/baseapp/jquery.js"> <script>
  <script src="/approot/baseapp/jquery-ui.min.js"></script>
  <script src="/approot/baseapp/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.structure.css">
	<link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.structure.min.css">
    <link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.min.css">
	<link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.theme.css">
	<link rel="stylesheet" type="text/css" href="/approot/baseapp/jquery-ui.theme.min.css">
</style>

 <script>
 $(document).ready(function() {
    $("#datepicker").datepicker();
       });
  </script>
</HEAD >
<BODY style="background-color: #ffffff" >
<a href="#"><span class="ui-icon ui-icon-calendar" >Text Here</span></a>
<span class="ui-icon ui-icon-arrowthick-1-n"></span>
<p>Date: <input type="text"  id="datepicker"></p>
<span class="ui-icon ui-icon-zoomin"></span>
</BODY>

Hmmm, now what?

Neal

This message has been edited. Last edited by: <Emily McAllister>,

December 14, 2015, 11:48 AM

Francis Mariani

Neal, you need the images subfolder. All the code in jquery-ui.min.js references images in an images subfolder and you should not modify the jquery-ui.min.js library to reference them elsewhere. I don't know of a way to specify to jQuery that the images are elsewhere. Also, do not reference both the full and the minimized versions of the JS and CSS files - the code inside these files are identical, though the .min file is "minified". You can reference either the full file or the minimized one - people usually reference the minimized one as it will load to the web browser faster.

December 14, 2015, 11:53 AM

Francis Mariani

Also, When using the GUI tool in App Studio, jQueryj/Query UI is already available - you do not have to install jQuery. UNFORTUNATELY, it's an old version of jQuery!

December 14, 2015, 12:34 PM

Francis Mariani

This is an HTML file created using Application Studio v8.0.08 GUI. It tells you which version of jQuery and jQuery UI is loaded.

Since jQuery is always included in an App Studio GUI generated HTML file, you do not have to include and external version of jQuery. But since it's an older version, there are situations where you may need to override the automatically included version of jQuery with your own, newer version. I have outlined how to do this in another post, but you most likely won't need to do that...

<!DOCTYPE html>
<HTML><HEAD>

<META content=IE=Edge http-equiv=X-UA-Compatible>

<META name=mycharsetmeta content="text/html; charset=ISO-8859-1" http-equiv=Content-Type>

<META name=Generation content="Created in release 8008, Generation 4">

<META name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><script type="text/javascript">
//confidential_id=IBI_OptionsScript
var szHtmlAlias="/ibi_apps/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 ibiOptions = new Array(cgipath,ib_composer);var nlsScript="/javaassist/nls.js";var glbScript="/javaassist/ibi/html/js/ibigbl.js";var replacePart="<replace>";
var scriptTemplate='<script src="'+replacePart+'" type="text/javascript"><\/script>';if(typeof(szRunTimeHtmlAlias) === 'string' && szRunTimeHtmlAlias.indexOf('/') == 0)szHtmlAlias=szRunTimeHtmlAlias;document.write(scriptTemplate.replace(replacePart, szHtmlAlias + nlsScript));document.write(scriptTemplate.replace(replacePart, szHtmlAlias + glbScript));</script><script type="text/javascript">
//confidential_id=IBI_ibigblloadCss
if(typeof ibigblloadCss === 'function'){ibigblloadCss(null);addIntlTranslatedJS("composertrans.js");}else {alert("JavaScript alias '/ibi_apps/ibi_html'  is not valid.");window.location("about:blank");}</script><TITLE>HtmlPage</TITLE>

<STYLE></STYLE>



<SCRIPT type=text/javascript>
//confidential_id=clientEventHandlersJS

//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

function onInitialUpdate()
{
    if (window.jQuery)
    {
        alert('jQuery ' + $.fn.jquery + ' is loaded');
        alert($.ui ? 'jQuery UI ' + $.ui.version + ' is loaded' || "pre 1.6" : 'jQuery-UI not detected');
    }
    else
    {
        alert('jQuery is not loaded');
    }

}

</SCRIPT>

<!--//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="FrancisMariani" ismre="1" ibif_ex="/WFC/Repository/Test/FrancisMariani/test_jQuery_as.htm"><html_event eventname="load" eventhandlername="window_onload"/></html_body><html_element rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css" type="cssfile"/><html_element rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css" bindcontrolid="IBI_THEME_CSS" desc="Information Builders" type="cssfile"/></html_elements><variables></variables><input_controls></input_controls><requests></requests><other_bound_objects></other_bound_objects><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></BODY><script type="text/javascript">
//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</script></HTML>
<!-- cc yfsn -->