using GSP tags from Javascript

Question

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>';

}

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>

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??

Marc B · Accepted Answer · 2011-08-09 14:46:07Z

2

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.

answered Aug 9, 2011 at 14:46

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Idler Over a year ago

cool...thanks a lot for your reply. what do you think would be a good framework/plugin to achieve this in the grails world?

Marc B Over a year ago

Consider building a better system - taking client-generated code and running it server-side is a huge security risk. It'd be trivial for someone to look inside your page's source and submit a malicious gsp tag that could kill your server.

codelark · Accepted Answer · 2011-08-09 14:47:10Z

0

GSPs are evaluated prior to rendering to the browser. If you want javascript to use them, the javascript source will have to be served/evaluated by the grails engine.

You can create a controller for the js, and use a gsp to render it like any other page of your grails application.

answered Aug 9, 2011 at 14:47

codelark

12.3k1 gold badge48 silver badges49 bronze badges

1 Comment

codelark Over a year ago

Be aware, that this can impact the cache-ability of your js unless you control it manually via the response headers.

Collectives™ on Stack Overflow

using GSP tags from Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related