Question

I have a form which runs inside an Iframe and uses the excellent postmessage plugin to allow the height of the iframe to be dynamically set within the parent page. This is working very well and on page load the outerHeight of the body of the iframe document is used to set the height of the iframe. When the form within the iframe is validated however, the error messages displayed cause the height of the form to change and I need to react to this event. I have tried using the invalid callback in the plugin however it seems that this fires before the error messages have been displayed and as such reports no change in height.

The form is built using ASP.net MVC with all validation being set using datamodel annotations

I can’t see another option in the documentation, is there another event I can use? Or is there a way to monitor for DOM changes made by JQuery for example?

Answer 1

I solved this by monitoring the DOM for changes using the following plugin: https://gist.github.com/378546

All that is needed is to attach the event to the body e.g.:

$('body').bind('domchanged', function () {
    //code to execute when domchanges
});

It’s worth noting that this will fire for every error message displayed so will be called multiple times if there are multiple errors.