0

I need refresh (reload) page when a particular class is not present (disappears). This class changed because another previous jQuery event (removeClass).

HTML initial (example):

<div class="class1 class2">
</div>

and after a event:

<div class="class1">
</div>

when "class2" is not present I need launch the script to refresh page.

Thanks (and sorry for my bad english).

David de la O
  • 15
  • 6
  • why can't you refresh, when you are removing the class? – Kuru May 25 '17 at 16:41
  • Dupe of [jQuery bind event to class change](https://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) plus [jQuery reload page](https://stackoverflow.com/questions/5404839/how-can-i-refresh-a-page-with-jquery) – Stephen S May 25 '17 at 16:41
  • do you control when you remove the class? – TedMeftah May 25 '17 at 16:41
  • Possible duplicate of [jQuery - Fire event if CSS class changed](https://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) – Kuru May 25 '17 at 16:41
  • 1
    You could use `MutationObserver`. Check https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver out. – Teemoh May 25 '17 at 16:43
  • @Kuru because the class is removing after upload a image is finished, but the change no apply until page refresh (I would like it to be done automatically) – David de la O May 25 '17 at 16:46
  • @Mohamed-Ted no, I'm not in control – David de la O May 25 '17 at 16:47

1 Answers1

2

You can use MutationObserver. I wrote an example here :

http://jsbin.com/vahixehema/edit?html,js,output

var target = document.getElementById('foo');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === "class") {
      // the class of the target node changed
      if(!target.className.match(/\bbar\b/)){
        // bar is now not present
        alert("class 'bar' was removed");
        observer.disconnect();
        // reload the page here.
      }
    }
  });
});

observer.observe(target, { attributes: true });

// remove class after 3 seconds
window.setInterval(function(){
   target.classList.remove("bar");
}, 3000);

The basic idea is to listen for when the class attribute of your target node changes, and then when it does, check if the class you care about has been removed.

If you're using jQuery anyway, you could probably use !$.hasClass('bar') or something like that instead to check if the class has been removed.

Karl Reid
  • 2,147
  • 1
  • 10
  • 16
  • That's right, but the class in observation first does not exist, then it appears (when loading a file) and after an event (the load ends) this disappear. When it’s not present again, it’s when I need to launch refresh order… With this code the command of reload is released continuously since the class does not yet exist at a start… How do I correct it? Thanks! – David de la O May 26 '17 at 07:23
  • Have you ran the code? That's not the behavior I see. If I start with the node not having the class, then add it, and then later remove it, the refresh only happens when it is removed. See this : http://jsbin.com/winiyezivo/edit?html,js,output where I add `bar` after 3 seconds and remove it after 5. – Karl Reid May 26 '17 at 10:17
  • Ummm ... true ... maybe some conflict with other scripts is preventing it from working as your demo. I look at it more closely. Thanks! – David de la O May 29 '17 at 07:57