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

Question

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

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

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?

javascript jquery asp.net ajax ajaxtoolkit

asked by anonymous 30.12.2014 / 17:10

3 answers

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

Leave centered bullets and right and left navigation arrows on slider How to save only two information

score 1 · Accepted Answer

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();
        }
    });