[SOLVED] JQuery Date Picker is not working

I created the simplest possible Dev Studio screen. A text input only. I then added the javascript items for JQuery and datepicker. I know that the JQuery javascript file is good since it works with other pages. The datepicker is not working.

Help,

Fernando

  
<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);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><LINK id=ITEM2 rel=stylesheet type=text/css 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 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 id=jQuery style="Z-INDEX: 0" src="/approot/web/jquery-latest-min.js" type=text/javascript>
</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

    $(document).ready(function () {

    $( "#edit1" ).datepicker();

    });

</SCRIPT>
</HEAD>
<BODY class=IBI_PageBg style="OVERFLOW: auto" nextelementuniquenumber="1" maptype="0" thumbnailscale="4" elementtype="21" edaconnectionrequired="false"><INPUT tabIndex=1 class="IBIfield IBI_ReportControlTarget  IBI_rounded_s IBI_TextBox" id=edit1 style="WIDTH: 110px; POSITION: absolute; LEFT: 50px; Z-INDEX: 1; TOP: 50px" type=text defaultselection="1" persistentuniqueid="compUid_1" name="edit1"><INPUT id=layoutinfo style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden resourcectrlids="ITEM2;IBI_THEME_CSS" 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/DateTry.htm name="ibif_ex"><xml id=focus_xmlelement><script type="text/xml" nextelementuniquenumber="2"><rootxmlnode focoption="_FOC_NULL"><variables></variables><input_controls><input_control bindcontrolid="compUid_1" elementtype="7" name="edit1" id="edit1" multiple="0" onetimepopulated="1"><link linktype="default" persistentuniqueid="compUid_1"><condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0" modifiedrequest="0" accept="0" sourcetype="typeMaster"><static_values><static value="" display="" selected="0" noinput="0"></static></static_values></data_info></condition></link></input_control></input_controls><requests></requests><other_bound_objects></other_bound_objects></rootxmlnode></script>
</xml></BODY>
<SCRIPT type=text/javascript>//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</SCRIPT>
</HTML>
<!-- cc yvvt -->

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

Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03

Posts: 278 | Registered: October 10, 2006

Wep5622

Virtuoso

posted

Hide Post

Not like that, no.

Your problem is that at the time your Javascript code executes, the element with id '#edit1' does not exist yet in the DOM.

If you would add your code to the body of the window_onload function, your chances would be better.

Or put it in an onInitialUpdate function, as suggested in the comments.

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

Don Garland

Guru

posted

Hide Post

Trying to understand what behavior you are trying to create. When I run your code (adding HTMLFORM BEGIN and END) I get a edit box.

What's not working. What were you expecting to happen with this code?

WebFOCUS Administrator @ Worldpay FIS
PROD/DEV/TEST: 8204, SANDBOX: 8206 soon - BIP, Reportcaster, Resource Manager, EUM, HyperStage soon, DB: HIVE,Oracle,MSSQL

Posts: 291 | Location: Greater Cincinnati | Registered: May 11, 2005

Ignored post by Don Garland posted

Show Post

Doug

Expert

posted

Hide Post

I'm Trying to understand why you're using a jQuery Date Picker when WebFOCUS Has one that does "everything a date picker needs"...

In FOCUS Since 1983 ~ from FOCUS to WebFOCUS.
Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206

Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005

Ignored post by Doug posted

Show Post

Don Garland

Guru

posted

Hide Post

I moved his code to onload and oninitial update and it didn't work. Why not just add the calendar control using the GUI?

WebFOCUS Administrator @ Worldpay FIS
PROD/DEV/TEST: 8204, SANDBOX: 8206 soon - BIP, Reportcaster, Resource Manager, EUM, HyperStage soon, DB: HIVE,Oracle,MSSQL

Posts: 291 | Location: Greater Cincinnati | Registered: May 11, 2005

Ignored post by Don Garland posted

Show Post

Fernando

Guru

posted

Hide Post

Hi All, I using a JQuery datepicker since I want to add functionality to it. Specially, I need two calendars, a start date and an end date. The user should not be able to pick an end date that before the start date. They should not be able to pick a start date that is after the end date.

Fernando

Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03

Posts: 278 | Registered: October 10, 2006

Ignored post by Fernando posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

Ah, seems like I overlooked your call to $(documet).ready - that should work just fine.

However, looking at the Javascript console in your browser will probably reveal what the problem is.

With your code, I initially had to change the URL to the jquery library. After that, it turned out that you don't include the jquery-ui library nor the related CSS file that contains the date picker widget.

Next, you will probably want to provide settings to the datepicker to display an icon.

The code snippet that works for me (URL's at your site will be different):

<SCRIPT id=jQuery src="/approot/general/jquery/js/jquery-1.12.3.min.js" type="text/javascript"></SCRIPT>
<SCRIPT id=jQueryUI src="/approot/general/jquery/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></SCRIPT>
<link id=jQueryUICSS rel="stylesheet" href="/approot/general/jquery/ui/1.11.4/jquery-ui.min.css" type="text/css"></link>

<SCRIPT>

$(document).ready(function () {
    $( "#edit1" ).datepicker({ showOn: "both", buttonImage: "/approot/general/jquery/css/ui-lightness/images/calendar.gif", buttonImageOnly: true });
});

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

Don Garland

Guru

posted

Hide Post

Wep5622, you've helped two birds with one post. I have the same requirement pending.

My assumption is I can use jquery to operate on my existing, manually created calendar control but I never could get those commands to work.

Thank you for the details

WebFOCUS Administrator @ Worldpay FIS
PROD/DEV/TEST: 8204, SANDBOX: 8206 soon - BIP, Reportcaster, Resource Manager, EUM, HyperStage soon, DB: HIVE,Oracle,MSSQL

Posts: 291 | Location: Greater Cincinnati | Registered: May 11, 2005

Ignored post by Don Garland posted

Show Post

Fernando

Guru

posted

Hide Post

Wep5622

That worked.

Thanks.

Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03

Posts: 278 | Registered: October 10, 2006

Ignored post by Fernando posted

Show Post