Loading ...
Sorry, an error occurred while loading the content.

Re: problems showing/hiding calendar control

Expand Messages
  • bretlevy
    wind runner: You may be experiencing a scope issue. There are ways in most/many of the yui elements to specify the scopre that should be active in a
    Message 1 of 5 , Apr 1, 2008
    • 0 Attachment
      wind runner:

      You may be experiencing a "scope" issue. There are ways in most/many
      of the yui elements to specify the scopre that should be active in a
      handler. For starters, change this.hide() to YAHOO.calendar.cal1.hide
      () (assuming the calender namespace is valid), or just use a global
      variable (for testing). If this works, then you just have a simple
      scope issue. Check to see if you can declare the scope for the
      handler you are hooking in the docs.

      If you can't get the calendar to show up at all, verify that your
      HTML is properly formed (I have found that unclosed tags can be very
      disruptive to yui!). Also, make sure your target element is an
      immediate child of body. If it is hidden, you'll have to call show.
      If it is not hidden, you may not have to call show.

      display:none can be problematic, at least I think it was in some
      versions of YUI. Do a search and see if you can find some messages
      about this. If I remember correctly, display:none styled elements
      may not be visible to YUI or the DOM or both (or something like that).

      I drop my calendar(s) into a simple div like this:

      <div id="mycalcontainer"></div>

      If that is at the "end" of your page, then it essentially is
      invisible. Then you set the x/y and everything else in the config
      block when you instantiate your calendar (or via cfg calls). This
      has worked best for me. I actually have a page generator class I use
      that "builds" the framework of my pages in my site(s) and it adds
      this div automatically (along with ones for alert messages,
      colorpickers, etc). I just "know" they'll be there!

      Hope that helps,
      ~~bret


      --- In ydn-javascript@yahoogroups.com, "windrunner37"
      <windrunner37@...> wrote:
      >
      > I am having problems with showing and hiding the calendar control
      from
      > code.
      >
      > I create it like this:
      >
      > YAHOO.calendar.cal1 =
      > new YAHOO.widget.CalendarGroup( "cal1", "calendar",
      > { pages: 2,
      > title: calendarTitle,
      > pagedate: pageDate,
      > close: true } );
      >
      > My friend does not need to call the control's show method to display
      > it. He just creates the object similar like above and calls render
      and
      > thats it! the calendar appears. But I for some reason can only
      display
      > my calendar after calling it's show function.
      >
      > Also, my calendar does not disappear when I call the hide function
      > from my selectEvent handling function:
      >
      > function selectEventHandler(type, args, obj) {
      > alert( "inside selectEventHandler()" );
      >
      > var dates = args[0];
      > var selDate = dates[0]; // this should be an array in this
      > format: [YYYY, MM, DD]
      >
      > document.getElementById( inputFieldForCal ).value( selDate[1] +
      > '/' + selDate[2] + '/' + selDate[0] );
      >
      > this.hide();
      > }
      >
      > My div container tag seems to be set up properly:
      >
      > <div id="calendar" name="calendar"
      > style="position:absolute;display:none;"></div>
      >
      >
      > So why am I having these problems? Any help is greatly appreciated.
      >
    • Satyen Desai
      Hi, a). Your Calendar is not displayed without calling show(), because you have display:none set on the calendar container DIV. So the calendar gets rendered
      Message 2 of 5 , Apr 1, 2008
      • 0 Attachment
        Hi,

        a). Your Calendar is not displayed without calling show(), because you
        have "display:none" set on the calendar container DIV. So the calendar
        gets rendered inside a div with "display:none" and is not visible.
        Calling cal.show() reverts the display value to block.

        b). Your select handler may not be hiding the calendar because you may
        not be setting up the context ("this") for your handler.

        So I imagine you maybe doing something like:

        cal.selectEvent.subscribe(selectEventHandler);

        If you change it to:

        cal.selectEvent.subscribe(selectEventHandler, cal, true);

        It should work,

        Hope that helps,
        Satyen
      • windrunner37
        ... Satyen, thanks for your reply. In regards to a) my friend also has his div container tag set like me to:
        Message 3 of 5 , Apr 2, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@...> wrote:
          >
          > Hi,
          >
          > a). Your Calendar is not displayed without calling show(), because you
          > have "display:none" set on the calendar container DIV. So the calendar
          > gets rendered inside a div with "display:none" and is not visible.
          > Calling cal.show() reverts the display value to block.
          >
          > b). Your select handler may not be hiding the calendar because you may
          > not be setting up the context ("this") for your handler.
          >
          > So I imagine you maybe doing something like:
          >
          > cal.selectEvent.subscribe(selectEventHandler);
          >
          > If you change it to:
          >
          > cal.selectEvent.subscribe(selectEventHandler, cal, true);
          >
          > It should work,
          >
          > Hope that helps,
          > Satyen
          >

          Satyen, thanks for your reply. In regards to a) my friend also has his
          div container tag set like me to:

          <div id="calendar" name="calendar"
          style="position:absolute;display:none;"></div>

          ...and she creates and displays the object like so:


          YAHOO.calendar.cal1 = new
          YAHOO.widget.CalendarGroup("cal1","calendar", { title: cal_title,
          pages: 2, pagedate: pagedate, mindate: mindate, maxdate: maxdate,
          close: true });


          YAHOO.calendar.cal1.selectEvent.subscribe(handleSelect,
          YAHOO.calendar.cal1, true);

          if ( depart_date ) {
          YAHOO.calendar.cal1.addRenderer(depart_date.value,
          YAHOO.calendar.cal1.renderCellStyleHighlight1); }

          if ( return_date && return_area.style.display != 'none' ) {
          YAHOO.calendar.cal1.addRenderer(return_date.value,
          YAHOO.calendar.cal1.renderCellStyleHighlight2); }

          YAHOO.calendar.cal1.render();


          In any case you are correct, if you set the div container's style to:

          display:none;

          then you will need to use the show/hide functions. Just don't know why
          my friend does not need to use show.


          For b) I have set up the context for my handler like you said like this:

          YAHOO.calendar.cal.selectEvent.subscribe( selectEventHandler,
          YAHOO.calendar.cal, true );

          My selectEventHandler function fires (I checked this by placing an
          alert line inside) but the line:

          this.hide();

          does not hide my calendar.

          *NOTE: I have renamed my calendar object from:
          YAHOO.calendar.cal1
          as was in my previous post to:
          YAHOO.calendar.cal
        • windrunner37
          ... Fixed! The following line had an error: document.getElementById( inputFieldForCal ).value( selDate[1] + / + selDate[2] + / + selDate[0] ); value is a
          Message 4 of 5 , Apr 2, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "windrunner37"
            <windrunner37@...> wrote:
            >
            > I am having problems with showing and hiding the calendar control from
            > code.
            >
            > I create it like this:
            >
            > YAHOO.calendar.cal1 =
            > new YAHOO.widget.CalendarGroup( "cal1", "calendar",
            > { pages: 2,
            > title: calendarTitle,
            > pagedate: pageDate,
            > close: true } );
            >
            > My friend does not need to call the control's show method to display
            > it. He just creates the object similar like above and calls render and
            > thats it! the calendar appears. But I for some reason can only display
            > my calendar after calling it's show function.
            >
            > Also, my calendar does not disappear when I call the hide function
            > from my selectEvent handling function:
            >
            > function selectEventHandler(type, args, obj) {
            > alert( "inside selectEventHandler()" );
            >
            > var dates = args[0];
            > var selDate = dates[0]; // this should be an array in this
            > format: [YYYY, MM, DD]
            >
            > document.getElementById( inputFieldForCal ).value( selDate[1] +
            > '/' + selDate[2] + '/' + selDate[0] );
            >
            > this.hide();
            > }
            >
            > My div container tag seems to be set up properly:
            >
            > <div id="calendar" name="calendar"
            > style="position:absolute;display:none;"></div>
            >
            >
            > So why am I having these problems? Any help is greatly appreciated.
            >


            Fixed! The following line had an error:

            document.getElementById( inputFieldForCal ).value( selDate[1] + '/' +
            selDate[2] + '/' + selDate[0] );

            value is a property and not a function. It should have been like this:

            document.getElementById( inputFieldForCal ).value = selDate[1] + '/' +
            selDate[2] + '/' + selDate[0];

            For some reason because of this mistake it was not executing the code
            after it which was the line for hiding the calendar:

            this.hide();

            Thanks for your help.
          Your message has been successfully submitted and would be delivered to recipients shortly.