CODEWITHSUNDEEP
javascriptjquery
vikrant
vikrant

Reputation: 15

jquery addClass adding a class to div but also removing it instantly

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.

Upvotes: 0

Views: 875

Answers (4)

Aria
Aria

Reputation: 3844

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');
    }
})

Upvotes: 0

Mark Baijens
Mark Baijens

Reputation: 13222

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>

Upvotes: 0

Giacomo Paita
Giacomo Paita

Reputation: 1419

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.

Upvotes: 0

brk
brk

Reputation: 50326

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')

Upvotes: 1

Related Questions