jQuery and ASP.NET UpdatePanel

Question

I'm using the code below to toggle a few different elements on the push of a arrow button. How come this code won't work if I put it inside an ASP.net UpdatePanel?

$(document).ready(function () {
$(".togglerElement").click(function () {
    var target = $(this).attr("id");
    ToggleTest(target);
});

function ToggleTest(target) {
    var container = "#" + target + "Container";
    var arrowUp = "#" + target + "ArrowUp";
    var arrowDown = "#" + target + "ArrowDown";

    $(container).slideToggle("fast");
    $(arrowUp).toggle();
    $(arrowDown).toggle();
}

});

actually ajax update panel will not work with jquery it's a very known problem you have to apply any fix for using that — rahul, Aug 20 '12 at 06:49
So I'll have to do the toggle using Ajax then, huh? Thanks for the input! — Misbit, Aug 20 '12 at 06:51
welcome i have posted some links below may be that can help you — rahul, Aug 20 '12 at 06:53
The UpdatePanel have custom functions that trigger on updates. Check this answer and see how this work and adjust your code : http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker/3341741#3341741 — Aristos, Aug 20 '12 at 06:54

score 0 · Answer 1 · answered Aug 20 '12 at 06:52

0

these are some useful links

Jquery Forum

Jquery and ajax update panel

One More

answered Aug 20 '12 at 06:52

rahul

7,573
7
39
53

score 0 · Answer 2 · answered Aug 20 '12 at 14:34

You need to implement pageLoad method in javascript code, and call your jQuery function inside of that function. And you can't use click. You need to use on if .togglerElement is inside of updatepanel.

for example:

function pageLoad(){

 $(document).ready(function () {
   $("body").on('click','.togglerElement',function(){
      var target = $(this).attr("id");
      ToggleTest(target);
   });
 });
}

function ToggleTest(target) {
    var container = "#" + target + "Container";
    var arrowUp = "#" + target + "ArrowUp";
    var arrowDown = "#" + target + "ArrowDown";
    $(container).slideToggle("fast");
    $(arrowUp).toggle();
    $(arrowDown).toggle();
}

score 0 · Accepted Answer · answered Aug 20 '12 at 19:06

try this

$(document).ready(function () {
$(".togglerElement").live('click',function () {
    var target = $(this).attr("id");
    ToggleTest(target);
});

function ToggleTest(target) {
    var container = "#" + target + "Container";
    var arrowUp = "#" + target + "ArrowUp";
    var arrowDown = "#" + target + "ArrowDown";

    $(container).slideToggle("fast");
    $(arrowUp).toggle();
    $(arrowDown).toggle();
}
});

jQuery and ASP.NET UpdatePanel

3 Answers3