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

problems showing/hiding calendar control

Expand Messages
  • windrunner37
    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(
    Message 1 of 5 , Apr 1, 2008
    • 0 Attachment
      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.
    • 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 2 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 3 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 4 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 5 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.