[SOLVED] Adding Monthpicker widget functionality

Hi,

I am trying to incorporate the Monthpicker widget into my html. So far, i was able to populate the widget. But when i clicked on a month, the value does not get populated in the edit box.

]

I am using the Monthpicker.js and Monthpicker.css files from https://github.com/KidSysco/jq...cker/tree/master/src

My html code is

<!DOCTYPE html>
<html><!-- Copyright 1996-2013 Information Builders, Inc. All rights reserved. --><head><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="mycharsetmeta" http-equiv="Content-Type" content="text/html; charset=WINDOWS-1252"><meta name="Generation" content="Created in release 8105, Generation 4"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
//confidential_id=IBI_OptionsScript
var bRuntimes=true;var szHtmlAlias="./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 emf="ib_composer_emf";var ibiOptions = new Array(cgipath,ib_composer);if(typeof(szRunTimeHtmlAlias) === 'string' && szRunTimeHtmlAlias.indexOf('/') == 0)szHtmlAlias=szRunTimeHtmlAlias;document.write('<script src="'+szHtmlAlias+'ibigbl.js" type="text/javascript"><\/script>');</script><script type="text/javascript">
//confidential_id=IBI_ibigblloadCss
if(typeof ibigblloadCss === 'function'){ibigblloadCss(null);addIntlTranslatedJS("composertrans.js");}else {alert("JavaScript alias './ibi_html/'  is not valid.");window.location("about:blank");}</script><title>HtmlPage</title><script type="text/javascript">
//confidential_id=clientEventHandlersJS

if(typeof(bRuntime) != 'undefined') {
// TODO: Add your inline runtime code here
}
//Begin function window_onload
function window_onload() {
UpdateData();
LoadCusMthWidget();
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload
// Load Custom Month Widgets
function LoadCusMthWidget(){
$('#demo1').MonthPicker({ StartYear: 2017,  MinMonth: -29, MaxMonth: 0, ShowIcon: false });
}
</script><style type="text/css">.internal_default {
	
}
</style><!--//confidential_id=focus_xmlelement
<rootxmlnode focoption="_FOC_NULL" nextelementuniquenumber="1"><html_elements><html_body thumbnailscale="4" use_appl_css="no" maptype="0" autofitchildren="no" mobiledocument="no" edaconnectionrequired="false" ibiapp_app="tm ibisamp" ismre="1" ibif_ex="/WFC/Repository/tm/overall/test1.htm"><html_event eventname="load" eventhandlername="window_onload"/><layer name="default"/>
</html_body><html_element bindcontrolid="demo1" layername="default" elementtype="7" inputcontrol="1" myviewonautofit="dontyouever" defaultselection="1" controltype="7" 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" sourcetype="typeMaster"></data_info></condition></link><data_info/></html_element><html_element bindcontrolid="demo1" inputcontrol="1" onetimepopulated="1"><link linktype="default"><condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0"><data_info datatype="0"></data_info></condition></link></html_element><html_element rtFileName="htmlpathsub/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css" bindcontrolid="LINK3" type="cssfile"/><html_element rtFileName="htmlpathsub/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css" bindcontrolid="IBI_THEME_CSS" desc="Information Builders" type="cssfile"/><html_element rtFileName="/WFC/Repository/tm/common/TM.css" bindcontrolid="LINK1" type="cssfile"/><html_element rtFileName="/WFC/Repository/COMMON/style/MonthPicker.css" bindcontrolid="LINK2" type="cssfile"/><html_element rtFileName="/WFC/Repository/COMMON/style/MonthPicker.js" bindcontrolid="SCRIPT1" type="script"/></html_elements><variables></variables><requests>
	</requests><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"><input tabindex="1" class="IBI_ReportControlTarget IBI_rounded_s internal_default" id="demo1" style="left: 250px; top: 90px; width: 130px; position: absolute; z-index: 1;" type="text" name="demo1">
</body><script type="text/javascript">
//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</script></html>

Thank you

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

WebFOCUS
7703/7705/8105m/8201m/8202m

Posts: 99 | Registered: September 10, 2013

Wep5622

Virtuoso

posted

Hide Post

Are you certain that you don't have multiple elements with id 'demo1'?
Are there any errors on the javascript console?
Does it work in a simple (hand-crafted) HTML, without all the stuff IBI generated?

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

WF1326

Platinum Member

posted

Hide Post

quote:
Originally posted by Wep5622:
Are you certain that you don't have multiple elements with id 'demo1'?
Are there any errors on the javascript console?
Does it work in a simple (hand-crafted) HTML, without all the stuff IBI generated?

There is only one id with 'demo1' and no errors showed in the console. I tried the concept on a simple html outside of webfocus and it worked without any issues. Here is the code

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="..\MonthPicker.js"></script>
    <link rel="stylesheet" type="text/css" href="..\MonthPicker.css" />
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
        $(function() {
            $('#demo1').MonthPicker({
                StartYear: 2017,
                MinMonth: -29,
                MaxMonth: 0,
                ShowIcon: false
            });
        });
    </script>
</head>

<body>
    <input id="demo1" type="text" />
</body>
</html>

WebFOCUS
7703/7705/8105m/8201m/8202m

Posts: 99 | Registered: September 10, 2013

Ignored post by WF1326 posted

Show Post

Tony A

Expert

posted

Hide Post

quote:
LoadCusMthWidget();

Instead of calling this from within the "window_onload" function, add the "onInitialUpdate" function and call it from within that.

The "onInitialUpdate" function is designed for things such as this whereas the "window_onload" may not have completed the DOM build before your function is called.

Use the developer tools for the browser to check that your JS library is loaded and to step through, checking for errors etc.

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

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

You didn't include jquery in your IBI-generated html, did you? That may cause a nasty timing issue where the MonthPicker gets initialised using the IBI-provided jquery, while afterwards that gets replaced with the version you provide. That would probably loose state, including that of the MonthPicker.

Checking whether it does work from the onInitialUpdate() function is worth trying. However, the widget does display, which seems to suggest that:

a JQuery library finished loading
the element referenced with $('#demo1') exists in the DOM at that point,
the MonthPicker.js finished loading.

That seems to indicate that the call to LoadCusMthWidget() is not too early (unless above scenario is happening).

Nevertheless, verifying this with calls to console.log() or alert() should help diagnosing this.

One word of warning with console.log(); when you log an object value (as opposed to a scalar value) and click on it for details, you get the contents of the object in the state it is in when you click it, not the state when it got logged to the console. If you want to check its state when it was logged, log the actual properties of the object that you want to verify.

Another possibility; perhaps the JQuery libraries provided with IBI are not compatible with the monthpicker. Does your simple html still work if you reference IBI's provided jquery libraries?

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

Tony A

Expert

posted

Hide Post

I placed this within an app folder with the necessary changes to the JS and CSS etc. and it does load OK as WEP suggests. I still tend to place all calls within the "onInitialUpdate" function though.

I also stepped through the process when clicking on a month "button" and it appears that a null value is returned to the function. I can't tell whether this gets populated into the control but there are no other errors that I can see.

I would highlight what WEP suggests are regards the version of jQuery included within the HTML page. Check it using the browser developer tools as I suspect that you will find the version loaded is not recent.

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

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Tony A

Expert

posted

Hide Post

I also pushed this through using the jQuery libraries from the same location as the WF built page and it does function with the jQuery.min.js (version v2.1.4) OK and returns the correct value.

Retesting the WF created one (even recreating a copy of you sample from scratch) and the returned value within the MonthPicker.js is null.

You need to dig further I'm afraid.

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

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Melsmith

Member

posted

Hide Post

Hi WF1326,
Were you able to get this Monthpicker to work? I just started trying but seems like I might not get very far...

Thanks!

WF8.105M, Apache, Azure SQL Server

Posts: 4 | Location: Baltimore, MD | Registered: July 27, 2015

Ignored post by Melsmith posted

Show Post

CoolGuy

Virtuoso

posted

Hide Post

Would the officially supported jQueryUI date picker not work?

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

Posts: 1113 | Location: USA | Registered: January 27, 2015

Ignored post by CoolGuy posted

Show Post

Melsmith

Member

posted

Hide Post

Hi CoolGuy,
Hmmm it might. I'm curious for future needs, how would I know that jQueryUI date picker is "officially supported"? In this case, I need something that guides the user to choose only a month/year combo. Showing them a _day_ picker but then only using the month/year would be confusing.

I was able to get the MonthPicker to work with a little fussing. I had to extract the year and month and then update the value of the edit box instead of letting MonthPicker do it automatically.

jQuery('.MonthPickerClass').MonthPicker({
ShowIcon: false,
MinMonth: '-2y -6m',
MaxMonth: 0,
OnAfterChooseMonth: function( selectedDate ){
var myMonth = selectedDate.getMonth()+1;
var myYear = selectedDate.getYear()+1900;
var myMonthYear = myMonth +'/'+myYear;
document.getElementById("Edit1").value=myMonthYear;
}
});

WF8.105M, Apache, Azure SQL Server

Posts: 4 | Location: Baltimore, MD | Registered: July 27, 2015

Ignored post by Melsmith posted

Show Post

CoolGuy

Virtuoso

posted

Hide Post

Melsmith,

jQueryUI along with jQuery are used everywhere by many. Huge community behind it. I wouldn't be too worried about future support.

As for your scenario, and looking at your use case--in that you only are concerned for the month as a whole--it wouldn't make much sense for the user to be able to pick a day from a month, huh? haha Maybe you're better off w/a custom library then.

Sorry for the confusion.

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

Posts: 1113 | Location: USA | Registered: January 27, 2015

Ignored post by CoolGuy posted

Show Post

Francis Mariani

Expert

posted

Hide Post

What about keeping it simple - two drop-down boxes - one for month and one for year?

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

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

CoolGuy

Virtuoso

posted

Hide Post

Francis,

Who wants simple these days? Get with the times man! ;-) Kidding! Yeah, that would be a good solution. Just write up some requests that you could tie to the drop downs (external procedures). Good idea!

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

Posts: 1113 | Location: USA | Registered: January 27, 2015

Ignored post by CoolGuy posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[SOLVED] Adding Monthpicker widget functionality

Focal Point | Privacy Statement | Terms of Service