jump to navigation

Problemas com a modal para o IE8 maio 12, 2009

Posted by marcomalaquias in jsf.
trackback

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&aacute;rios Online – P&aacute;gina Inicial</title>

<meta name=”language” content=”portuguese” />
<meta name=”author” content=”http://www.knowtec.com&#8221; />
<meta name=”copyright” content=”Instituto Volunt&aacute;rios em A&ccedil;&atilde;o” />
<meta name=”keywords” content=”volunt&aacute;rios, online, oportunidades, voluntariado, volunt&aacute;rios, ong, ongs, organiza&ccedil;&otilde;es, organiza&ccedil;&atilde;o, presencial ” />
<meta name=”description” content=”portal http://www.voluntariosonline.org.br onde &eacute; poss&iacute;vel participar de trabalhos volunt&aacute;rios nas organiza&ccedil;&otilde;es ou em casa, atrav&eacute;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

Anúncios

Comentários»

1. Bispo - maio 27, 2009

Parabéns pelo post! Principalmente porque eu estava atravessando esse problema há tempos.

Agora uma dúvida: Será que em qual versão do Rich teremos o problema corrigido?

Gran de abraço

2. marcomalaquias - maio 27, 2009

Obrigado.

Pelo fórum do richfaces, vi que será resolvido na próxima versão do richfaces.
Vamos aguardar para ver.

Um detalhe é que tive um problema com o opera com o esquema de colocar o js estático. Assim que eu tiver um tempo e achar uma solução, posterei novamente.
Grato.

3. Isaias - setembro 1, 2009

Isso ai meu amigo, arrassou!


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: