Focal Point
[CLOSED]JQuery Date not working

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/7647039886

January 09, 2018, 10:43 AM
Fernando
[CLOSED]JQuery Date not working
This code gives a proper jquery calendar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
<LINK id=css1 rel=stylesheet type=text/css href="/approot/web/themes/cppib-theme/jquery-ui-latest-custom.css" UserSuppliedFullPath="1">

<SCRIPT style="Z-INDEX: 0" id=jQuery type=text/javascript src="/approot/web/jquery-latest-min.js"></SCRIPT>
 
<SCRIPT style="Z-INDEX: 0" id=jQueryUI type=text/javascript src="/approot/web/jquery-ui-latest-custom-min.js"></SCRIPT>
 
<SCRIPT style="Z-INDEX: 0" id=Util type=text/javascript src="/approot/web/cppib-util.js"></SCRIPT>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>


This code does not

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD>
<META id=RLT_STANDARDS_MODE_META http-equiv=X-UA-Compatible content=IE=9>
<META name=mycharsetmeta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<META name=Generation content="Created in release 8008, Generation 3">
<SCRIPT type=text/javascript>//confidential_id=IBI_OptionsScript
var szHtmlAlias="/ibi_apps/ibi_html";var szRunTimeHtmlAlias="runTimeHtmlAlias";var cgipath="cgipath";var ibirls="ibirls3";var rltdyncalendar="rltdyncalendar";var map="ibimap";var olap="olap";var olappanebase="olappanebase";var olapdrill="olapdrill";var ibiOptions = new Array(cgipath,ibirls,rltdyncalendar);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>

<LINK id=css1 rel=stylesheet type=text/css href="/approot/web/themes/cppib-theme/jquery-ui-latest-custom.css" UserSuppliedFullPath="1">

<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>Incident Watch</TITLE><LINK id=ITEM2 rel=stylesheet type=text/css UserSuppliedFullPath="1" rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css"><LINK id=IBI_THEME_CSS rel=stylesheet type=text/css UserSuppliedFullPath="1" desc="Information Builders" rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css">
<SCRIPT for=window type=text/javascript eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
<SCRIPT style="Z-INDEX: 0" id=jQuery type=text/javascript src="/approot/web/jquery-latest-min.js"></SCRIPT>
 
<SCRIPT style="Z-INDEX: 0" id=jQueryUI type=text/javascript src="/approot/web/jquery-ui-latest-custom-min.js"></SCRIPT>
 
<SCRIPT style="Z-INDEX: 0" id=Util type=text/javascript src="/approot/web/cppib-util.js"></SCRIPT>

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



//Begin function document_onload
function document_onload() {

}
//End function document_onload

  $( function() {
    $( "#datepicker" ).datepicker();
  } );

</SCRIPT>

<SCRIPT for=document type=text/javascript eventname="onload">document.onload = function() { document_onload(); }</SCRIPT>
</HEAD>
<BODY class=IBI_ReportControlTarget style="OVERFLOW: auto" nextelementuniquenumber="3" maptype="0" thumbnailscale="4" elementtype="21" edaconnectionrequired="true">

<IFRAME title=Jira_Watch.fex id=report1 frameBorder=no scrolling=no style="HEIGHT: 600px; WIDTH: 1740px; POSITION: absolute; LEFT: 10px; Z-INDEX: 1; TOP: 140px; BACKGROUND-COLOR: white" elementtype="2" HEIGHTOLD="860" WIDTHOLD="1740" autoExecute="true" requests_list="0" name="report1"></IFRAME>
<LABEL class="IBIfield IBI_ReportControlLabel" id=label1 style="CURSOR: default; HEIGHT: 14px; WIDTH: 55px; POSITION: absolute; LEFT: 5px; Z-INDEX: 6; TOP: 12px" for=calendar1 name="calendar1">Start Date</LABEL>
<INPUT tabIndex=1 class="IBIfield IBI_ReportControlTarget IBI_CalendarControl" id=calendar1 style="OVERFLOW: visible; WIDTH: 60px; OVERFLOW-Y: visible; POSITION: absolute; LEFT: 65px; Z-INDEX: 7; TOP: 10px" spellcheck=false type=text size=5 hspace=0 elementtype="14" defaultselection="1" defaultlocation="0,0,21,77" boundtovariable="1" requiredfield="1" persistentuniqueid="compUid_1" rawvalue="2018/01/02" name="calendar1">
<LABEL class="IBIfield IBI_ReportControlLabel" id=label2 style="CURSOR: default; HEIGHT: 14px; WIDTH: 50px; POSITION: absolute; LEFT: 160px; Z-INDEX: 8; TOP: 12px" for=calendar2 name="calendar2">End Date</LABEL>
<INPUT tabIndex=2 class="IBIfield IBI_ReportControlTarget IBI_CalendarControl" id=calendar2 style="OVERFLOW: visible; WIDTH: 60px; OVERFLOW-Y: visible; POSITION: absolute; LEFT: 215px; Z-INDEX: 9; TOP: 10px" spellcheck=false type=text size=5 hspace=0 elementtype="14" defaultselection="1" defaultlocation="0,0,21,77" boundtovariable="1" requiredfield="1" persistentuniqueid="compUid_2" name="calendar2">
<INPUT tabIndex=4 class="IBIfield IBI_button IBI_btn-run" id=button3 style="HEIGHT: 22px; WIDTH: 38px; POSITION: absolute; LEFT: 645px; Z-INDEX: 12; TOP: 7px" onclick=OnExecute(this); type=button value=" " requests_list="0" name="button3">
<LABEL class="IBIfield IBI_ReportControlLabel" id=label3 style="CURSOR: default; HEIGHT: 14px; WIDTH: 80px; POSITION: absolute; LEFT: 315px; Z-INDEX: 17; TOP: 12px" for=combobox1 name="">Assignee Group </LABEL>
<br><br>
<p>Date: <input type="text" id="datepicker"></p>
 
<SELECT tabIndex=3 class="IBIfield IBI_ReportControlTarget IBI_rounded_s" id=combobox1 style="OVERFLOW: visible; WIDTH: 235px; OVERFLOW-Y: visible; POSITION: absolute; LEFT: 400px; Z-INDEX: 18; TOP: 10px" spellcheck=false size=1 defaultselection="1" defaultlocation="0,0,17,100" boundtovariable="1" requiredfield="1" persistentuniqueid="compUid_3"></SELECT> <INPUT id=layoutinfo style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden resourcectrlids="ITEM2;IBI_THEME_CSS" activereports="report1" name="inputhidden1"><INPUT id=ibiapp_app style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value=Osi ismre="1" name="ibiapp_app"><INPUT id=ibif_ex style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value=/WFC/Repository/Osi/JIRA/Incident_Review.htm name="ibif_ex"><xml id=focus_xmlelement><script type="text/xml" nextelementuniquenumber="4"><rootxmlnode focoption="_FOC_NULL"><variables><variable controltype="7" parametercreatedinreslay="0" type="default" desc="P_START_DATE" name="P_START_DATE" default="2018/01/01" textvarname="" accept="0" select="0" create="1"><link linktype="default" from="compUid_1"><condition default="1" name="Default" whattodowithcontrol="4" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0" modifiedrequest="0" displayfield="P_START_DATE" datafield="P_START_DATE" datasource="jira_sd_data.mas" ibif_ex="jira_sd_data" selectedvalue="2018/01/01" operation="" slider_range_from="" slider_range_to="" previewvalue="2018/01/01" sourcetype="typeMaster"><static_values><static value="2018/01/01" display="2018/01/01" selected="1" noinput="0"></static></static_values></data_info></condition></link><requestid id="0"></requestid></variable><variable controltype="7" parametercreatedinreslay="0" type="default" desc="P_END_DATE" name="P_END_DATE" default="2018/01/02" textvarname="" accept="0" select="0" create="1"><link linktype="default" from="compUid_2"><condition default="1" name="Default" whattodowithcontrol="4" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0" modifiedrequest="0" displayfield="P_END_DATE" datafield="P_END_DATE" datasource="jira_sd_data.mas" ibif_ex="jira_sd_data" selectedvalue="2018/01/02" operation="" slider_range_from="" slider_range_to="" previewvalue="2018/01/02" sourcetype="typeMaster"><static_values><static value="2018/01/02" display="2018/01/02" selected="1" noinput="0">
</static></static_values></data_info></condition></link><requestid id="0"></requestid></variable><variable controltype="7" parametercreatedinreslay="0" type="default" desc="P_ASSIGNEE_GRP" name="P_ASSIGNEE_GRP" default="FOC_NONE" textvarname="" accept="0" select="0" create="1"><link linktype="default" from="compUid_3"><condition default="1" name="Default" whattodowithcontrol="4" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0" modifiedrequest="0" displayfield="P_ASSIGNEE_GRP" datafield="P_ASSIGNEE_GRP" datasource="jira_sd_data.mas" ibif_ex="jira_sd_data" selectedvalue="FOC_NONE" operation="" slider_range_from="" slider_range_to="" previewvalue="FOC_NONE" sourcetype="typeMaster"><static_values><static value="_FOC_NULL" display="FOC_NONE" selected="1" noinput="0"></static></static_values></data_info></condition></link><requestid id="0"></requestid></variable></variables><input_controls><input_control bindcontrolid="compUid_1" elementtype="14" name="calendar1" id="calendar1" multiple="0" onetimepopulated="0"><link linktype="default" persistentuniqueid="compUid_1"><condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="1" modifiedrequest="0" datasource="/WFC/Repository/Osi/JIRA/sdate.fex" ibif_ex="/WFC/Repository/Osi/JIRA/sdate" addalloption="0" sourcetype="typeFex" cacheruntimedata="0" calendardata="0/0/-10;0/0/10" calendardatatype="1" ibiformat="YYMD" accept="0" operation="NONE" usecurrentdate="0" selectedvalue="2018/01/01" checkForDuplicateValues="0" displayfield="DT1" datafield="DT1" requestid="3"><![CDATA[]]></data_info></condition></link></input_control><input_control bindcontrolid="compUid_2" elementtype="14" name="calendar2" id="calendar2" multiple="0" onetimepopulated="1"><link linktype="default" persistentuniqueid="compUid_2"><condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0" modifiedrequest="0" datasource="jira_sd_data.mas" ibif_ex="jira_sd_data" addalloption="0" sourcetype="typeMaster" cacheruntimedata="0" calendardata="0/0/-10;0/0/10" calendardatatype="1" ibiformat="YYMD" accept="0" operation="NONE" usecurrentdate="1" selectedvalue=""><static_values><static value="" display="" selected="1" noinput="0">
								
</static></static_values></data_info></condition></link></input_control><input_control bindcontrolid="compUid_3" elementtype="8" name="combobox1" id="combobox1" multiple="0" onetimepopulated="0"><link linktype="default" persistentuniqueid="compUid_3"><condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="1" modifiedrequest="0" datasource="/WFC/Repository/Osi/JIRA/assignee_group.fex" ibif_ex="/WFC/Repository/Osi/JIRA/assignee_group" addalloption="1" sourcetype="typeFex" cacheruntimedata="0" accept="0" operation="NONE" checkForDuplicateValues="0" displayfield="ASSIGNEE_GROUP" datafield="ASSIGNEE_GROUP" requestid="6" dynalldisplayvalue="All"><![CDATA[]]></data_info></condition></link></input_control></input_controls><requests nextrequestsid="6"><request requestid="0" targettype="iframe" targetname="report1" sourcetype="typeFex" ibif_ex="/WFC/Repository/Osi/JIRA/Jira_Watch.fex" ibiapp_app="Osi" activereport="1" compoundreport="0" reportcolumns="INCIDENT_START_DATE,Issue,Summary,Group,Itsm Root Cause,Root Cause Osi,Business Function Affected,Start Date,Priority,ITSM_ROOT_CAUSE" reportrealcolumns="INCIDENT_START_DATE,ISSUE,SUMMARY,ASSIGNEE_GROUP,IRC,ROOT_CAUSE_OSI,BUSINESS_FUNCTION_AFFECTED,S_DATE,PRIORITY,ITSM_ROOT_CAUSE"></request></requests><other_bound_objects></other_bound_objects></rootxmlnode></script>
</xml></BODY>
<SCRIPT type=text/javascript>//confidential_id=IBI_loader
if(ibigblInitInfo.testOptions(rltdyncalendar) && (typeof setDateRange === 'function')){setDateRange();setupDocCalendars();}
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</SCRIPT>
</HTML>
<!-- cc 00000 -->


Fernando

This message has been edited. Last edited by: Fernando,


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
January 09, 2018, 01:06 PM
Francis Mariani
I think setting the datepicker class should be done in onInitialUpdate(), as per the instructions

// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports


Something like this:

function onInitialUpdate() {
    $( "#datepicker" ).datepicker();
}



Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
January 09, 2018, 01:57 PM
Fernando
Francis, Thank you for your answer. However, it did not change anything. It still does not work.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
January 09, 2018, 02:09 PM
Francis Mariani
Fernando, I assumed this is a Dev Studio HTML Composer GUI developed page, but this doesn't look like it was added by the GUI:


<p>Date: <input type="text" id="datepicker"></p>

There are usually a lot of HTML Composer GUI tags, like:

<INPUT style="Z-INDEX: 9; WIDTH: 75px; HEIGHT: 22px; TOP: 0px; LEFT: 0px" id=date_end tabIndex=8 hspace=0 maxLength=19 value=20140607 
size=19 persistentuniqueid="compUid_2" requiredfield="1" boundtovariable="1" defaultlocation="0,0,22,141" defaultselection="1" name="edit2">



Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
January 09, 2018, 02:17 PM
Tony A
When you execute your code, what are you seeing?

If I run it, I obviously don't have the same jQuery files withinan app folder named "web", so they're not loaded.

I do however, have the one installed with WebFOCUS (I'm using 8.2.01) and the date picker seems to be OK?

I'm fairly sure that WF 8.0.08 has jQuery loaded within HTML pages so you may be causing a conflict by adding your own?

Without having WF 8.0.08 on a VM to hand, I cannot test and can only advise that it appears to be OK in WF 8.2.01 without your own jQuery libraries being loaded.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
January 09, 2018, 03:45 PM
Fernando
Francis, I added the control manually.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
January 10, 2018, 09:13 AM
Francis Mariani
Fernando, all that extra HTML and JS that HTML Composer adds at the top seems to suggest that you added the control manually into a GUI generated page. You what my opinion is, right? Just build it yourself, without the extra stuff that HTML Composer adds. I KNOW there are fine examples of non-GUI HTML pages at your fingertips Smiler


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
January 11, 2018, 10:39 AM
Fernando
Hey Francis, I had a lot of WebFOCUS functionality that I wanted to keep.

I did get my screen to work by recreating in App Studio and the jquery calendars work there.

Thanks for your help

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
January 11, 2018, 11:07 AM
CoolGuy
All,

Just use the newer HTML5 input for a date type:

https://developer.mozilla.org/...L/Element/input/date


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
January 11, 2018, 11:38 AM
Francis Mariani
This looks like code, not GUI, or does App Studio 8.2.* allow you to add this kind of element?


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
January 11, 2018, 11:48 AM
CoolGuy
Francis,

It is code. Totally unrelated to the GUI. I avoid the tool when possible. I like to build things w/o it nowadays since I can't rely on it to work a lot of the time. Plus I can migrate my own in-house code over much easier than if I went with their generated code from their tools (took eons to rebuild all the HTML from 7.6 to 8.1).

This message has been edited. Last edited by: CoolGuy,


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.