CODEWITHSUNDEEP
jquery-pluginsgrails
Doris
Doris

Reputation: 1

Grails 1.3.3, JQuery 1.6.1.1, main.gsp

I've added grails.views.javascript.library="jquery" to the config.groovy, installed the plugin and ran "grails InstallJQuery" to get the .js files into /web-app/js.

If I add <g:javascript library="jquery" plugin="jquery"/> to my view, the code works as expected:

search.gsp
...
<g:javascript library="jquery" plugin="jquery"/>
...
  <div id="searchBox">
    <g:remoteField
      name="q"
      update="peoplePanel"
      paramName="q"
      url="[controller:'user', action:'search']" />
  </div>
  <div id="peoplePanel">    <!-- ajax response will be placed in this div -->
  </div>

resulting code:
...
<script type="text/javascript" src="/find-people/plugins/jquery-1.6.1.1/js/jquery/jquery-1.6.1.js"></script>
...
  <div id="searchBox">
    <input type="text" name="q" value="" onkeyup="jQuery.ajax({type:'POST',data:'q='+this.value, url:'/find-people/user/search',success:function(data,textStatus){jQuery('#peoplePanel').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});" />
  </div>
  <div id="peoplePanel">    <!-- ajax response will be placed in this div -->
  </div>

if I remove <g:javascript library="jquery" plugin="jquery"/> from the view, add <meta name="layout" content="main"> to the view and add <g:javascript library="jquery" plugin="jquery"/> to main.gsp, the generated ajax code is different and the autocomplete in the search field no longer works:

main.gsp
...
<g:javascript library="jquery" plugin="jquery"/>
...

search.gsp
...
<meta name="layout" content="main">
...
  <div id="searchBox">
    <g:remoteField
      name="q"
      update="peoplePanel"
      paramName="q"
      url="[controller:'user', action:'search']" />
  </div>
  <div id="peoplePanel">    <!-- ajax response will be placed in this div -->
  </div>

resulting code:
...
<script type="text/javascript" src="/find-people/plugins/jquery-1.6.1.1/js/jquery/jquery-1.6.1.js"></script>
...
  <div id="searchBox">
    <input type="text" name="q" value="" onkeyup="new Ajax.Updater('peoplePanel','/find-people/user/search',{asynchronous:true,evalScripts:true,parameters:'q='+this.value});" />
  </div>
  <div id="peoplePanel">    <!-- ajax response will be placed in this div -->
  </div>

I don't have any control over how is being processed under the covers. Not using layout/main.gsp seems to be the only option, but has apparent drawbacks.

Upvotes: 0

Views: 583

Answers (1)

gotomanners
gotomanners

Reputation: 7916

It seems like default Prototype is taking precedence over jQuery. Try removing the Prototype.

p.s you don't have to run grails InstallJQuery if you're using

<g:javascript library="jquery" plugin="jquery"/>

You should use <g:javascript library="jquery" /> after running grails InstallJQuery

Upvotes: 1

Related Questions