jquery not working after ajax calling

Question

I have a problem with jQuery not working after making an AJAX call. It's a drag and drop script that works correctly, but it stops when I want to call AJAX.

var ary1=new Array(5);
ary1[0]="container1";
ary1[1]="container2";
ary1[2]="container3";
ary1[3]="container4";
ary1[4]="main_container";
var ary2=new Array(5)
ary2[0]=0;
ary2[1]=0;
ary2[2]=0;
ary2[3]=0;
ary2[4]=4;
var i;
var srouce,dest;
var old;

$(window).load(function(){

$(function() { 

  $( ".draggable" ).draggable();

    $( ".droppable, #droppable-inner" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
               //if(ui.draggable.parent().attr('id')=="container1")alert("Yep");

          alert(ui.draggable.attr('id') + ' was dropped from ' +        ui.draggable.parent().attr('id')+' into '+$(this).attr('id'));
          $( this ).addClass( "ui-state-highlight" );

            // Move the dragged element into its new container

          srouce= ui.draggable.parent().attr('id');
          dest=$(this).attr('id');
          for(i=0;i<5;i++){
          if(srouce==ary1[i])break;} // to get src
          alert(ary1[i]);
          if((ary2[i]>0&&ary2[i]<=4&&ary1[i]=="main_container")||               (ary2[i]==1&&ary1[i]!="main_container"))
          {
          old=i;
          ary2[i]--;
          alert(ary2[i]); // decrement flag
          for(i=0;i<5;i++){
          if(ary1[i]==dest)break;}//to get dest
          alert(ary1[i]);
          if((ary2[i]==0&&ary1[i]!="main_container")|| (ary2[i]>=0&&ary2[i]<4&&ary1[i]=="main_container")) 
          {
            ary2[i]++;//increment flag
            alert(ary2[i]);
            ui.draggable.attr('style','position:relative ;cursor:hand');// move the image 
            $(this).append(ui.draggable);

          }

          else

          { 
            ary2[old]++;
            ui.draggable.attr('style','position:relative ;cursor:hand');
            ui.draggable.parent().append(ui.draggable);
            }

          }

            return false;
           }            
       });
  });

 });//]]>

1. Where's the AJAX code? 2. `$(function...)` is the same as `$(document).load(function ...)`, you don't need both. — Barmar, Feb 23 '13 at 11:48
Yes, there is no AJAX code - you're just calling nested function on page load - @Barmar wrote about this. — kbec, Feb 23 '13 at 12:16

score 1 · Answer 1 · edited May 23 '17 at 10:30

You don't need $(window).load(function() as described in your question use the jQuery DOM ready event to wire the events. In general when you receive http response and load the page again you will only loose these DOM events only if you use partial rendering.

And if you are referring to UPDATE PANELs usage as AJAX call then it is a common issue and you need to make sure you rewire your jQuery events right after the updatepanel activity is over. See this link

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

solution for this duplicated question could be found here and this solution worked with me.

As a conclusion, Change your code from

$(function(){
   $(".cmdclose").click(function(){    
     // your code    
   });
});

to

$(function(){
    $(document).on("click",".cmdclose",function(){
       //your code
    });
});

edited May 23 '17 at 12:18

Community

1
1

answered Aug 03 '13 at 14:30

Samy Omar

800
14
29

jquery not working after ajax calling

2 Answers2