0

Olá.

Tenho uma função para "criar" um Accordion do jQuery UI na minha div.

Acontece que dentro desta minha div existem vários controles que fazem post na página. O que eu quero é que, ao fazer um post na página, o meu accordion mantenha o estado, ou seja, se ele estiver aberto, quero que ele se mantenha aberto, caso esteja fechado, quero que ele permaneça fechado.

Segue o código que "cria" o Accordion

$(document).ready(function () {
    accordion();
});

function accordion() {
    $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        beforeActivate: function (event, ui) {
            // faço algumas coisas aqui.
        }
    });
}

O problema de "criar" o accordion no $(document).ready é que ele será recriado a cada post da página.

Adendo: Estou usando também o UpdatePanel do AjaxControlToolkit para manter os estados dos meus controles da página.

Como faço para a minha função accordion(); ser chamada apenas uma vez?

3 Respostas 3

1

O ideal em vez de você jogar essa responsabilidade para o lado do backend é manter isso no front end. Então salve o estado dele no cookie.

E então faça a verificação no javascript lendo do cookie o seu state.

no beforeActive você salva um cookie, por exemplo. Accordion: true.

function accordion() {
    $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        beforeActivate: function (event, ui) {
            document.cookie="accordion=true";
            //coloque uma lógica aki para setar para false quando ele já existir e for true, use algum plugin de cookie de jquery para facilitar sua vida
        }
    });
}

quando for instanciar o accordion faça uma verificação

    $(document).ready(function () {
        if(document.cookie.indexOf("accordion=true;") == -1){
          accordion();
        }
    });
1
  • a linha document.cookie.indexOf("accordion=true;") retorna sempre -1, sendo assim ele sempre executara a função accordion(). E isto é exatamente o que eu não quero. Preciso que esta função accordion() seja executada apenas uma vez. 30/12/2014 às 18:30
0

Tente isso:

var isPostBack = <%=Page.IsPostBack.ToString().ToLower()%>; // 

$(document).ready(function () {
    if (!isPostBack) { 
        accordion();
    }
});

Case precisar da versão com razor mude a declaração assim:

var isPostBack = @Page.IsPostBack.ToString().ToLower(); // versão com razor
6
  • Obrigado pela resposta, mas neste caso o isPostBack é sempre true então ele sempre irá "recriar" meu accordion que é exatamente o que eu não quero. Se eu deixar para chamar a função accordion() somente quando o isPostBack for false o meu accordion nunca será criado. 30/12/2014 às 17:26
  • Vou tentar outra abordagem, vc está usando Razor?
    – iuristona
    30/12/2014 às 17:30
  • Outro detalhe que passou despercebido, é que vc só quer chamar o accordion caso não seja postback.
    – iuristona
    30/12/2014 às 17:36
  • Não estou utilizando Razor. Estou usando ASP.NET com UpdatePanel do AjaxControlToolkit. 30/12/2014 às 17:51
  • @LeonardoRibeirodeAguiar veja se isso funciona.
    – iuristona
    30/12/2014 às 18:12
0

Resolvi o problema trabalhando com Coockie como o @RenanBorges sugeriu e os eventos do próprio Accordion. Para gerenciar os cookies eu utilizei o jQuery Cookie.

O resultado final ficou assim:

$(document).ready(function() {
      var abertoOuFechado = 0;
      if ($.cookie('active') != null) {
        if (isNumber($.cookie('active'))) {
          abertoOuFechado = $.cookie('active', Number);
        } else {
          abertoOuFechado = $.cookie('active', Boolean);
        }
        $.removeCookie('active');
      }

      accordion(abertoOuFechado);
    }

    function accordion(abertoOuFechado) {
      $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: 0,
        create: function(event, ui) {
          $.removeCookie('active');
          $("#accordion").accordion("option", "active", abertoOuFechado);
        },
        activate: function(event, ui) {
          var active = $("#accordion").accordion("option", "active");
          $.cookie('active', active, {
            expires: 1
          });
        }
      });
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .