[SOLVED] JQuery Date Picker is not working

March 08, 2018, 09:11 AM

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,

March 08, 2018, 10:49 AM

Wep5622

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.

March 08, 2018, 10:49 AM

Don Garland

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?

March 08, 2018, 02:04 PM

Doug

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

March 08, 2018, 02:58 PM

Don Garland

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

March 08, 2018, 03:26 PM

Fernando

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

March 09, 2018, 05:36 AM

Wep5622

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 });
});

March 09, 2018, 09:06 AM

Don Garland

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

March 12, 2018, 08:48 AM

Fernando

Wep5622

That worked.

Thanks.