If you're experiencing javascript weirdness with load ajax page in a Grails application ...

If something you expect isn't working the way it should for a page that is loaded via ajax (ie. using jQuery's $.load() method), here are a couple common culprits that I'd thought I share before blaming the javascript libraries.

In anyone is interested, in my case it was jQuery dialog refusing to close after a $.dialog('close').

Here are the frameworks/plugins I was using when I experience this problem:

Grails
Resources plugin for Grails
Sitemesh for rendering.

I'm using Grails to load up the views as well as any ajax page loads.

Tip #1 - When using the resources plugin, check to see if you want to set disposition="head". For knockout, they suggest putting it in the head to ensure it loads first. By default if you don't put disposition="head" it will defer the rendering after the body.

Tip#2 - Check any view loads via ajax uses a different "main" layout template. Most likely, your default "main" layout includes the js resources. If you're doing an ajax load such as jQuery's $.load(), then if make sure you don't reload the js libraries again. Create a custom layout or don't use a layout to load the view. (ie. <g:render template...> instead).

Tip#3 - Again when rendering an ajax page and using a declared resources plugin module, make sure that module doesn't inherit (using the keyword "depend") to bundle the javascript, because again, the core js bundles have already been loaded.

     //bad example 

      "myajax" { 

           dependsOn 'core' 

           resource url: '/js/index/index.js', disposition: 'head' 

      } 

     //good example 

      "myajax" { 

           resource url: '/js/index/index.js', disposition: 'head' 

      }