I have a page that embeds a .js hosted elsewhere. This .js has a button that triggers an action on the server and return a success message on my page inside a specific div.
How can I detect when this message arrives and replace it with another div that I provide?
This answer suggests a DOM change event is in bleeding-edge browsers. So you could listen for that if you use the supporting browsers only.
Otherwise, you may need to set a recurring timer (setTimeout or setInterval) to periodically check if the div has changed, and then react to this.
A third possibility is finding out how the external script actually uses the DOM node you pass to it. You could create a shim object with any luck. E.g., if the external script assigns to innerHTML to set the content, then you could pass a dummy object to the external script, and react to a 'fake' innerHTML property being set. This would probably use defineProperty.
A fourth approach could be to find out how the external script communicates with the server, and add a layer of indirection. E.g. if external script uses $.ajax, then replace this with your own code that can detect the particular signature of the external script's request.
A fifth approach is to overwrite the external script's button-click functionality. E.g. if the button-click function calls a global externalScriptButtonClick function, then overwrite this. This would probably only work if you have visibility on this code, and not if it's 'private' and wrapped in a closure, for example.
