Olá pessoal,
Me desculpem se estiver postando no lugar errado.
Estou com um problema onde meu accordion está dentro de uma tabela e é criado dinâmicamente e depois inserido como parte do código html, porém ele não está funcionando, o css não funciona nele e as funções do accordion de abrir e fechar as abas tbm não funcionam.
Ele carrega totalmente na tela da maneira que eu queria porém não funciona, fica lá estático com todas as abas abertas.
Estou construindo um sistema web e utilizo o acordion dentro de uma tabela segundo código abaixo:
<table cellspacing="0" cellpadding="0" width="100%" border="1" bordercolor="#ccc">
<tr height="300px">
<td bordercolor="NavyBlue" width="40%" valign="top">
<%@include file="/WEB-INF/jsp/acompanhamento/treeviewEmpresa.jsp" %>
</td>
<td bordercolor="NavyBlue" width="60%">
<!-- Esta parte é onde insere o accordion que será criado pelo controller e depois retornado via ajaxsubmit para ser feito um innerhtml -->
<div id='accordion' class='display' style='height: 300px; overflow: scroll;' ></div>
</td>
</tr>
</table>Este é o form utilizado para o ajax submit.
<form id="acordionPergunta" action="${pageContext.request.contextPath}/acompanhamento/acordionPergunta/" method="post">
<input type="hidden" name="idChecklist" id="idChecklistAcomp">
<input type="hidden" name="idCiclo" id="idCicloAcomp">
<input type="hidden" name="idFilial" id="idFilialAcomp">
<input type="hidden" name="idEmpresa" id="idEmpresaAcomp">
</form>Este é o javascript utilizado para inicializar o accordion via jquery:
<script type="text/javascript">
$(document).ready( function() {
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
$('#accordion').accordion({
'clearStyle' : true,
'collapsible' : true,
'active' : false,
'autoheight' : false
});
});Esta é a função que será chamada para a criação do accordion:
function acompanharChecklist(idEmpresa, idFilial, idCiclo, idChecklist){
document.getElementById("idEmpresaAcomp").value = idEmpresa;
document.getElementById("idFilialAcomp").value = idFilial;
document.getElementById("idCicloAcomp").value = idCiclo;
document.getElementById("idChecklistAcomp").value = idChecklist;
$(document).ready(function() {
$(document.forms["acordionPergunta"]).ajaxSubmit({
dataType: 'text',
success: function(resultado){
document.getElementById("accordion").innerHTML = resultado;
},
error: function(){
resultado = "Não foi possível carregar os dados desse checklist.";
document.getElementById("accordion").innerHTML = resultado;
}
});
});
}Este é o html para chamada da criação do accordion (está dentro do jsp do treeview):
<a href="javascript:acompanharChecklist('${empresa.id}','${filial.id}','${ciclo.id}','${checklist.id}');">E finalmente este é o código que faz a criação dinâmica do accordion no controller:
@Post("/acordionPergunta/")
public void acordionPergunta(String idEmpresa, String idFilial, String idCiclo, String idChecklist) {
StringBuffer divAcordionPergunta = new StringBuffer();
if (!ChecklistUtil.isNullOrEmpty(idChecklist) && !ChecklistUtil.isNullOrEmpty(idCiclo) && !ChecklistUtil.isNullOrEmpty(idFilial)
&& !ChecklistUtil.isNullOrEmpty(idEmpresa)) {
Ciclo ciclo = new Ciclo();
ciclo.setId(Long.valueOf(idCiclo));
ciclo = cicloService.findById(ciclo);
Filial filial = new Filial();
filial.setId(Long.valueOf(idFilial));
filial = filialService.findById(filial);
Empresa empresa = new Empresa();
empresa.setId(Long.valueOf(idEmpresa));
empresa = empresaService.findById(empresa);
Checklist checklist = new Checklist();
checklist.setId(Long.valueOf(idChecklist));
checklist.setPerguntaList(new ArrayList<Pergunta>());
checklist = checklistService.findById(checklist);
List<GrupoPergunta> grupoPerguntaList = new ArrayList<GrupoPergunta>();
// obtem as "categorias"(GrupoPergunta) para mostrar na tela
for (Pergunta pergunta : checklist.getPerguntaList()) {
GrupoPergunta grupoPergunta = new GrupoPergunta();
grupoPergunta.setId(pergunta.getGrupoPergunta().getId());
grupoPerguntaList.add(grupoPerguntaService.findById(grupoPergunta));
}
grupoPerguntaList = grupoPerguntaService.tratarListaGrupo(grupoPerguntaList);
List<TipoResposta> tipoRespostaList = new ArrayList<TipoResposta>();
// divAcordionPergunta.append("<div id='accordion' class='display' style='height: 300px; overflow: scroll;' >");
// Obtem as perguntas de cada Categoria
for (GrupoPergunta grupoPergunta : grupoPerguntaList) {
Integer i = new Integer(0);
divAcordionPergunta.append(" <h3><a href='#'>" + grupoPergunta.getId() + " - " + grupoPergunta.getDescricao() + "</a></h3>");
divAcordionPergunta.append(" <div class='display'>");
divAcordionPergunta.append(" <table cellspacing='0' cellpadding='0' width='100%'>");
divAcordionPergunta.append(" <tr>");
divAcordionPergunta.append(" <td align='left' width='90%'>");
divAcordionPergunta.append(" <table id='templateTable" + i + "' class='display' cellspacing='0' cellpadding='0' align='center'>");
divAcordionPergunta.append(" <thead>");
divAcordionPergunta.append(" <tr>");
divAcordionPergunta.append(" <th></th>");
divAcordionPergunta.append(" <th>Descrição</th>");
divAcordionPergunta.append(" <th width='50px'>Status</th>");
divAcordionPergunta.append(" <th width='20px'>Nota</th>");
divAcordionPergunta.append(" </tr>");
divAcordionPergunta.append(" </thead>");
divAcordionPergunta.append(" <tbody>");
Pergunta pergunta = new Pergunta();
pergunta.setGrupoPergunta(grupoPergunta);
pergunta.setResposta(new Resposta());
pergunta.getResposta().setFilial(filial);
pergunta.getResposta().setEmpresa(empresa);
pergunta.setTipoResposta(new TipoResposta());
grupoPergunta.setPerguntas(perguntaService.findByFilter(pergunta));
Integer j = new Integer(0);
for (Pergunta perguntaFiltro : grupoPergunta.getPerguntas()) {
perguntaFiltro.setResposta(obterResposta(perguntaFiltro.getId(), empresa.getId(), filial.getId(), ciclo.getId(), checklist.getId()));
if (ChecklistUtil.isNullOrEmpty(perguntaFiltro.getResposta()) || perguntaFiltro.getResposta().getId() == null
|| perguntaFiltro.getResposta().getId().equals(Long.valueOf(0))) {
perguntaFiltro.setResposta(new Resposta());
perguntaFiltro.getResposta().setNota(Double.valueOf(ChecklistConstantes.ZERO_DOUBLE));
perguntaFiltro.getResposta().setSituacaoResp("Não Respondida");
} else {
perguntaFiltro.getResposta().setSituacaoResp("Respondida");
}
tipoRespostaList.add(perguntaFiltro.getTipoResposta());
divAcordionPergunta.append(" <tr");
if (perguntaFiltro.getResposta().getId() != null) {
divAcordionPergunta.append(" class='gradeA' ");
} else {
divAcordionPergunta.append(" class='gradeU' ");
}
divAcordionPergunta.append(">");
divAcordionPergunta.append(" <td align='left'>" + perguntaFiltro.getId() + "</td>");
divAcordionPergunta.append(" <td align='left'>" + perguntaFiltro.getDescricao() + "</td>");
divAcordionPergunta.append(" <td align='left'>" + perguntaFiltro.getResposta().getSituacaoResp() + "</td>");
divAcordionPergunta.append(" <td align='left'>" + perguntaFiltro.getResposta().getNota() + "</td>");
divAcordionPergunta.append(" </tr>");
j++;
}
divAcordionPergunta.append(" </tbody>");
divAcordionPergunta.append(" </table>");
divAcordionPergunta.append(" <div class='spacer'></div>");
divAcordionPergunta.append(" </td>");
divAcordionPergunta.append(" </tr>");
divAcordionPergunta.append(" </table>");
divAcordionPergunta.append(" </div>");
i++;
}
// divAcordionPergunta.append("</div>");
/*divAcordionPergunta.append("<script type='text/javascript'>");
divAcordionPergunta.append(" $(document).ready( function() {");
divAcordionPergunta.append(" $('.accordion .head').click(function() {");
divAcordionPergunta.append(" $(this).next().toggle('slow'); ");
divAcordionPergunta.append(" return false;");
divAcordionPergunta.append(" }).next().hide();");
divAcordionPergunta.append(" $('#accordion').accordion({");
divAcordionPergunta.append(" 'clearStyle' : true,");
divAcordionPergunta.append(" 'collapsible' : true,");
divAcordionPergunta.append(" 'active' : false");
divAcordionPergunta.append(" });");
divAcordionPergunta.append(" });");
divAcordionPergunta.append("</script>");*/
} else {
divAcordionPergunta.append(" Selecione um checklist ao lado para exibir os dados.");
}
result.use(http()).body(divAcordionPergunta.toString());
}Sem mais desde já agradeço.
Qualquer ajuda é bem vinda.
