FontAwesome with Grails <g: actionSubmit

Question

I am trying to add icons to my save, delete buttons, etc. I have about five buttons using the <g:actionSubmit> to trigger an action in the controller to perform the corresponding functions. My problem is that for the FontAwesome and bootstrap fonts it is required to use the <i class="icon-***"> as follows:

 <a href="http://google.com"> <i class="icon-ok"></i> Google </a> 

In grails, this tag format between the original tag is not possible (at least with actionSubmit ). The value attribute is the string that is displayed. Is there any work for this? Keep in mind, I still need to map the button action back to the controller, so I had a problem using the direct <button> , such as the one recommended for bootstrapping.

UPDATE:

I have a lot of problems using the current 2 answers. They both work on adding icons, but I'm getting some troubles that I need to crack to fix the situation. I was thinking of a different solution, but I have some problems with its implementation. I would like to write my own lib tag using the taglib base as the actionSubmit lib tag below:

 def actionSubmit = {attrs -> attrs.tagName = "actionSubmit" if (!attrs.value) { throwTagError("Tag [$attrs.tagName] is missing required attribute [value]") } // add action and value def value = attrs.remove('value') def action = attrs.action ? attrs.remove('action') : value out << "<input type=\"submit\" name=\"_action_${action}\" value=\"${value}\" " // process remaining attributes outputAttributes(attrs) // close tag out << '/>' } 

The only change I need to make is to give him the opportunity to take

 <i class="icon-ok"></i> 

tag

between a:

 <g:actionSubmit ...> </g:actionSubmit> 

Does anyone have any suggestions or for this implementation?

Answer 1

Try passing the class name to remoteLink, which creates a link that uses Ajax to call the remote function, and you can add your class to this.

 <g:remoteLink class="btn icon-ok" action="index" > click (without i tag) </g:remoteLink> 

or

 <g:remoteLink action="index" > <i class="btn icon-ok">click (with i tag) </i> </g:remoteLink> 

Both approaches should work.

Answer 2

Do not use actionSubmit, just use <button> and specify link / action properties, for example:

 <button type="submit" class="btn"> <i class="..."></i> Update </button> 

here is a more detailed example

 <button type="submit" class="btn btn-danger" name="_action_delete" value="Delete"> <i class="..."></i> ${message(code: 'default.button.delete.label', default: 'Delete')} </button> 

Note: actionSubmit passes the following input names / values ​​for updating, saving, and deleting

 name="_action_update" //update name="_action_update" //save name="_action_delete" //delete 

so you just need to do the same if the application depends on them.