I have a form where I have date fields that need to be hidden or displayed, depending on other widgets on the screen. I have the fields working as they should, but the little calendar gif that connects to the date widget doesn't hide and display along with the date field it's attached to. I see that the date widget is built in the xml block that follows at the end of the code.

Here's the question -- is there a way to hide and display that little calendar gif dynamically in JavaScript? Presumably I'd set the style on it somewhere, but I can't figure out where.

Please note that I'm hand-coding this, so there's no dependency upon the user interface limitations to get this done.

This install is WF 7.7 on NT.

J.

This message has been edited. Last edited by: <Kathryn Henning>,

John,

There was a very long thread on this back in March 2008 - almost exactly 6 years ago! Not sure whether it is still relevant but I am guessing that it might be. However, if not then at least it may give you some ideas?

link

T

I don't think there's a way to hide the Calendar control gif button using normal JavaScript. That thing is injected into the page without an id, so it's near impossible to reference it.

<img width="16" height="16" style="left: 105px; top: 35px; position: absolute; z-index: 10000;" alt="click to select a date using the calendar" src="http://dviappvmwebf10/ibi_html/javaassist/ibi/html/maint/dynCalendar.gif" border="0"/>

But you may be able to use one of the JavaScript functions supplied by the HTML Composer "API". IbComposer_showHtmlElement "shows or hides an HTML element".

Something like this:

function checkbox1_onclick(ctrl){
    IbComposer_showHtmlElement('elementID', false);
}

If you dare, take a look at the "Designing a User Interface for a Web Application With the HTML Composer" document.

I suppose that you could assign each calendar control image an ID on initial load so that it makes it easier to identify them individually in subsequent processing?

T

I kind of have something working, but it's all or nothing -- all the calendar gifs hide or all are displayed. My guess is that I could plonk them individually but I wouldn't be able to guarantee the order.

It works similar to the code from that other link, though mine is a little more general. Here's the heart of it:

function setVisibilityAllCalendarWidgets(attribute, value, visibility)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
   {
    if (allElements[i].getAttribute(attribute) == value)
    {
      allElements[i].style.visibility = visibility;
    }
  }
}

The call is made like this:

setVisibilityAllCalendarWidgets("src", "http://mvagbwf1/ibi_html/javaassist/ibi/html/maint/dynCalendar.gif", "hidden");

The problem is that the image itself doesn't have an ID set on it. Its enclosing hot link does, but that doesn't give you the ability to hide the enclosed gif. I think you could cheat though, by nesting each date field inside a Div and then perform the function shown above on that particular Div only. You'd have to hand code that of course, but that's not a big deal. Send it the ID of the Div as well and only search within it. I don't need that right now, so I'll "leave it as an exercise for the student."

The effect is very nice though -- my users can select by day, week, month, quarter or year and have start and end dates auto-filled, or in a pinch use the date-picker tool. The date tool isn't slick by any stretch so I like to avoid it whenever I can. No date-picker is all that user friendly, the one in WF seems slower than most when you're scrolling.

Thank you all for chiming in. Sometimes this stuff ain't so easy.

J.

quote:

Originally posted by Tony A:
I suppose that you could assign each calendar control image an ID on initial load so that it makes it easier to identify them individually in subsequent processing?

I don't think you can. That code is dynamically generated. I think wrapping it in a Div tag is about the best you can do, and would likely do the trick.

quote:

Originally posted by Francis Mariani:
If you dare, take a look at the "Designing a User Interface for a Web Application With the HTML Composer" document.

Not me buddy! That ship sailed long ago!

S.

The following thread contains an example of hiding/showing user web page controls, based on user triggered events:
http://forums.informationbuild...287092626#1287092626
The example uses the jQuery show() / hide() methods.

John, which Calendar controls are you using - sounds like they're the HTML Composer ones. If so, use the API function to hide the Calendar control - it should hide the gif as well.

This works on Maintain forms. Can it be tweaked for your needs?

document.getElementsByTagName('a')['EditBox1']. style.display = ‘none’ // don’t show icon



document.getElementsByTagName('a')['EditBox1']. style.display = ‘’ // show icon



Replace EditBox1 with object name that calendar is attached to.


Mark

I've been trying to hide those in Maintain at another customer site for years.

I'll look into it to see if I can make it work here as well, but eyeballing what you've written I don't think it will. I tried hiding the hotlink tag (the 'a') and it did not hide the widget. I may have missed something though.

J.

I realize this is from a couple years ago...but I just went through this deal with hide/showing the calendar. I found that by moving the calendar into a panel then hide/showing the panel allowed the icon to toggle along

Yes, "panel" seems to be the key word in your response. I have placed them into a Div with mixed success, and I've searched for them via the shape of their id which changed in version 8.

You're the second person in two days to say use a panel, so that's what we're looking at for our Version 8 upgrade.

For those of you who don't know, Tom is very pretty, but very smart as well. Don't underestimate his guile.

That's a clever idea!

Thanks John and Francis

Depends on your TABLE FILE, but you can put -IF statements around a column. Little trick I fell across a few weeks ago. I had a FEX I wanted used on two different pages, but the only difference they wanted the columns flipped. Put an -IF like below in it and flipped the columns based on the params being passed into it.

TABLE FILE MYHOLD
BY FIELD1
-IF &NOTF2 THEN GOTO FIELD3;
BY FIELD2
-FIELD3
BY FIELD3
END

This works in WHERE clauses, styles, JS for map styles, etc..

If you don't mind using jQuery, this will hide the calendar image:

$("#calendar1").nextAll("img").first().css("visibility","hidden");

It looks for the first image tag after your calendar's input tag.