How to run a jquery/javascript function only in the page load and avoid postback?

Asked

Viewed 3,776 times

0

Hello.

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

Turns out inside this mine 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 keep the state, that is, if it is open, I want it to keep open, if it is closed, I want it to remain closed.

Follow 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 the $(document).ready is that he will be recreated every post page.

Addendum: I’m also using the Updatepanel from the Ajaxcontroltoolkit to maintain the states of my page controls.

How I do for my job accordion(); be called only once?

javascript jquery ajax asp.net ajaxtoolkit

3 answers

1


Ideally instead of you throwing this responsibility to the backend side is to keep it on the front end. So save its state in the cookie.

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

in 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 do a check

    $(document).ready(function () {
        if(document.cookie.indexOf("accordion=true;") == -1){
          accordion();
        }
    });

  • the line document.cookie.indexOf("accordion=true;") always returns -1, so it will always execute the function accordion(). And this is exactly what I don’t want. I need this function accordion() is executed only once.

0

Try this:

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

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

If you need the Razor version change the declaration like this: 

var isPostBack = @Page.IsPostBack.ToString().ToLower(); // versão com razor

  • Thank you for your reply, but in this case isPostBack is always true then he will always "recreate" my accordion which is exactly what I don’t want. If I leave to call the function accordion() only when the isPostBack for false my accordion will never be created.

  • I’ll try another approach, you’re using Razor?

  • Another detail that went unnoticed, is that you just want to call the accordion if it is not postback.

  • I am not using Razor. I am using ASP.NET with Updatepanel from Ajaxcontroltoolkit.

  • @Leonardoribeirodeaguiar see if it works.

  • The same thing happens, the isPostBack is always true and so he never "creates" the accordion.

Show 1 more comment

0

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

The end result was 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
          });
        }
      });
    }

Browser other questions tagged javascript jquery ajax asp.net ajaxtoolkit

You are not signed in. Login or sign up in order to post.