After postback my JavaScript function doesn't work in ASP.NET

Question

I have common functions and I collapse it on CommonFunctions.js in Scripts folder.

I include it on my master page and use it on my pages. When I do any post back on a page, my function doesn't work.

My CommonFunctions.js:

$(function () {

    gf();
    
   if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
        
        gf();
    }


 function gf(){

    $('.AddNewGeneralPanel').click(function () {

        if ($(this).find('.AddNewGeneralPanelStyle').text() == "") {
            $(this).find('.AddNewGeneralPanelStyle').text("(  Gizle  )");
            lastOpenId = $(this).attr("codeid");
        }
        else
            $(this).find('.AddNewGeneralPanelStyle').text("");

        $(this).next('.AddNewGeneralAccordionDiv').slideToggle('slow', function () {

        });

    });
  }
});

Understructure

Are you doing partial postback? I mean update panel with Conditional postback? – Lavish

Just to confirm: is this EXACTLY the code you're using? I see a call to a "gf" function but a "gF" function is declared. Don't forget JS is case-sensitive – Stroh

yes i use update panel.it works with postback well when i use this javascript codes using <script>...<\script> on a page.But using a .js it doesnt working – Understructure

sorry i write it manualy in there.edited it. – Understructure

Answer 1

Since you're using an UpdatePanel, the part of the DOM that you've attached your event handler to is getting dropped and recreated after the postback. This has the effect of removing any event handlers that were attached by jQuery when the page first loaded.

When you postback only part of the page, the jQuery $(function() {}); doesn't fire again, so your handlers never get reattached.

Here's a related question that shows how to resubscribe your events when the UpdatePanel refreshes.

Cornett

I added a link that should help you work out how to resubscribe your function. – Cornett

Thank you @JoshEarl and thank you Mennan for this question. It really help me. – Reikoreilly

Answer 2

It is because of updatepanel partial postbacks. here is what you need to do.

function pageLoad(sender, args)
{
  $(document).ready(function(){   

   // put all your javascript functions here 

  });
}

I had the same issue and it worked for me. I hope it helps you too.

Operand

this code works on same page but i called it in masterpage.i try it but dont work for me – Understructure

do you have scriptmanager tag in master page? if not put it there and try again. – Operand

i solved this problem thx postback – Understructure

Answer 3

It is because of updatepannel used. Following code is working fine. Just put your jquery code inside the pageLoad event like below

function pageLoad(sender, args) {
     $(document).ready(function () {....}
}

Lita

The one function that was needed. Thanks! +1 – Inboard

Answer 4

i have the same problem, i have solved with this code:

<script type="text/javascript">
    function pageLoad()
    {
        $('#datetimepicker2').datetimepicker();           
    }
</script>

Lilt

Answer 5

Faced same problem. Change

$(document).ready(function() {

to

Sys.Application.add_load(function() {

this will force it to run even on partial postbacck

Fructuous

Answer 6

Assuming you are using an UpdatePanel to do the postback and the JS code is attatched to HTML elements within the update panel you need to attach them again when the update panel is loaded. You can hook up your code on the endRequest event:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)

http://msdn.microsoft.com/en-us/library/bb383810.aspx

Keep in mind that if you are using more than one update panel you should check which update panel is refreshed and attach only the events that are needed otherwise you risk events firing more than once.

Apartment

Answer 7

I had an interesting situation and figured I'd post my solution here in case it helped anyone in the future.

My problem was my OnClick events were firing on initial page load, but not after postback. My second problem was my OnClick fired once on initial page load, then more and more as postbacks went by.

<script type="text/javascript">
  // function that adds my various OnClick events
  function AddOnClicks() {
    $('.myClass').off("click.highlight"); // .off added so the event doesn't fire multiple times after postbacks
    $('.myClass').on("click.highlight", function () { // note: ".highlight" is just naming the event
        // ... on click logic
    });
  }

  $(document).ready(function () {
    AddOnClicks(); // this works for initial page load only

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
        AddOnClicks(); // this works after postback         
    });
  });
</script>

Why I needed to re-add the event on postback but also remove the previous one is beyond me. Hope this helps someone :)

Sousaphone

Answer 8

you can put all your JavaScript code in between following code.

function pageLoad(sender, args) {

}

Palinode