Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] JQuery Date Picker is not working

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] JQuery Date Picker is not working
 Login/Join
 
Guru
posted
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, 2006Report This Post
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, 2010Report This Post
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, 2005Report This Post
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, 2005Report This Post
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, 2005Report This Post
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, 2006Report This Post
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, 2010Report This Post
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, 2005Report This Post
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, 2006Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] JQuery Date Picker is not working

Copyright © 1996-2020 Information Builders