JavascriptのGSPタグを使用

Question

JavaScriptを使用して動的HTMLテーブルを作成しようとしています。私はその場でテーブルに行を追加する小さな関数を書いています。しかし、個々の細胞自体はgspタグのelemetsでなければなりません。下の例では、grails-UIプラグインが提供するautoCompleteタグを使用しようとしています。セルのinnerHTMLをgspタグに設定しても、ページ上にはレンダリングされません。

function addIngredientRow(tableName,element){ 

var table = document.getElementById(tableName); 
var lastRow = table.rows.length; 
var row = table.insertRow(lastRow); 
var leftCell = row.insertCell(0); 
var autoCompleteDiv = document.createElement('div'); 
leftCell.appendChild(autoCompleteDiv); 
autoCompleteDiv.innerHTML= '<gui:autoComplete id="autoCompleteIngredient" resultName="ingredients" labelField="name" idField="id" controller="recipe" \ 
     action="getIngredientAsJSON" forceSelection="true" \ 
     useShadow="true" width=60px queryDelay=0.5 />'; 

var rightCell = row.insertCell(1); 
var autoCompleteDivR = document.createElement('div'); 
rightCell.appendChild(autoCompleteDivR); 
autoCompleteDivR.innerHTML= '<p>test</p>'; 

}

次のようにこのコードを呼び出すHTMLスニペットは次のとおりです。

<tr> 
        <td> 
         <gui:autoComplete 
           id="autoCompleteIngredient" 
           resultName="ingredients" 
           labelField="name" 
           idField="id" 
           controller="recipe" 
           action="getIngredientAsJSON" 
           forceSelection="true" 
           useShadow="true" 
            width=60px 
            queryDelay=0.5  
         /> 
        </td> 
        <td> 
         <div onclick="addIngredientRow('createRecipeTable',this)"><img alt="Add Ingredient" src="${resource(dir:'images/icons',file:'Add16.png')}" ></div> 
        </td> 
       </tr> 

私はjavascriptのアラートを置くことによって呼び出されていることを確認しています。だから、すべての配線は問題ありません。私は、問題はブラウザでgspタグを解決することだと思います。どうすればjavascriptからgspタグを呼び出すことができますか？

Answer 1

GSPページは、サーバー上でレンダリングされます。これは、ブラウザEVERがHTMLを保持し、Javascriptの実行を開始するまで長く続きます。あなたはAJAX呼び出しを使用してgspタグをサーバーに送り返す必要があります。ここで、HTMLにレンダリングしてから、AJAX応答からHTMLを取り出して文書に挿入します。

Answer 2

GSPは、ブラウザに表示される前に評価されます。 javascriptでそれらを使用したい場合は、javascriptソースをgrailsエンジンによって提供/評価する必要があります。

jsのコントローラを作成し、gspを使ってgrailsアプリケーションの他のページと同じようにレンダリングすることができます。