Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Adding Monthpicker widget functionality
Go
New
Search
Notify
Tools
Reply
  
[SOLVED] Adding Monthpicker widget functionality
 Login/Join
 
Platinum Member
posted
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: 100 | Registered: September 10, 2013Reply With QuoteReport This Post
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: 1643 | Location: Enschede, Netherlands | Registered: August 12, 2010Reply With QuoteReport This Post
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: 100 | Registered: September 10, 2013Reply With QuoteReport This Post
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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5601 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
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: 1643 | Location: Enschede, Netherlands | Registered: August 12, 2010Reply With QuoteReport This Post
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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5601 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5601 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
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...Frowner
Thanks!


WF8.105M, Apache, Azure SQL Server
 
Posts: 4 | Location: Baltimore, MD | Registered: July 27, 2015Reply With QuoteReport This Post
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: 1110 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
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, 2015Reply With QuoteReport This Post
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: 1110 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
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, 2005Reply With QuoteReport This Post
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: 1110 | Location: USA | Registered: January 27, 2015Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Adding Monthpicker widget functionality

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.