How to execute a jquery / javascript function only on page load and avoid postback?

0

Hello.

I have a function to "create" a Accordion of jQuery UI in my div .

It turns out that inside this my div there are several controls that make post on the page. What I want is that by making a post on the page, my accordion holds the state, ie if it is open, I want it to remain open, if it is closed, I want it to remain closed.

The code that "creates" the Accordion

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

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

The problem of "creating" the accordion in $(document).ready is that it will be re-created every post

Addendum : I'm also using the AjaxControlToolkit UpdatePanel to keep the states of my page controls.

How do I make my function accordion(); only be called once?

    
asked by anonymous 30.12.2014 / 17:10

3 answers

1

The ideal instead of you throwing this responsibility to the backend side is to keep this on the front end. Then save the cookie state.

And then check in the javascript by reading from the cookie your state.

In the beforeActive you save a cookie, for example. 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
        }
    });
}

When instantiating the accordion check it out

    $(document).ready(function () {
        if(document.cookie.indexOf("accordion=true;") == -1){
          accordion();
        }
    });
    
30.12.2014 / 18:28
0

Try this:

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

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

Case needed razor version change statement like this:

var isPostBack = @Page.IsPostBack.ToString().ToLower(); // versão com razor
    
30.12.2014 / 18:15
0

I solved the problem by working with Coockie as the @RenanBorges suggested and the events of the Accordion . To manage the cookies I used the jQuery Cookie .

The end result looks like this:

$(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
          });
        }
      });
    }
    
30.12.2014 / 22:08