JQuery not working when referred from external file in Grails

Question

I have to dynamically load a set of values based on value I chose in another drop down.

In a controller I have the following code,

def ajaxGetCities(params){

   println params.id
   def userCustPlantDetails = utilitySummaryService.fetchUserCustPlantDetails('PHILL00')

   def data = []
   userCustPlantDetails?.get('UserPlantList').collect{
        data << it.pwr_plt_nme
   }

   [data: data]         
}

In a GSP I have :

 <g:select class="btn btn-default" name="viewValue" from="${view}" onchange="${remoteFunction(
        action:'ajaxGetCities', 
        params:'\'id=\' + escape(this.value)', 
        onSuccess :'updateCity(data)')}"></g:select>

When I change the value of dropdown, I see the trigger and controller action is called. Post that Javascript(JQuery) updateCity is working perfectly. I have the script under in the same .gsp file. If I move this script to a external file in the proj folder ( under assets/javascript) . The page is not rendered properly. I mean few components are not rendered. I placed the external file reference just before the tag also tried putting before all the contents of the GSP. Without the mentioned javascript above all other scripts in the file run great wherever the refer the file. When i move the javascript from GSP to index.js. This problem is occuring.

Answer 1

That's not JavaScript. It's a Grails GSP expression using a taglib and Groovy code. It generates JavaScript at runtime which gets written to the HTML sent to the browser, and that's why it works when it's in the GSP. But there is no processing of .js files to look for GSP expressions, taglib calls, Groovy code, etc. - those files are assumed to be just static JavaScript.

To use this in a .js file you need to get the generated JavaScript code, and this is available from your browser - view the source of the generated page to see it.