Refresh div during JQuery update

Question

I have a html file with many div. Beside this I have a JQuery file too which run an AJAX request in every 30 seconds. In my JQuery If a condition met and the jQuery reloded 3 times I want to update my div-s. I tried to add a div, but it does not appear just when I reload my whole page. If I set to remove my div and not add, the JQuery removes my div, so it is very odd for me, because just the .add or .append or .html do not working. furthermore I set a class with invisibility too, and I also set that when the condition met the jQuery file remove the invisibility class, but the div do not want to appear. I am trying to create a sample code.

My html

<div  class="row">
      <div  id="myclass" class= "invisible" >
           <div <p> Please appear for me!<p></div>
      </div>  
</div>

My JQuery:

if (condition) {
    $('#myclass').removeClass('invisible');

    if (n >= 2) {
        $('#myclass').addClass('invisible');
    }
}   

The main point is, If the conditions met the class not removes just When I reload my page. In the jQuery file the n is equal with the times when the AJAX reloaded with setInterval. My question is why my div not appear just when I reload my whole page? Also why remove without reload?

Thank you in advance the answers!

Answer 1

removeClass and addClass perfectly work. at first, you can check if you jQuery works, just try to write you script (with ".append",".html",".insertAfter") directly in browser console, else you can add some console.log in your code, when you change invisibility like:

console.log('removeClass');
$('#myclass').removeClass('invisible');
if (n >= 2) {
    console.log('addClass');
    $('#myclass').addClass('invisible');
}

for update some div content, you can use simple function for it. like - call self page in get request, and replace div content.

function reloadMyDiv(selector){
    var element = $(selector);
    if(element.length===1){
        $.get(window.location.href,{},function(response){
            var new_page = $('<div></div>').append(response);
            var new_element = new_page.find(selector);
            if(new_element.length===1){
                element.html( new_element.html() );
                console.log('update');
            }else{
                console.log('need contains only one element, '+new_element.length+' found!');
            }
        });
    }else{
        console.log('need contains only one element, '+element.length+' found!')
    }
};

and if you more _ not use your interval, is good practice for clear it.

var n = 0;
var myInterval = setInterval(function(){ myFunction() },30*1000);
function myFunction(){
    n+=1;
    //do, what you want to do
    if(n>2){
        clearInterval(myInterval);
    }
}