remoteFormを呼び出して、onChangeイベントで1つのdivのみを更新します。

Question

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" 
} 

Answer 1

次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()メソッドにあります。

ここでの問題は、submit()アクションにJavascriptを使用して呼び出していることです。これはonSubmit()メソッドをトリガーしません。

ソリューションは、onChangeイベントに直接onSubmit()メソッドを呼び出すために、次のようになります。

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

Answer 2

Grailsは、このために素晴らしいのタグが用意されていますremoteField

<g:remoteField name="input" controller="results" action="results" onSuccess="jQuery('#resultDiv').html(data)"/> 

<div id="resultDiv"></div>