jQuery addClass将一个类添加到div但也立即将其删除

Question

Hi i am trying to remove a class from div (hide class) and want to add a class (show class). i am using addClass and removeClass for this but this behaving very funny.

$('#table-csv').removeClass('hideDiv')

it is removing class from div but adding it again instantly. I am doing it in ajax success response from Django view.

I tried lots of solution available on Stackoverflow and other websites but no luck.

css classes:

.hideDiv{
    display: none;
}
.showDiv{
    display: block;
}

my script:

  $.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    {

      $('#table-csv').addClass('showDiv').removeClass('hideDiv');
    }
})

when I am trying to removeClass on simple button click then it is working fine. problem is only when I am doing it in ajax success response

I know I will get lots of down votes for this question but I need help.

Answer 1

You may not need two separate class one to hide another to show . Instead create a single class

.hide{
 display:none;
}

When required to hide the element do $(elementSelector).addClass('hide') and when required to show do $(elementSelector).removeClass('hide')

Answer 2

Insert in the DOM the code from the AJAX call and after remove the class in the success function :

$.ajax({
 ...
 success : function (data) {
     $("#div").html(data).find('#table-csv').addClass('showDiv').removeClass('hideDiv');
 },
});

My suggestion: make some console.log for the 'data' in the success function to test the response.

Answer 3

Do you declare the hide class inline like this:

 $('#table-csv').addClass('showDiv').removeClass('hideDiv'); 

 .hideDiv { display: none; } .showDiv { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hideDiv"> test </div> 

That doesn't seem to work. Try to remove it then and add the class trough javascript.

 $('#table-csv').addClass('hideDiv'); $('#table-csv').addClass('showDiv').removeClass('hideDiv'); 

 .hideDiv { display: none; } .showDiv { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> test </div> 

Answer 4

I think when you are using ajax you can not access UI thread, it seems they have different thread, for this reason an easy way is saving dom element to a variable and then manipulate it in ajax success like, in the other words success event won't access dom elements or another UI objects truly :

var myElement =  $('#table-csv');
$.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    { 
       myElement.addClass('showDiv').removeClass('hideDiv');
    }
})

or this may because of calling removeClass and addClass successively, this is better to call them separately like :

$.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    { 
        $('#table-csv').addClass('showDiv');
    },
   stop: function( data ) 
    { 
        $('#table-csv').removeClass('hideDiv');
    }
})