Problemas com a modal para o IE8
Problemas com a modal para o IE8
Estava implementando o site www.voluntariosonline.org.br onde há diversas modais utilizando a modal do richfaces (rich:modalPanel). No Firefox, IE 6 e no IE7, a modal aparece normalmente, porém no IE8, há um bug no qual não permite fechar a modal. O erro no js é o seguinte:
Erro da página que é:Detalhes dos erros da página da Web
Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Carimbo de data/hora: Sun, 19 Apr 2009 15:18:34 UTC
O problema já é conhecido pela equipe do richfaces e será corrigido na próxima versão: http://lists.jboss.org/pipermail/richfaces-issues/2009-February/034732.html
Então, buscando no google, verifiquei que o passando um parâmetro na tag meta, o navegador reinderiza conforme o IE7:
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
http://www.richardbarros.com.br/blog/css/como-fazer-o-ie8-rodar-sites-como-no-ie7
Então, para resolver o problema, coloquei o header da seguinte maneira:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="language" content="portuguese" />
<meta name="author" content="http://www.knowtec.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="copyright" content="" />
<title>Voluntários Online – CMS<ui:insert name=”titulo”></ui:insert></title>
<link type=”text/css” rel=”stylesheet” href=”#{facesContext.externalContext.request.contextPath}/resources/cms/css/estilo.css” media=”screen” />
<ui:insert name=”css”></ui:insert>
</head>
Mas surgiu um outro problema. O richfaces coloca o js e css logo após a tag <head>, ficando dessa maneira:
<head>
<link rel='stylesheet' class='component' type='text/css' href='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__;jsessionid=6A439619849FDA94C9528BD04D1DDABF' /><link rel='stylesheet' class='component' type='text/css' href='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__;jsessionid=6A439619849FDA94C9528BD04D1DDABF' /><link rel='stylesheet' class='component' type='text/css' href='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/css/suggestionbox.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__;jsessionid=6A439619849FDA94C9528BD04D1DDABF' /><link rel='stylesheet' class='component' type='text/css' href='/publica/pesquisa/a4j_3_2_1-SNAPSHOTcss/table.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__;jsessionid=6A439619849FDA94C9528BD04D1DDABF' /><link rel='stylesheet' class='component' type='text/css' href='/publica/pesquisa/a4j_3_2_1-SNAPSHOTcss/datascroller.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__;jsessionid=6A439619849FDA94C9528BD04D1DDABF' /><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg.ajax4jsf.javascript.AjaxScript'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/ajax4jsf/javascript/scripts/form.js'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg.ajax4jsf.javascript.PrototypeScript'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/scripts/available.js'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg.ajax4jsf.javascript.SmartPositionScript'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/scripts/browser_info.js'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTscripts/scriptaculo.js'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTscripts/suggestionbox.js'></script><script type='text/javascript' src='/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/renderkit/html/scripts/data-table.js'></script><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”shortcut icon” href=”/publica/img/favicon.ico” type=”image/x-icon” />
<title>Voluntários Online – Página Inicial</title>
<meta name=”language” content=”portuguese” />
<meta name=”author” content=”http://www.knowtec.com” />
<meta name=”copyright” content=”Instituto Voluntários em Ação” />
<meta name=”keywords” content=”voluntários, online, oportunidades, voluntariado, voluntários, ong, ongs, organizações, organização, presencial ” />
<meta name=”description” content=”portal www.voluntariosonline.org.br onde é possível participar de trabalhos voluntários nas organizações ou em casa, através da internet.” />
<link type=”text/css” rel=”stylesheet” href=”/publica/css/estilo.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”/resources/publica/css/componentes.css” media=”screen” />
</head>
O problema é que a meta tag deve vir primeiro que a tag link e script, para que possa reinderizar conforme o X-UA-Compatible. Para resolver o problema, foi necessário alterar o web.xml para imprimir todos os scripts e css solicitados pelo richfaces:
<!-- OPTIMIZAÇÕES DO RICHFACES -->
<!-- http://www.javaplex.com/blog/optimizing-jsf-richfaces-applications/ -->
<context-param>
<param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.LoadScriptStrategy</param-name>
<param-value>ALL</param-value>
<!– por causa de um problema na modal no ie8, a geração dos scripts foram desabilitadas e colocado diretamente no head, após as meta tags –>
</context-param>
<context-param>
<param-name>org.richfaces.LoadStyleStrategy</param-name>
<param-value>ALL</param-value>
<!– por causa de um problema na modal no ie8, a geração dos scripts foram desabilitadas e colocado diretamente no head, após as meta tags –>
</context-param>
<!– FIM – OPTIMIZAÇÕES DO RICHFACES –>
Assim, peguei o fonte que ele gerou, coloquei no head do meu html e coloquei o web.xml da seguinte maneira:
<!– OPTIMIZAÇÕES DO RICHFACES –>
<!– http://www.javaplex.com/blog/optimizing-jsf-richfaces-applications/ –>
<context-param>
<param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.LoadScriptStrategy</param-name>
<param-value>NONE</param-value>
<!– por causa de um problema na modal no ie8, a geração dos scripts foram desabilitadas e colocado diretamente no head, após as meta tags –>
</context-param>
<context-param>
<param-name>org.richfaces.LoadStyleStrategy</param-name>
<param-value>NONE</param-value>
<!– por causa de um problema na modal no ie8, a geração dos scripts foram desabilitadas e colocado diretamente no head, após as meta tags –>
</context-param>
<!– FIM – OPTIMIZAÇÕES DO RICHFACES –>
Assim, o head ficou da seguinte maneira:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="language" content="portuguese" />
<meta name="author" content="http://www.knowtec.com" />
<meta name="copyright" content="Instituto Voluntários em Ação" />
<ui:insert name="metatags"></ui:insert>
<link rel=”shortcut icon” href=”#{facesContext.externalContext.request.contextPath}/publica/img/favicon.ico” type=”image/x-icon” />
<title>Voluntários Online<ui:insert name=”titulo”></ui:insert></title>
<!– devido a um problema na modal no IE8 – os css’s e js’s serão carregados manualmente –>
<link rel=’stylesheet’ class=’component’ type=’text/css’ href=’/publica/pesquisa/a4j_3_2_1-SNAPSHOTorg/richfaces/skin-ext-classes.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__’ />
<script type=’text/javascript’ src=’/publica/pesquisa/a4j_3_2_1-SNAPSHOT/org/ajax4jsf/framework.pack.js’></script>
<script type=’text/javascript’ src=’/publica/pesquisa/a4j_3_2_1-SNAPSHOT/org/richfaces/ui.pack.js’></script>
<link type=”text/css” rel=”stylesheet” href=”#{facesContext.externalContext.request.contextPath}/publica/css/estilo.css” media=”screen” />
<ui:insert name=”css”></ui:insert>
</head>
Com isso, consegui resolver o problema da modal. Um desvantagem desse método é que esses arquivos juntos são por volta de 500K, o que demora na primeira carga do site.
Como estava com essa dúvida, postei no forum do richfaces e me passaram outra opção. Recomendo darem uma olhada para escolherem uma opção que melhor se adapte ao problema: http://www.jboss.org/index.html?module=bb&op=viewtopic&p=4230174
Leave your response!