1 Reply Latest reply on May 25, 2007 10:28 AM by Matthes Rieke

    ajax response does not access (?) css styles

    Matthes Rieke Newbie

      hi all,

      i've got a problem when i want to rerender a part of my page (a login: the login-form disappears after succes and a user-menu is put at its place).
      i'm using ajax4jsf-1.1.0, myfaces-1.1.5, tomahawk-1.1.5.

      the problem is that when the new user-menu is added it does not get the css-styles from my file. now, when i reload the page (user is still logged in cause of the bean-state) the menu is displayed correctly with the styles.
      here is my code:

      <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="ISO-8859-1"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
      <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <f:view locale="#{localeBean.locale}">
      <f:loadBundle basename="net.bcbc.msg.messages" var="msg" />
      
      <html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <a4j:loadStyle src="/css/style.css"></a4j:loadStyle>
       </head>
       <body id="mainBody">
      
       <div id="wrapper">
       <div id="header"><%@include file="header.jsp" %></div>
       <div id="path"><%@include file="path.jsp" %></div>
       <div class="sideBarContainer">
       <div class="left"><%@include file="left.jsp" %></div>
       </div>
       <div id="content"><%@include file="content.jsp" %></div>
       <div class="sideBarContainer">
       <div class="right"><%@include file="right.jsp" %></div>
       </div>
       <div id="footer"><%@include file="footer.jsp" %></div>
       </div>
      
       <a4j:log></a4j:log>
       </body>
      </html>
      
      </f:view>


      problem is in header.jsp:
      <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="ISO-8859-1"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
      <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
      <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
      <f:loadBundle basename="net.bcbc.msg.messages" var="msg" />
      <div id="header-body">
       <ul>
       <li>
       <div id="navigation">
       <h:form id="navigationForm">
       <h:commandLink value="#{msg.home}"></h:commandLink>
       <h:commandLink value="#{msg.writeNews}"></h:commandLink>
       <h:commandLink value="#{msg.help}"></h:commandLink>
       <h:commandLink value="#{msg.about}"></h:commandLink>
       </h:form>
       </div>
       </li>
       <li>
       <div id="smallNavi">
       <h:form id="smallNaviForm">
       <ul>
       <li><h:commandLink value="#{msg.faq}"></h:commandLink></li>
       <li><h:commandLink value="#{msg.contact}"></h:commandLink></li>
       <li><h:commandLink value="#{msg.statistics}"></h:commandLink></li>
       <li><h:commandLink value="#{msg.breadget}"></h:commandLink></li>
       </ul>
       </h:form>
       </div>
       </li>
       <li>
       <t:div styleClass="loginContainer" id="loginContainerAjax">
      
       <a4j:loadStyle src="/css/style.css"></a4j:loadStyle>
      
       <t:div id="login" styleClass="sideBarElement" rendered="#{!userBean.loggedIn}">
       <a4j:form id="loginForm">
       <t:div styleClass="loginHead">
       <h4><h:outputText value="#{msg.login}"></h:outputText>
      
       <%/* login submit link */%>
      
       <a4j:commandLink reRender="loginContainerAjax" action="#{userBean.login}">
       <h:graphicImage value="/images/enter.png"></h:graphicImage>
       </a4j:commandLink>
       </h4>
       </t:div>
      
       <t:div styleClass="loginForm">
       <h:outputText value="#{msg.username}"></h:outputText>
       <h:inputText id="username" ></h:inputText>
       <h:outputText value="#{msg.password}"></h:outputText>
       <h:inputText id="password" ></h:inputText>
       </t:div>
       </a4j:form>
       </t:div>
      
       <t:div id="logout" styleClass="sideBarElement" rendered="#{userBean.loggedIn}">
      
       <t:div styleClass="loginHead">
       <a4j:form>
       <h4><h:outputText value="#{msg.logout}"></h:outputText>
       <a4j:commandLink reRender="loginContainerAjax" action="#{userBean.logout}">
       <h:graphicImage value="/images/enter.png"></h:graphicImage>
       </a4j:commandLink>
       </h4>
       </a4j:form>
       </t:div>
      
       <t:div styleClass="loginForm">
       <ul>
       <li>
       <t:commandLink>
       <t:outputText value="#{userBean.userName} #{msg.options}">
       </t:outputText>
       </t:commandLink>
       </li>
       <li>
       <t:commandLink>
       <t:outputText value="#{msg.path}"></t:outputText>
       </t:commandLink>
       <t:commandLink>
       <t:outputText value="#{msg.addCurrent}"></t:outputText>
       </t:commandLink>
       </li>
       <li>
       <t:commandLink>
       <t:outputText value="#{msg.usersNews}"></t:outputText>
       </t:commandLink>
       </li>
       </ul>
       </t:div>
      
       </t:div>
      
       </t:div>
       </li>
       </ul>
      </div>


      when i click the login-a4j:commandLink the t:div with id loginContainerAjax is reloaded correctly but is not getting the css-styles.
      i'm quite new to a4j, perhaps it is just a simple problem or just bad code?

      i would be happy if somebody could take a look at this :)

      thanks and regards,
      Matthes