开发者

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=""开发者_JAVA百科 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.


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜