8 Replies Latest reply on Sep 29, 2009 9:15 AM by annacarla

    External JS for calendar disablement and styling

    annacarla

      Hi All,
      I have a problem trying to load an external js script into a facelet. I used the a4j loadscript tag into my template.xhtml:

      <a:loadScript src="/js/DateUtil.js" />

      The call is added but it is not executed. When I click on the calendar botton, nothing happens. Even the calendar pop-up doesn't work anymore.
      This is how the page appears in firebug:














      var curDt = new Date();
      function disablementFunction(day){
      if (curDt.getTime() - day.date.getTime() &gt; 0)
      return true; else return false;
      }
      function disabledClassesProv(day){
      if (curDt.getTime() - day.date.getTime() &gt; 0)
      return 'previousDate'; else return 'futureDate';
      }

      <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
      ...


      This means that the function is loaded.
      This is the code for my calendar:

      <h:outputLabel value="* Begin Period: " for="beginPeriod" />
      <rich:calendar id="beginPeriod" value="#{report.beginPeriod}" required="true"
      isDayEnabled="disablementFunction"
      dayStyleClass="disabledClassesProv" />
      <h:message for="beginPeriod" style="color:red;font-style:italic;font-size:small;" />


      I've also tried to load the js with the stardard tag but nothing happened. The only way it works is by adding the function directly into the facelet but since is a function common to other facelets I would avoid it. Any idea?
      Thank you in advance!

        • 1. Re: External JS for calendar disablement and styling
          annacarla

          Oh my copy and paste dissapeared with the submit. Here the code again:













          1var curDt = new Date();
          2function disablementFunction(day){
          3 if (curDt.getTime() - day.date.getTime() &gt; 0)
          4 return true; else return false;
          5}
          6function disabledClassesProv(day){
          7 if (curDt.getTime() - day.date.getTime() &gt; 0)
          8 return 'previousDate'; else return 'futureDate';
          9}

          <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
          Report

          • 2. Re: External JS for calendar disablement and styling
            annacarla


            <script src="/app/a4j/g/3_2_2.SR1/org/ajax4jsf/framework.pack.js" type="text/javascript">
            </script>
            <script src="/app/a4j/g/3_2_2.SR1/org/richfaces/ui.pack.js" type="text/javascript">
            </script>
            <link class="component" href="/app/a4j/s/3_2_2.SR1/org/richfaces/skin.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__" type="text/css" rel="stylesheet">
            </link>
            <link class="user" href="/app/stylesheet/theme.css" type="text/css" rel="stylesheet">
            </link>
            <link class="user" href="/app/stylesheet/style.css" type="text/css" rel="stylesheet">
            </link>
            <script src="/app/js/DateUtil.js" type="text/javascript">
            var curDt = new Date();
            function disablementFunction(day){
            if (curDt.getTime() - day.date.getTime() > 0)
             return true; else return false;
            }
            function disabledClassesProv(day){
             if (curDt.getTime() - day.date.getTime() > 0)
             return 'previousDate'; else return 'futureDate';
            }
            </script>


            • 3. Re: External JS for calendar disablement and styling
              ilya_shaikovsky

              if there are any client side errors?

              • 4. Re: External JS for calendar disablement and styling
                annacarla

                There are no client side error related to the script. I tried with firefox 3.5 and explorer 7.0 (where there's a script error but related just to some unclosed bracket).
                My surprise is that if I view the Page source, I can see the js function but the calendar doesn't work as well and not only the required function but all the calendar component.

                • 5. Re: External JS for calendar disablement and styling
                  ilya_shaikovsky

                  please provide full code snippets (for long ones use pastebin.com) for template and client pages for this case.

                  • 6. Re: External JS for calendar disablement and styling
                    annacarla
                    • 7. Re: External JS for calendar disablement and styling
                      ilya_shaikovsky

                      try to define loadscript before the insert and not after.

                      • 8. Re: External JS for calendar disablement and styling
                        annacarla

                        Thank you for reply.
                        Actually I tried to insert the loadscript everywhere (It drives me crazy...):

                        <f:view contentType="text/html" xmlns="http://www.w3.org/1999/xhtml"
                         xmlns:ui="http://java.sun.com/jsf/facelets"
                         xmlns:h="http://java.sun.com/jsf/html"
                         xmlns:f="http://java.sun.com/jsf/core"
                         xmlns:a="http://richfaces.org/a4j"
                         xmlns:s="http://jboss.com/products/seam/taglib">
                        
                         <html>
                         <head>
                        HERE--> <a:loadScript src="/js/DateUtil.js" />
                         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        HERE--> <a:loadScript src="/js/DateUtil.js" />
                         <title>Report</title>
                        <link rel="shortcut icon" href="#{request.contextPath}/favicon.ico" />
                        HERE--> <a:loadScript src="/js/DateUtil.js" />
                         <a:loadStyle src="/stylesheet/theme.css" />
                         <a:loadStyle src="/stylesheet/style.css" />
                        HERE--> <a:loadScript src="/js/DateUtil.js" />
                         <ui:insert name="head" />
                         </head>
                         <body>
                         <div id="header">
                         <div class="logo"><h:graphicImage value="/img/logo_iReport.jpg"
                         alt="iReport Logo" /></div>
                         <h:panelGroup rendered="#{identity.loggedIn}">
                         <div class="welcome"><strong>Welcome</strong> |
                         #{identity.username} | <h:graphicImage value="/img/icon_logout.gif"
                         alt="Logout" rendered="#{identity.loggedIn}" /> <s:link
                         action="#{identity.logout}" value="Logout"
                         rendered="#{identity.loggedIn}" propagation="none" /></div>
                         </h:panelGroup></div>
                         <ui:insert name="topMenu" />
                         <ui:insert name="body" />
                         <ui:debug hotkey="d" rendered="true" />
                         <a:log popup="true" level="ALL" style="width: 800px; height: 300px;" />
                         <div id="footer">
                         <div class="copyright">Copyright © 2009 - iREPORT.
                         All Rights Reserved.</div>
                         <div class="policy"><a href="#" class="footer">Privacy Policy</a>
                         | <a href="#" class="footer">Disclaimer</a> <h:graphicImage
                         value="/img/footerbrandingimg.jpg" alt="" width="39" height="9" /></div>
                         </div>
                         </body>
                         </html>
                        </f:view>
                        


                        but without success... This time I have an error script in Explorer saying "'disabledClassesProv' is undefined" but no error in Firefox where with firebug I can see the function perfectly loaded in the page.
                        Since it loads perfectly the style.css and the theme.css with the a4j tag loadstyle, is it possible that is a bug in the loadscript tag? Do you know if it's possible to find some online examples where to find the same situation?
                        Thank you very much in advance!