Focal Point
DS HTML Composer: Calendar control icon

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/9467085216

November 08, 2011, 05:37 PM
Francis Mariani
DS HTML Composer: Calendar control icon
Here's a more difficult question than my last one!

I'm using JavaScript to disable certain controls depending on which radio button was clicked on.

For Calendar controls, I am able to disable the text box but not the calendar image. It seems this image is placed on the page via IBI JavaScript, it does not appear in the HTML. How do I refer to this image?

This message has been edited. Last edited by: Francis Mariani,


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
November 08, 2011, 05:48 PM
Waz
If you add the javascript prompt('',document.documentElement.outerHTML), you can get the generated HTML, and just have a look at where the images are, and how they are represented.

This should only work in IE.

Below is some Quickie HTML that shows what you get.

<html>
 <head>
  <title> Show HTML </title>
 </head>

 <body>
  <input type=button onclick="prompt('',document.documentElement.outerHTML)" value='Show HTML'>
 </body>
</html>



Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

November 08, 2011, 05:57 PM
Francis Mariani
Waz,

Thanks for the tip.

Meanwhile I used Firefox and Firebug to inspect the element and I found this:

<a name="PDTSPEC_img" href="javascript: PDTSPEC_calendar.show()">
<img width="16" height="16" border="0" style="position: absolute; top: 36px; left: 345px; z-index: 10000;" alt="click to select a date using the calendar" src="http://192.168.28.43:8080/ibi_html/javaassist/ibi/html/maint/dynCalendar.gif">
</a>

PDTSPEC is my Calendar control. I used
  document.getElementsByName('PDTSPEC_img').disabled = true;
to disable this anchor, but, though I got no errors, this did not disable the pop-up calendar. Maybe I'll get more info with your method.

Thanks,


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
November 08, 2011, 06:05 PM
Waz
You may have to change the href to stop it.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

November 08, 2011, 06:06 PM
Francis Mariani
For name="PDTSPEC_img" , if I can change or disable the JS href="javascript: PDTSPEC_calendar.show() I could make it work...


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
November 08, 2011, 06:14 PM
Francis Mariani
I tried
  document.getElementsByName('PDTSPEC_img').href = 'javascript:void()';
with no luck.


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
November 08, 2011, 06:51 PM
Waz
I found this js function.
function disableEnableAnchor(obj, disable) {
    if(disable)
    {
        var href = obj.getAttribute("href");
        if(href && href != "" && href != null)
            obj.setAttribute('href_bak', href);

        obj.removeAttribute('href');        
   }
   else {
    var href_bak = obj.attributes['href_bak'].nodeValue;        
    obj.setAttribute('href', href_bak);
    }
}


It seems to work, tested in IE.

Make sure that your call to the function is disableEnableAnchor(document.getElementsByName('PDTSPEC_img')[0],true);.
Note the [0], as a getElementsByName will return an array.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

November 09, 2011, 05:00 AM
Wep5622
quote:
document.getElementsByName('PDTSPEC_img')

That returns an Array of elements (all the elements with that name), not a single element.

I'm also doubting whether this would work in Internet Explorer, as it tends to confuse the functions getElementsByName() and getElementsByTagName().

ISTM that this is a case of improperly generated HTML again: that name-attribute should have been a unique id-attribute, which you would have been able to reference with getElementById() [note the lack of a plural form to "Element" there].

Anyway, try using:
document.getElementsByName('PDTSPEC_img')[0].style.display = "none";



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 :
November 09, 2011, 08:10 AM
<MLerner>
I worked with one of our support representatives on this exact question about a year ago. The customer asking was on 7.6.10, so this may have changed. Below is the solution we ended up providing. Note: We were not actually able to disable the image, we just made it's size 0. Perhaps changing the visibility would have been better, but for some reason I think that failed to work as I would have tried that first.

________________________________________________________________________________

This must be done in the custom onInitialUpdate() funtion. Several things must
be done to make the calendar nonfunctional/disabled:
The textbox for the calendar must be disabled.
Reduce the size of the calendar object to zero.

Here is an example for an HTML with a single calendar control created by
the HTML Layout Painter:

function onInitialUpdate()
{
document.getElementById("Calendar1").disabled=true;
document.getElementById("dynCalendar_layer_0").style.width=0;
document.getElementById("dynCalendar_layer_0").style.height=0;
document.getElementById("dynCalendar_layer_0").style.border=0;
}

Please note that dyncalendar_layer_# increments per calendar. So Calendar
2 would be dynCalendar_layer_1... etc... You can either write a FOR
loop to hit all of them, or you can put the lines in as many times as needed.
November 09, 2011, 09:47 AM
Francis Mariani
Matthew (and Waz)

Thanks for the code suggestions - I will give them a try.


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
November 10, 2011, 11:08 AM
David Glick
Francis,

As you have found, you cannot disable the image of the calendar control. You should open a case requesting that as a new feature.

I can tell you that we have added this ability in release 8. If you open a case, we can look into porting it to a prior release.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
November 10, 2011, 10:56 PM
Francis Mariani
If the generated code for the anchor and/or image tags had included id names, this would have been easier to solve.


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
November 10, 2011, 11:12 PM
Waz
You should still be able to do a getElementsByTagName, and sift through the INPUT types.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

November 11, 2011, 04:10 AM
Wep5622
Not so much, I'm afraid - the calendar control image is not an INPUT type.

Using an XPath expression ("//a[name='PDTSPEC_img']") would work too, once you get your hands on some functions that execute those browser independently - Internet Explorer just has to do that differently, as usual.

I do recall seeing some XPath functionality in the ibirls3.js, it's quite possible you can "abuse" some of those functions. Libraries like JQuery, Prototype or Dojo can do this for you too.


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 :
November 11, 2011, 06:58 AM
MattC
Francis - I just had the same issue come up this week. There is a way to do this. Not sure if it's the right way. Below is what we I did.

In the Composer itself, do not set the property of hidden in the Layout section for the calender, leave it default.

 //Begin function window_onload
 
var valid;
var RadioSelection; 
 
function window_onload() {
 
UpdateData();
 
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
 
//Set the default radio button value which is 1
 
RadioSelection = document.forms["form1"].elements["radio1_0"].value;
 
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate() -1
var year = currentTime.getFullYear()
 
 
document.forms["form1"].calendar1.value = (month + "/" + day + "/" + year);
 
 
  //get all images on the page into array
 var images=document.getElementsByTagName("img");
 
 //get the number of images in array
 var numImages = images.length;
 
 //Loop through images and see if it is a dynCalendar
 for (i=1;i<numImages;i++){
 if (images[i].src.indexOf("dynCalendar.gif")>0)
 {
 //If it is, hide
 images[i].style.visibility                             = 'hidden';
 document.forms["form1"].calendar2.style.visibility     = 'hidden';
 label5.style.visibility                                = 'hidden'; 
 	}
  }
}
 
function VALUE_1_onclick(ctrl) {
 
   //Set the radio value for the radio button.	
   RadioSelection = document.forms["form1"].elements["radio1_0"].value;
 
//alert(document.forms["form1"].elements["radio1_0"].value);
//alert('VALUE_1_onclick - 1 clicked');
	
 
   document.forms["form1"].edit1.value                = '';
   document.forms["form1"].calendar2.value            = '';
 
   document.forms["form1"].edit1.style.visibility     = 'hidden';
   label1.style.visibility                            = 'hidden'; 
 
   document.forms["form1"].calendar2.style.visibility = 'hidden';
   label5.style.visibility                            = 'hidden'; 
 
  //get all images on the page into array
 var images=document.getElementsByTagName("img");
 
 //get the number of images in array
 var numImages = images.length;
 
 //Loop through images and see if it is a dynCalendar
 for (i=1;i<numImages;i++){
 if (images[i].src.indexOf("dynCalendar.gif")>0)
 {
 //If it is, hide
 images[i].style.visibility='hidden';
    }
  }
}
 
 
function VALUE_2_onclick(ctrl) {
 
   //Set the radio value for the radio button.	 
   RadioSelection = document.forms["form1"].elements["radio1_1"].value;;
   //alert(RadioSelection);
   //alert('VALUE_2_onclick - 2 clicked');
  
   document.forms["form1"].edit1.style.visibility     = 'visible';
   label1.style.visibility                            = 'visible'; 
   
   document.forms["form1"].calendar2.style.visibility = 'visible';
   label5.style.visibility                            = 'visible'; 
 
 //get all images on the page into array
 var images=document.getElementsByTagName("img");
 
 //get the number of images in array
 var numImages = images.length;
 
 //Loop through images and see if it is a dynCalendar
 for (i=1;i<numImages;i++){
 if (images[i].src.indexOf("dynCalendar.gif")>0)
 {
 //If it is, hide
 images[i].style.visibility='visible';
    }
  }
} 



WebFOCUS 8.1.05
November 11, 2011, 11:14 AM
Francis Mariani
MattC, This looks really exciting - I'll give it a try later today. Thanks so much for sharing your code - a much quicker solution than opening a case to ask for a "New Feature Request".

This message has been edited. Last edited by: Francis Mariani,


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
May 02, 2013, 12:14 PM
Trilochan
Thanks MattC.

I am looking into this type of code.

Its very usefull.


WebFOCUS 7.6.1
Windows, All Outputs
July 24, 2013, 08:12 AM
MattC
quote:
Originally posted by David Glick:

I can tell you that we have added this ability in release 8. If you open a case, we can look into porting it to a prior release.


David - I am revisiting this exact JS that I posted in this thread finding that some of my JS doesn’t function as expected in WF 8. That’s not my issue as I am correcting what does not work, but I am interested in this new feature in 8 to hide the calendar icon. Is there some new approach to follow?

I set the controls hidden in the control properties and this is the JS I use to show or hide based on the radio button, but I am not sure how to easily show/hide the icon in this new feature that is in WF 8

 //Begin function radio1_onclick
function radio1_onclick(ctrl) {
 
        var RadSel = IbComposer_getCurrentSelection('radio1');
 
      //alert (RadSel);
 
  if (RadSel==1)
     { 
      IbComposer_showHtmlElement('label1', false);    
      IbComposer_showHtmlElement('edit1', false); 
      IbComposer_showHtmlElement('label1', false);
      IbComposer_showHtmlElement('calendar2', false);
      IbComposer_showHtmlElement('label5', false);
     }
  if (RadSel==2)
     {
      IbComposer_showHtmlElement('label1', true);    
      IbComposer_showHtmlElement('edit1', true); 
      IbComposer_showHtmlElement('label1', true);
      IbComposer_showHtmlElement('calendar2', true);
      IbComposer_showHtmlElement('label5', true);
     }
 
}  

Thanks Matt

This message has been edited. Last edited by: MattC,


WebFOCUS 8.1.05
July 25, 2013, 09:34 AM
David Glick
MattC,

In Release 8, there is a "Read only" property for the calendar that makes the textbox section unable to be used, forcing use of the icon. This is the usual request we get since the icon enforces the range and the format of the date value needed by the report/chart.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
July 25, 2013, 12:31 PM
j.gross
David --

Has the problem with dynamic date-validation ranges (Case 73322521) been corrected in 8.0?


- Jack Gross
WF through 8.1.05
July 25, 2013, 01:13 PM
MattC
I was hoping for a different answer. The "Read only" property may come in handy down the road. I was hoping for an "easy" button on hide/show the calendar image when hiding the control itself.


For now I just implemented some JS to take care of it.


WebFOCUS 8.1.05
July 26, 2013, 10:14 AM
David Glick
MattC,

You can set disabled and that will disable the entire thing, though I don't know why you would want to do that.

Jack,

That case is closed because the icon is the only part that honors the range. The text area is just a text input that allows anything to be typed.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
July 26, 2013, 12:06 PM
Doug
Did you try something like this, after hiding the text and labels?
//Begin function HideCalendars
function HideCalendars(ctrl)
    {
 document.getElementById("calendar1").style.visibility = 'hidden';
 document.getElementById("calendar2").style.visibility = 'hidden';
	images = document.getElementsByTagName("img");
	numImages = images.length;
	//Loop through images and see if it is a dynCalendar
	for (i=0;i<numImages;++i) {
		if (images[i].src.indexOf("dynCalendar.gif") > 0) {
  			images[i].style.visibility = 'hidden';
		}
	}
    }
// End Function HideCalendars

July 26, 2013, 01:30 PM
J
When doing a dynamic range with the calendar control in 7.7.03, the icon only appears in IE. Also, chaining does not work properly period. Not sure if the HF corrects this.


WebFOCUS 7.7.03/8.0.08
Dev Studio 7.7.03/8.0.08
App Studio 8.0.08
Windows 7
ALL Outputs