8 Replies Latest reply: Jul 19, 2010 4:59 AM by Joeri Hendrickx RSS

Why is Richfaces deferring my Javascript?

Joeri Hendrickx Newbie

Hi,

 

In one of our projects, all our script tags (included and inline) have the deferred attribute set.  Since in IE, the deferred order is not specified, this is giving us issues.

 

I found an old thread on the forums that suggested to use A4j:loadscript, and I prefer not to do that.  The script tags are in a facelet from a library that is richfaces-independent, and I would prefer to keep it that way.

 

Any way to prevent this from happening?

 

Thanks,

Joeri

  • 1. Re: Why is Richfaces deferring my Javascript?
    Nick Belaevski Master

    Hi Joeri,

     

    Can you please post example of your library code?

  • 2. Re: Why is Richfaces deferring my Javascript?
    Joeri Hendrickx Newbie

    Sure (I've renamed/snipped some stuff, obviously);

     

    The goal of this is to have a generic layout; our applications import a jar containing this template and some resources, and use it as a facelet template.  This way they have a shared look, and can use the same client-side functions.  This works great in most apps (even some richfaces ones), but one of them (using richfaces) is deferring the scripts and messing up the order.

     

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:c="http://java.sun.com/jstl/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xml:lang="en" lang="en">
    <head>
        <title><ui:insert name="title">No title</ui:insert></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/style.css" media="screen, projection"/>
        <link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/jquery.gritter.css"/>
        <link href="#{request.contextPath}/img/favicon.png" rel="icon" type="image/png"/>
        <ui:insert name="customStylesheet"/>
        <!--[if lt IE 7]>
            <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen, projection">
            <script type="text/javascript" src="#{request.contextPath}/js/skin-ie6.js"></script>
        <![endif]-->
       
        <script type="text/javascript" src="#{request.contextPath}/js/skin.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/jquery.cookie.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/jquery.gritter.min.js"></script>

     

        <script type="text/javascript">
            //<![CDATA[

     

                       ... script that relies on scripts above ...
           
            //]]>
        </script>
    </head>
    <body>

     

    <div id="wrapper">
        <div id="headerTop">
            <div></div>
        </div>
        <div id="header">
            <div id="logo">
                <a href="#{propertyBean.properties['HOME_URL']}">
                    <img src="#{request.contextPath}/img/logo.png" alt="BICS"
                         height="68" width="170"/>
                </a>
            </div>

     

                <!-- general toolbar -->
                <p id="bar">
                    <!-- ... snip ... -->
                </p>

     

            <!-- menu -->
            <!-- by default, use a static menu -->
            <ui:insert name="menuTemplate">
                <div id="nav">
                    <!-- ... snip ... -->
                </div>
            </ui:insert>

     

        </div>

     

        <div id="main">
            <div id="content">
                <h1><ui:insert name="title">No title</ui:insert></h1>
                <ui:insert name="body">No body</ui:insert>
            </div>
        </div>
    </div>

     

    </body>
    </html>

  • 3. Re: Why is Richfaces deferring my Javascript?
    Nick Belaevski Master

    RichFaces adds component scripts to the page, so that they are the first, that's why order can be changed. You can change scripts loading strategy via org.richfaces.LoadScriptStrategy context init parameter.

  • 4. Re: Why is Richfaces deferring my Javascript?
    Joeri Hendrickx Newbie

    Hi Nick, thanks for your reply

     

    I already tried playing with the LoadScriptStrategy; it doesn't seem to have any effect.

     

    I'm fine with richfaces throwing its scripts before mine, I'm not fine with it influencing the order of my own scripts.  Also, I'm pretty sure in our other projects this is not happening, so I'd like to know what exactly triggers the defer.

  • 5. Re: Why is Richfaces deferring my Javascript?
    Nick Belaevski Master

    Hmm, order of your scripts should not be changed. I have to ask you for a small example reproducing the problem, can you please prepare it?

  • 6. Re: Why is Richfaces deferring my Javascript?
    Joeri Hendrickx Newbie

    It's not specifically that it reorders them; it adds the defer attribute, which causes IE to reorder them (known issue in IE7 and below).

     

    here's the smallest app I could make that has the issue:

     

    Web.xml:

     

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://java.sun.com/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
              http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
             version="2.5">

     

         <!-- Use documents saved as *.xhtml -->
        <display-name>Test</display-name>

     

          <context-param>
            <param-name>javax.faces.CONFIG_FILES</param-name>
            <param-value>/WEB-INF/faces-config.xml</param-value>
        </context-param>

     

         <context-param>
            <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
            <param-value>.xhtml</param-value>
        </context-param>

     

         <servlet>
            <servlet-name>Faces Servlet</servlet-name>
            <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
            <load-on-startup>1</load-on-startup>
        </servlet>

     

         <servlet-mapping>
            <servlet-name>Faces Servlet</servlet-name>
            <url-pattern>/faces/*</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>Faces Servlet</servlet-name>
            <url-pattern>*.xhtml</url-pattern>
        </servlet-mapping>

     


        <filter>
            <display-name>RichFaces Filter</display-name>
            <filter-name>richfaces</filter-name>
            <filter-class>org.ajax4jsf.Filter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>richfaces</filter-name>
            <servlet-name>Faces Servlet</servlet-name>
            <dispatcher>REQUEST</dispatcher>
            <dispatcher>FORWARD</dispatcher>
            <dispatcher>INCLUDE</dispatcher>
        </filter-mapping>

     

         <welcome-file-list>
            <welcome-file>xhtml/test.xhtml</welcome-file>
        </welcome-file-list>

     

    </web-app>

     

    faces-config.xml:

     

    <?xml version='1.0' encoding='UTF-8'?>
    <faces-config xmlns="http://java.sun.com/xml/ns/javaee"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
                  version="1.2">


        <!-- FacesELResolver injects Spring beans in directly in Managed beans -->
        <application>
            <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
            <locale-config>
                <supported-locale>nl</supported-locale>
                <supported-locale>en</supported-locale>
                <supported-locale>de</supported-locale>
                <supported-locale>fr</supported-locale>
            </locale-config>
        </application>


        <!-- NAVIGATION RULES -->


        <navigation-rule>
            <from-view-id>*</from-view-id>
            <navigation-case>
                <from-outcome>test</from-outcome>
                <to-view-id>/xhtml/test2.xhtml</to-view-id>
                <!-- <redirect /> -->
            </navigation-case>
        </navigation-rule>



    </faces-config>

     

    Test.xhtml:

     

    <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:rich="http://richfaces.org/rich"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:c="http://java.sun.com/jstl/core"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions"
            >
        <head>
            <title>test</title>
        </head>
        <body>
            <h:form>
                <a4j:commandLink action="test" value="linkmeA4j" />
            </h:form>
        </body>
    </html>

     

    Test2.xhtml:

     

    <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:rich="http://richfaces.org/rich"
                    xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:c="http://java.sun.com/jstl/core"
                    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                    xmlns:gc="http://www.belgacom-ics.com/GUIConfiguration">


    <head><title>Test2</title>
        <script type="text/javascript" src="one.js"></script>
        <script type="text/javascript" src="two.js"></script>
    </head>
    <body>
    I am the test target page.

    </body>

    </html>

     

    And here's the output when clicking the link:

     

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:gc="http://www.belgacom-ics.com/GUIConfiguration">

    <head>
        <title>Test2</title>
            <link href="/itrack4/faces/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_" rel="stylesheet" type="text/css" />
        <link href="/itrack4/faces/a4j/s/3_3_2.SR1org/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_" media="rich-extended-skinning" rel="stylesheet" type="text/css" />
       
        <script defer  type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script src="/itrack4/faces/a4j/g/3_3_2.SR1org/richfaces/renderkit/html/scripts/skinning.js" type="text/javascript"></script><script defer  type="text/javascript" src="one.js"></script>
            <script defer  type="text/javascript" src="two.js"></script>
    </head>
    <body>
    I am the test target page.

    </body>

    </html>

  • 7. Re: Why is Richfaces deferring my Javascript?
    Nick Belaevski Master

    Joeri,

     

    They are added when navigation is happening by AJAX like in your example code. Non-redirect AJAX navigation is not well supported and have browser compatibility issues, so I recommend you to enable redirect for this navigation case or use common h:commandLink.

  • 8. Re: Why is Richfaces deferring my Javascript?
    Joeri Hendrickx Newbie

    Thanks!

     

    I used the h:commandlink instead and indeed, it did the trick.