使用Javascript中的GSP标签 [英] using GSP tags from Javascript

问题描述

我正在尝试使用javascript创建动态HTML表格。我已经写了一个小功能，可以将行添加到表中。但是，单个单元本身应该是gsp标签要素。在下面的示例中，我尝试使用由grails-UI插件提供的autoComplete标记。尽管我将单元格的innerHTML设置为gsp标签，但它并未呈现在页面上。

I am trying to create a dynamic HTML table using javascript. I have written a small function to add rows to the table on the fly. However the individual cells themselves should be gsp tag elemets. In the example below I am trying to use the autoComplete tag provided by the grails-UI plugin. Even though I set the innerHTML of the cell to the gsp tag, it is not being rendered on the page.

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片段代码如下：

The HTML snippet invoking this code is as follows:

<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标签？

I have checked that the javascript is being invoked by putting an alert. So all the wiring is fine. I think that the issue is with resolving the gsp tags by the browser. How can I invoke gsp tags from javascript??

推荐答案

GSP页面在服务器上呈现，很久很久很久很久很久，浏览器EVER才获取html并可以开始运行的JavaScript。您需要使用AJAX调用将gsp标记发送回服务器，然后将其（可能）呈现为HTML，然后从AJAX响应中获取HTML并将其插入到您的文档中。

GSP pages are rendered on the server, long long long before the browser EVER gets hold of the html and can start running the Javascript. You'd need to use an AJAX call to send the gsp tag back to the server, where it can (hopefully) be rendered into HTML, then take the HTML from the AJAX response and insert it into your document.

这篇关于使用Javascript中的GSP标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！