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

发布时间：2020-12-16 02:52:22 所属栏目：百科来源：网络整理

导读：我想动态地在textField中输入数据时更新div内容. 我尝试过以下方法： g:formRemote name="changeText" on404="alert('not found!')" update="resultDiv" url="[ controller: 'results',action:'results' ]" g:textField onChange="submit();" name="text"//g

我想动态地在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"/>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!