ZK5 + tiles can't work on IE8

asked 2010-03-09 23:54:26 +0800

M4tt
39 ● 5

updated 2010-03-09 23:55:46 +0800

Hi all,

I usually use tiles for my web layout handling.
But I found a problem after I upgrade my ZK from 3.x to 5.0.
If I use tiles + ZK5.0 , the IE8 can't render the ZK component and leaves it blank.

The error message from the browser is "Unable to modify the parent container element before the child element is closed (KB927917)".

I googled it and the most common way to solve my problem is modify the javascripts in my pages.
But I don't know what to do if the javascript is auto generated by the framework.

So... anybody hlep me? Thanks.

btw, I've tried to change the IE mode by using the developer tools, but it still seemed to be the same situation.

delete flag offensive retag edit

6 Replies

Sort by » oldest newest

answered 2010-03-14 23:35:11 +0800

PeterKuo
481 ● 2

Can you give us a minimum example to replicate the bug?

link publish delete flag offensive edit

answered 2010-03-15 02:50:07 +0800

M4tt
39 ● 5

updated 2010-03-15 02:59:05 +0800

Sure, I made a simple project as an example, here it is.

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    	<!-- ZK -->
    <listener>
        <description>Used to clean up when a session is destroyed</description>
        <display-name>ZK Session Cleaner</display-name>
        <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
    </listener>
    <servlet>
        <description>ZK loader for ZUML pages</description>
        <servlet-name>zkLoader</servlet-name>
        <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
        <init-param>
            <param-name>update-uri</param-name>
            <param-value>/zkau</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zul</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zhtml</url-pattern>
    </servlet-mapping>
    <servlet>
        <description>The asynchronous update engine for ZK</description>
        <servlet-name>auEngine</servlet-name>
        <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau/*</url-pattern>
    </servlet-mapping>
    <!-- end of ZK-->
     <!--tiles2-->
    <listener>
        <listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
    </listener>
    <!--End of tiles2-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

tiles.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN" "http://struts.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
    <definition name="tiles_test" template="/WEB-INF/tiles/mainlayout.jsp">
        <put-attribute name="title" value="ZK5 + Tiles2 Test" />
        <put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
        <put-attribute name="body" value="/WEB-INF/tiles/body.zul" />
        <put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
    </definition>
</tiles-definitions>

mainlayout.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><tiles:insertAttribute name="title" /></title>
    </head>
    <body id="content">
        <div id="main">
            <div id="header" style="height:200px">
                <tiles:insertAttribute name="header"/>
            </div>
            <div id="body" style="height:500px">
                <tiles:insertAttribute name="body"/>
            </div>
            <div id="footer" style="height:20px">
                <tiles:insertAttribute name="footer"/>
            </div>
        </div>
    </body>
</html>

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insertDefinition name="tiles_test" />

Then I put the head.jsp, footer.jsp and body.zul to the correspond dictionary.

header.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

This is header.jsp

footer.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

This is footer.jsp

body.zul

<?xml version="1.0" encoding="UTF-8"?>

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window width="100%" height="100%" title="Test Window" border="normal">
        This is body.zul
    </window>
</zk>

And the rest things I need to do are just deploy it on the tomcat and use IE to browse it.

Add two sceenshots.
Screenshot on IE8
Screenshot on FF3.6