ajax – 调用remoteForm只用onChange事件更新一个div

我想动态地在textField中输入数据时更新div内容.
我尝试过以下方法：

<g:formRemote name="changeText" on404="alert('not found!')" update="resultDiv"
    url="[ controller: 'results',action:'results' ]">
        <g:textField onChange="submit();" name="text"/>
</g:formRemote>

一切都工作,除了新的页面是渲染和div没有更新…

def results = {
   render "new content"
}

解决方法

以下GSP代码：

<g:formRemote name="changeText" on404="alert('not found!')" update="resultDiv"
          url="[ controller: 'results',action:'results' ]">

将使用onSubmit方法生成一个新的HTML表单,如下所示：

<form id="form_id" action="/action" method="post" onsubmit="jQuery.ajax({type:'POST',data:jQuery(this).serialize(),url:'/action',success:function(data,textStatus){jQuery('#resultDiv').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false">

因此,将触发AJAX调用的Javascript代码位于onSubmit()方法上.

这里的问题是你使用Javascript调用submit()动作,这不会触发onSubmit()方法.

解决方案是直接在onChange事件中调用onSubmit()方法：

<g:textField onChange="this.form_id.onsubmit();" name="text"/>