7 Replies Latest reply on Mar 24, 2009 11:25 AM by Zack Marrapese

    skin: loading blueSky instead of classic in IE

    Zack Marrapese Newbie

      I'm having a skinning issue with a fairly large application. When I load it up in IE, it doesn't load the correct skin. It loads blueSky instead of classic, which is the one I selected in my web.xml file. My application includes my ui:include elements, all in there own tabs (if this makes a difference).

      When I load the application in firefox, the buttons and what-not skin correctly.

      I notice that the IE never actually stops loading the page. It just sits there forever trying to load resources, etc.

      Any recommendations?

      Thanks,
      ~Zack

        • 1. Re: skin: loading blueSky instead of classic in IE
          Zack Marrapese Newbie

          Update: I forgot to mention. These tabs are loaded dynamically, and the holdup only seems to happen when there are tabs which have been loaded into the page before the page loads. If there are no tabs (which contain most of the content), then the skin gets loaded just fine.

          • 2. Re: skin: loading blueSky instead of classic in IE
            Zack Marrapese Newbie

            Any help on this?

            Thanks,
            ~Zack

            • 3. Re: skin: loading blueSky instead of classic in IE
              Zack Marrapese Newbie

              Still haven't gotten a response on this. Has this happened to anyone else?

              • 4. Re: skin: loading blueSky instead of classic in IE
                Nick Belaevski Master

                Please post this information:

                1. Exact RF version
                2. IE version
                3. Page code to reproduce the problem

                • 5. Re: skin: loading blueSky instead of classic in IE
                  Zack Marrapese Newbie

                  I'm using the newest version of richFaces (3.3?), and this is happening in IE7.

                  Note: the main part of the page below is within the a4j:include files. This is my index.xhtml, which has no problems until more tabs are added to the list of tabs.

                  I don't use the actual rich:tabPanel, because there is no option for vertical tabs. Instead, I create my own using CSS and a simple a4j:support call.

                  <!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:ui="http://java.sun.com/jsf/facelets"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:a4j="http://richfaces.org/a4j"
                   xmlns:rich="http://richfaces.org/rich"
                   xmlns:tp="http://www.sd.com/jsf/title-processor"
                   xmlns:sd="http://www.sd.com/jsf/sd-web-utils">
                  
                  <head>
                   <a4j:loadStyle src="/css/index.css"></a4j:loadStyle>
                   <a4j:loadStyle src="/css/servicesTab.css"></a4j:loadStyle>
                   <a4j:loadScript src="/js/jquery.corner.js"></a4j:loadScript>
                  </head>
                  <body>
                  <a4j:form id="titleProcessorMainForm">
                  
                  <a4j:keepAlive beanName="infoManagerBean" />
                  <a4j:keepAlive beanName="serviceTabManagerBean" />
                  <a4j:keepAlive beanName="holdItemBean" />
                  
                  <a4j:jsFunction name="updateTabPanel" reRender="tabbedPanelsHolder">
                   <a4j:actionparam name="serviceID" assignTo="#{serviceTabManagerBean.selectedServiceTab}" />
                  </a4j:jsFunction>
                  
                  <sd:messages />
                  
                  <div class="content">
                  <div class="contentTitle">Title Processor</div>
                  <div class="contentInner">
                   <h:panelGroup id="titleProcessorMainHolder" rendered="#{infoManagerBean.validRequest}">
                   <h:panelGroup id="informationHolder">
                  
                   <div class="subHeader">Information</div>
                  
                   <h:panelGrid columns="2" columnClasses="infoLabel, infoValue" >
                   <h:outputText value="Status: " />
                   <h:outputText value="#{infoManagerBean.status}" />
                   <h:outputText value="Customer: " />
                   <h:outputText value="#{infoManagerBean.customer}" />
                   <h:outputText value="Title Number: " />
                   <h:outputText value="#{infoManagerBean.titleNumber}" />
                   <h:outputText value="SDA: " />
                   <h:outputText value="#{infoManagerBean.SDA}" />
                   <h:outputText value="Claim Number: " />
                   <h:outputText value="#{infoManagerBean.claimNumber}" />
                   <h:outputText value="Vehicle: " />
                   <h:outputText value="#{infoManagerBean.vehicleInfo}" />
                   <h:outputText value="Hold Items: " />
                   <a4j:commandLink onclick="#{rich:component('holdItemPanel')}.show();"> #{infoManagerBean.holdCount}</a4j:commandLink>
                   <h:outputText value="Returnables: " />
                   <a4j:commandLink>
                   <h:outputText value="#{infoManagerBean.returnablesCount}" />
                   </a4j:commandLink>
                  
                   <h:outputLabel id="titleProcessorLabel" for="titleProcessorField">Title Processor: </h:outputLabel>
                   <h:selectOneMenu id="titleProcessorField" value="#{infoManagerBean.titleProcessorID}">
                   <a4j:support event="onchange" eventsQueue="titleProcessorChange"
                   requestDelay="500" actionListener="#{infoManagerBean.storeTitleProcessor}"
                   reRender="servicesHolder"/>
                   <f:selectItems value="#{infoManagerBean.titleProcessorList}" />
                   </h:selectOneMenu>
                   </h:panelGrid>
                  
                   </h:panelGroup>
                  
                   <hr />
                  
                   <div class="subHeader">Services</div>
                  
                   <h:panelGroup id="servicesHolder">
                   <h:panelGroup rendered="#{infoManagerBean.titleProcessorID == infoManagerBean.defaultListIndex}">
                   In order to start creating services, select the responsible title processor.
                   </h:panelGroup>
                  
                   <h:panelGrid columns="2" rendered="#{infoManagerBean.titleProcessorID != infoManagerBean.defaultListIndex}"
                   styleClass="addServiceHolder">
                   <h:selectOneMenu id="serviceList" value="#{serviceTabManagerBean.selectedServiceListItem}">
                   <f:selectItems value="#{serviceTabManagerBean.serviceList}" />
                   </h:selectOneMenu>
                   <a4j:commandButton id="addServiceBtn" actionListener="#{serviceTabManagerBean.addServiceTab}" value="Add Service"
                   reRender="serviceList,tabbedPanelsHolder" styleClass="rich-button"
                   onclick="this.disabled=true;" oncomplete="this.disabled=false;" >
                   <f:param name="requestID" value="#{infoManagerBean.requestGUID.asString}" />
                   </a4j:commandButton>
                   </h:panelGrid>
                  
                   <h:panelGroup id="tabbedPanelsHolder" rendered="#{infoManagerBean.titleProcessorID != infoManagerBean.defaultListIndex}"
                   styleClass="tabbedPanelsHolder">
                  
                   <div class="serviceTabPanelsHolder #{(serviceTabManagerBean.selectedServiceTabNew) ? 'newTabPanel' : 'dbTabPanel'}">
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq null}">
                   <div style="height: 500px;">
                   There are currently no services for this request.
                   </div>
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyVehicleID}">
                   <a4j:include ajaxRendered="false" viewId="/services/vehicleVerification.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.receiveProcessedTitleID}">
                   <a4j:include ajaxRendered="false" viewId="/services/certReceived.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.applyForTitleID}">
                   <a4j:include ajaxRendered="false" viewId="/services/applyForTitle.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyBrandsID}">
                   <a4j:include ajaxRendered="false" viewId="/services/brandsSet.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyClaimID}">
                   <a4j:include ajaxRendered="false" viewId="/services/claimVerification.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyOriginalTitleID}">
                   <a4j:include ajaxRendered="false" viewId="/services/verifyOriginalTitle.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyExecRightsID}">
                   <a4j:include ajaxRendered="false" viewId="/services/verifyExecRights.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup rendered="#{serviceTabManagerBean.selectedServiceTab eq serviceTypesBean.verifyTitleProcessedID}">
                   <a4j:include ajaxRendered="false" viewId="/services/verifyTitleProcessed.xhtml" />
                   </h:panelGroup>
                   </div>
                  
                   <div class="serviceTabsHolder">
                   <a4j:repeat value="#{serviceTabManagerBean.serviceTabs}" var="serviceTab">
                   <div class="#{(serviceTab.GUID == null) ? 'newTab' : 'dbTab'} serviceTab rounded
                   #{(serviceTabManagerBean.selectedServiceTab eq serviceTab.serviceType.GUID) ? 'selectedTab' : 'unselectedTab'}">
                   <table>
                   <tr>
                   <td>
                   <a4j:commandLink actionListener="#{serviceTabManagerBean.removeServiceTab}"
                   reRender="servicesHolder">
                   <f:param name="serviceTypeID" value="#{serviceTab.serviceType.GUID.asString}" />
                   <h:graphicImage style="border: 0px;" value="/img/delete24S.png" />
                   </a4j:commandLink>
                   </td>
                   <td style="padding:5px; cursor: pointer;" onclick="updateTabPanel('#{serviceTab.serviceType.GUID}')">
                   #{serviceTab.serviceType.name}
                   </td>
                   </tr>
                   </table>
                   </div>
                   </a4j:repeat>
                  
                   </div>
                  
                   <div style="clear: both;"></div>
                   </h:panelGroup>
                   </h:panelGroup>
                   </h:panelGroup>
                   <h:panelGroup id="titleProcessorBadRequestHolder" rendered="#{not infoManagerBean.validRequest}">
                   Invalid request ID given. Please do not access this page directly.
                   </h:panelGroup>
                  </div>
                  </div>
                  <rich:jQuery selector=".contentInner" query="corner('bottom 18px').parent().css('padding', '5px').corner('20px')"></rich:jQuery>
                  
                  </a4j:form>
                  
                  
                  <rich:modalPanel id="holdItemPanel" styleClass="holdItemPanel" autosized="true" width="300">
                   <f:facet name="header">
                   <h:panelGroup>
                   <h:outputText style="float: left;" value="Hold Items" />
                   <div style="closeWindow" onclick="#{rich:component('holdItemPanel')}.hide();">
                   <h:graphicImage value="img/close_X_white.png" />
                   </div>
                   </h:panelGroup>
                   </f:facet>
                   <a4j:form>
                  
                   <h:outputLabel for="holdItemList">Hold Items:</h:outputLabel>
                   <br />
                   <h:selectOneMenu id="holdItemList" value="#{holdItemBean.selectedHoldItem}">
                   <f:selectItems value="#{holdItemBean.holdItemList}" />
                   </h:selectOneMenu>
                   <br />
                   <a4j:commandButton id="createHoldBtn" value="Create Hold"
                   actionListener="#{holdItemBean.createHold}"/>
                  
                   <rich:dataTable id="holdItemsTable" value="#{holdItemBean.requestHolds}"
                   var="requestHold">
                  
                   <rich:column>
                   <f:facet name="header"> </f:facet>
                   <a4j:commandLink>
                   <h:graphicImage value="img/delete24S.png" style="border: 0px;" />
                   </a4j:commandLink>
                   </rich:column>
                  
                   <rich:column>
                   <f:facet name="header">Hold Type</f:facet>
                   <h:outputText value="#{requestHold.requestHoldType.name}">
                   <f:convertDateTime pattern="MM/dd/yy" />
                   </h:outputText>
                   </rich:column>
                  
                   <rich:column>
                   <f:facet name="header">Created Date</f:facet>
                   <h:outputText value="#{requestHold.createdDate}" >
                   <f:convertDateTime pattern="MM/dd/yy" />
                   </h:outputText>
                   </rich:column>
                  
                   <rich:column>
                   <f:facet name="header">Clear</f:facet>
                   <h:outputText rendered="#{requestHold.clearedDate != null}" value="#{requestHold.clearedDate}" >
                   <f:convertDateTime pattern="MM/dd/yy" />
                   </h:outputText>
                   <h:selectBooleanCheckbox rendered="#{requestHold.clearedDate == null}" />
                   </rich:column>
                  
                   </rich:dataTable>
                  
                   </a4j:form>
                  </rich:modalPanel>
                  
                  </body>
                  </html>
                  


                  • 6. Re: skin: loading blueSky instead of classic in IE
                    Ilya Shaikovsky Master

                    please also show your web.xml and inform about any third parties if used.

                    • 7. Re: skin: loading blueSky instead of classic in IE
                      Zack Marrapese Newbie

                      I'm using facelets.

                      Also, I'm using some jQuery plug-ins, modified to work with your jquery plug-in -- changed instances of $() to jQuery() -- and that works correctly...these plug-ins are jCarousel, and galleria, and corner.

                      The custom tag library simply contains a wrapper for rich:messages, which handles styling, and presentation of different error/notification messages. This has been tested in many previous applications, albeit none this large.

                      I'm deploying to GlassFish v2 and Eclipse is my IDE, although that's probably irrelevant.

                      Here is my web.xml:

                      <?xml version="1.0" encoding="UTF-8"?>
                      <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
                       <display-name>title-processor</display-name>
                       <welcome-file-list>
                       <welcome-file>index.html</welcome-file>
                       <welcome-file>index.htm</welcome-file>
                       <welcome-file>index.jsp</welcome-file>
                       <welcome-file>default.html</welcome-file>
                       <welcome-file>default.htm</welcome-file>
                       <welcome-file>default.jsp</welcome-file>
                       </welcome-file-list>
                       <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>*.xhtml</url-pattern>
                       </servlet-mapping>
                       <context-param>
                       <param-name>facelets.LIBRARIES</param-name>
                       <param-value>
                       /WEB-INF/title-processor.taglib.xml
                       </param-value>
                       </context-param>
                       <context-param>
                       <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
                       <param-value>.xhtml</param-value>
                       </context-param>
                       <context-param>
                       <param-name>facelets.DEVELOPMENT</param-name>
                       <param-value>true</param-value>
                       </context-param>
                       <context-param>
                       <param-name>org.richfaces.SKIN</param-name>
                       <param-value>classic</param-value>
                       </context-param>
                       <context-param>
                       <param-name>org.richfaces.CONTROL_SKINNING</param-name>
                       <param-value>enable</param-value>
                       </context-param>
                      
                       <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>
                       <servlet>
                       <description></description>
                       <display-name>TitleApplicationViewer</display-name>
                       <servlet-name>TitleApplicationViewer</servlet-name>
                       <servlet-class>com.salvagedirect.web.services.TitleApplicationViewer</servlet-class>
                       </servlet>
                       <servlet-mapping>
                       <servlet-name>TitleApplicationViewer</servlet-name>
                       <url-pattern>/TitleApplicationViewer</url-pattern>
                       </servlet-mapping>
                      </web-app>
                      


                      Thanks in advance,
                      ~Zack