Click
  1. Click
  2. CLK-366

DateField in TabbedPanel causes JS warning

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.5 M1
    • Fix Version/s: 1.5 M2
    • Component/s: extras
    • Labels:
      None
    • Environment:
      1.5 M1

      Description

      A DateField in a TabbedPanel may not be displayed if its not the active panel. However it will be included in the $jsImports which will cause a JS initialization error which will result in a Calender Alert message being displayed.

      There are a number of potential fixes for this:
      1 - remove Alert from Calendar.js, this is the quick and dirty solution, which leaves used JS code and imports in the page
      2 - inline the JS initialization code in the page HTML for the DateField, has some performance issues with page rendering
      3 - improve the logic for including JS, enabling the parent control/container to decide what is included.

        Activity

        Hide
        Malcolm Edgar added a comment -

        Resolved issue with option #3, and have rolledback calendar.js partial fix

        Show
        Malcolm Edgar added a comment - Resolved issue with option #3, and have rolledback calendar.js partial fix
        Hide
        Bob Schellink added a comment -

        Hmm seems option 4 is a bit naive. addLoadEvent can be called at start of page when no HTML has loaded, thus getElementById returns null and the event will not be registered.

        Best option seems #3 which will be solved as part of CLK-288

        Show
        Bob Schellink added a comment - Hmm seems option 4 is a bit naive. addLoadEvent can be called at start of page when no HTML has loaded, thus getElementById returns null and the event will not be registered. Best option seems #3 which will be solved as part of CLK-288
        Hide
        Malcolm Edgar added a comment -

        I have checked in an up calendar.js which does not raise the alert when no bindable field.

        However I think the 4th options is what we should do to improve this functionality.

        regards Malcolm

        Show
        Malcolm Edgar added a comment - I have checked in an up calendar.js which does not raise the alert when no bindable field. However I think the 4th options is what we should do to improve this functionality. regards Malcolm
        Hide
        Bob Schellink added a comment -

        We could also introduce a second javascript addLoadEvent which accepts the id of the element to add as well as the function to execute.

        This new addLoadEvent can then check if the element is available in the document. If it is we execute the function, otherwise it skips.

        This solution should solve all javascript dependent controls, not just Calendar.

        Show
        Bob Schellink added a comment - We could also introduce a second javascript addLoadEvent which accepts the id of the element to add as well as the function to execute. This new addLoadEvent can then check if the element is available in the document. If it is we execute the function, otherwise it skips. This solution should solve all javascript dependent controls, not just Calendar.
        Hide
        Bob Schellink added a comment -

        Hi Malcolm,

        Interesting scenario. Can you attach a demo of this to the issue? The TabbedFormDemo in the examples does cover this scenario and it works because the DateField is rendered even when its panel is not active.

        >1 - remove Alert from Calendar.js, this is the quick and dirty solution, which leaves used JS code and imports in the page
        This might work for DateField but other controls could still run into problems.

        >2 - inline the JS initialization code in the page HTML for the DateField, has some performance issues with page rendering
        Not sure how this would work?

        >3 - improve the logic for including JS, enabling the parent control/container to decide what is included.
        Have been thinking of this as well. PageImports should only invoke getHtmlImports of Control directly added to Page. Containers can then traverse their own children and include them. In the case of TabbedPanel it can conditionally include them.

        A 4th option is to enhance the Javascript include logic to check if the specific control is available:
        var control = document.getElementById('myDateField');
        if (control != null)

        { Calendar.setup(.....); }

        kind regards

        bob

        Show
        Bob Schellink added a comment - Hi Malcolm, Interesting scenario. Can you attach a demo of this to the issue? The TabbedFormDemo in the examples does cover this scenario and it works because the DateField is rendered even when its panel is not active. >1 - remove Alert from Calendar.js, this is the quick and dirty solution, which leaves used JS code and imports in the page This might work for DateField but other controls could still run into problems. >2 - inline the JS initialization code in the page HTML for the DateField, has some performance issues with page rendering Not sure how this would work? >3 - improve the logic for including JS, enabling the parent control/container to decide what is included. Have been thinking of this as well. PageImports should only invoke getHtmlImports of Control directly added to Page. Containers can then traverse their own children and include them. In the case of TabbedPanel it can conditionally include them. A 4th option is to enhance the Javascript include logic to check if the specific control is available: var control = document.getElementById('myDateField'); if (control != null) { Calendar.setup(.....); } kind regards bob

          People

          • Assignee:
            Malcolm Edgar
            Reporter:
            Malcolm Edgar
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development