1 
     $(document).ready(function(){

$(".Personalized").click(function(){



    if($("#divPersonalized").is(':visible')){

        $('#triangle-personalized').hide();
        $("#divPersonalized").hide();
    }

    else if($('#loading_personalized').is(':visible'))
    {
        $('#loading_personalized').hide();
                   //if this event is true, abort ajax call here

    }

    else {


    $.ajax({

        type:"POST",
        url:"personalized.php",
        cache:false,
        beforeSend: function(){
            $('#loading_personalized').show();
            $('#triangle-personalized').show();
        },

        complete: function(){
            $('#loading_personalized').hide();

        },
        success: function(html){


            $("#divPersonalized").html(html).show();
        }


    });
    }       
});
Improve this question
4
  • That part of the code won't even be hit since the AJAX is in a different part of the condition block.
    – tymeJV
    Commented Feb 3, 2014 at 19:09
  • yeah that's true..but i dont understand why it is still executing that..
    – roanjain
    Commented Feb 3, 2014 at 19:12
  • 2
    What's the question here?
    – gen_Eric
    Commented Feb 3, 2014 at 19:17
  • the problem is that when i click on .personalized class it does not have both #loading_personalized and #divPersonalized so it takes the ajax call ..and as soon as i click again on .personalized in time the id #loading_personalized is showing up it hides but the previous ajax call is not canceled yet so it executes and shows #divPersonalized,,but i want that at the time the #loading_personalized is showing up and i click on .personalized the previous ajax call should also cancel..
    – roanjain
    Commented Feb 3, 2014 at 19:37

1 Answer 1

Reset to default
1

assign the ajax call in a variable say myAjaxCall, and use myAjaxCall.abort();

$(document).ready(function(){
   $(".Personalized").click(function(){
     if($("#divPersonalized").is(':visible')){
        $('#triangle-personalized').hide();
        $("#divPersonalized").hide();
     } else if($('#loading_personalized').is(':visible')){
        $('#loading_personalized').hide();
        //if this event is true, abort ajax call here
         myAjaxCall.abort();
     } else {
         myAjaxCall =  $.ajax({
                 type:"POST",
                 url:"personalized.php",
                 cache:false,
                 beforeSend: function(){
                 $('#loading_personalized').show();
                 $('#triangle-personalized').show();
                 },

                 complete: function(){
                     $('#loading_personalized').hide();
                 },
                 success: function(html){
                     $("#divPersonalized").html(html).show();
                 }
            });
      } 
     });
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.