Run javascript function when replaceWith finishes loading

Question

I have jQuery replaceWith call, and I want to pop up an alert only when the replaceWith finishes loading .

To achieve this I have this very naive javascript implementation:

 $(document).ready(function (){ $("#myDiv").click(function () { $("#myDiv").replaceWith("<div>Hello World!!!</div>"); alert("done"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv">Hello!</div> 

The problem is that in this case the alert will pop-up independently of the time that the replaceWith takes. If it is fast, no problem, but if the replaceWith takes several seconds to load (which is the real case) then the pop-up appears way before, and I want to avoid that.

How can I achieve the behaviour I am looking for?

Answer 1

Try

$(document).ready(function() {
  var body = $("body");
  $("#myDiv").click(function(e) {
    var html =  $("<div>Hello World!!!</div>");
    $("#myDiv").replaceWith(html)
      .promise().done(function(elem) {
        if (body.find(html).is("*") 
            && !body.find(elem).is("*")) {
               alert("done");
        }
      });    
  });
});

 $(document).ready(function() { var body = $("body"); $("#myDiv").click(function(e) { var html = $("<img src=http://lorempixel.com/output/cats-qc-1920-1920-2.jpg />"); // $("<div>Hello World!!!</div>"); $("#myDiv").replaceWith(html) .promise().done(function(elem) { if (body.find(html).is("*") && !body.find(elem).is("*")) { alert("done"); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv">Hello!</div> 

Answer 2

I would try getting the value of what you're replacing - then check if it exists after the replacement - then you can alert its complete.

fiddle: http://jsfiddle.net/eavxkc3f/

jquery:

$(document).ready(function (){
  $(".myDiv").click(function () {

      var currentItem = $(".myDiv").html();
      var replacer = "<div>Hello World!!!</div>";

      $(".myDiv").replaceWith("<div>Hello World!!!</div>");

      if($(".myDiv").html != currentItem){
          alert("Done.");
      }

  });
});

Answer 3

Take a look at the DOM MutationObserver spec, I think it does what you want. Register it on a target node, and it will watch for changes beneath that target.

It's an updated version of the now deprecated Mutation events

A blog post with additional good info (and where I found this sample code)

Working example in this fiddle (code below)

$(document).ready(function (){
  $("#myDiv").click(function () {
    $("#myDiv").replaceWith("<div>Hello World!!!</div>");
  });
});

// select the target node
var target = document.querySelector('#divParent');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //console.log(mutation.type);
      alert('Done');
  });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
//observer.disconnect();