0

I need to initiate an ajax call once a div is empty (involving an animation).

if($(document).find('h2').is(':empty')) {
     //do something
};

The only issue is, the way this statement is setup, it only looks once the document is ready. I'm trying to do this without using a setTimeout function.

For example, I know if I want to do something when a select dropdown is changed, I can use: $('select').change(). Any ideas?

TechyDude
  • 1,165
  • 3
  • 16
  • 24

3 Answers3

1

There is no reasonable way to do this currently; checking with an interval is the only reliable solution, and even that leaves a lot to be desired technically.

DOM Mutation Observer would let you solve this problem easily and without any constraints, but browser support is less than ideal.

The best approach today (if possible in your scenario) would be to hook into the code that empties the element and have it invoke your callback when the time has come.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • I'm using a plugin called typer.js. Inside that file there is a function that deletes characters in an H tag one by one till they are empty. So If there is a function within that file, outside of the current js file I am working in, how can I set a hook like that? Unfortunately I need back to IE9. – TechyDude Sep 06 '14 at 23:39
  • @TechyDude: If that plugin offers one you use it; if not, you could consider modifying it to add one; otherwise, you can't do it that way. – Jon Sep 06 '14 at 23:42
  • Agreed. That's what I'm trying to figure out, I'm just not sure how to go about that - do I set a variable on callback? Or what would I do to create a hook? (in theory) – TechyDude Sep 06 '14 at 23:43
  • 1
    @TechyDude: Add a new [option](https://github.com/layervault/jquery.typer.js/blob/master/src/jquery.typer.js#L15) with null default that you will use to store the callback; then inside [`clearData`](https://github.com/layervault/jquery.typer.js/blob/master/src/jquery.typer.js#L52) get hold of it and call it. Should work. – Jon Sep 06 '14 at 23:49
  • Thanks for your last comment - definitely the right direction. However in clearData, the ajax call I am doing in the callback function is completed before all the text is highlighted. It's activating prematurely. I'm trying to see if there is a better spot in the plugin to place the function. – TechyDude Sep 07 '14 at 00:34
1

If typer.js provides source code that you can hook into, I would have it trigger a custom event that you can then listen for in your code.

I imagine there would be some for loop that deletes each character one by one, so at the end of the loop you can do something like: 

for(var i = 0; i < $('#divId').innerText.length; i++){
...
}

$(document).trigger('YourCustomEvent');

And on your end, you can bind to the custom event thusly: 

$(document).on('YourCustomEvent', YourCallBackFunction);

And then handle the callback:

function YourCallBackFuntion(){...
}

The beauty of this approach is that you don't even have to define your custom event, you just have to make sure the binding matches up.

user2692837
  • 92
  • 1
  • 5
0

I dug a bit deeper, and found this solution here: What's the easiest way to call a function every 5 seconds in jQuery?

window.setInterval(function(){
  if($(document).find('h2').is(':empty')) {
     //do something
  };
}, 5000);

Not a light solution, however it is not run for very long.

Community
  • 1
  • 1
TechyDude
  • 1,165
  • 3
  • 16
  • 24