ajax response does not access (?) css styles
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