FontAwesome with Grails <g:actionSubmit - grails

I've been trying to add icons to my save, delete, etc. buttons. I have about five buttons using the <g:actionSubmit> tag to call an action in a controller to perform the corresponding functions. My problem is that FontAwesome and bootstrap's glyphicons require the <i class="icon-***"> tag to be used like so:
<a href="http://google.com">
<i class="icon-ok"></i> Google
</a>
In grails this format of the tag in between the initial tag is not possible (at least with actionSubmit). The value attribute is the string that is displayed. Is there any work around for this? Keep in mind I still need to map the buttons action back to a controller which is why I've had issue using a straight <button> tag like what is recommended for bootstrap.
UPDATE:
I'm having a lot of problems using the current 2 answers. They both work for adding the icons, but I'm getting some nuisances that I'm having to hack a lot of things up to fix. I thought about another solution but am having some problems implementing it. I'd like to write my own tag lib using the base of the taglib as the actionSubmit tag lib 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 it the ability to take the
<i class="icon-ok"></i>
tag in between a:
<g:actionSubmit ...> </g:actionSubmit>
Does anyone have suggestions or for this implementation?

Don't use actionSubmit, just use a <button> and provide the link/action properties like so:
<button type="submit" class="btn">
<i class="..."></i> Update
</button>
here's 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 name/values for update, save and delete
name="_action_update" //update
name="_action_update" //save
name="_action_delete" //delete
so you would just need to do the same if you're app is dependent on them

Try passing the class name to remoteLink, which creates a link that uses Ajax to call a remote function and you can add your fontAwesome classes to it.
<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.

Related

Unable to Redirect to different page on click ? mvc4

I am trying to return to a different page on button click but i'm unable to achieve . It hits the controller action method(onclick) but the view remains the same & url in the browser remains unchanged .
Html:
<input type="submit" class="btn btn-primary" value="Login" onclick="window.location.href='#Url.Action("Home", "Index")' "/>
Even when i keep http://www.google.com it doesnt seems to work .
am i missing anything important here
An input of type submit will try to submit a form. The JavaScript you have attached to that button will run but then immediately get "overridden" by the button trying to do something else. You can do a couple of things:
Option 1: Use a different type such as button:
<input type="button" onclick="window.location.href='#Url.Action("Home", "Index")' "/>
Option 2: Return false in your JavaScript, this prevents the default action from happening.
<input type="submit" class="btn btn-primary" value="Login"
onclick="window.location.href='#Url.Action("Home", "Index"); return false;' "/>
A nice description of preventing the default action from happening is here.

Display i18n message on button.onclick attribute

How should I display a Thymeleaf i18n messages on the code below:
<button th:text="#{msg_warning}" onclick="return confirm("[[#{msg_confirm_warning}]]")">
Delete
</button>
Even using th:attr
<button th:text="#{msg_warning}" th:attr="onclick='return confirm(\'#{msg_confirm_warning}\');'">
Delete
</button>
The output should be the string value of msg_confirm_warning whenever the button is clicked. But it displays [[#{msg_confirm_warning}]] string instead.
Well I guess I made the wrong syntax. With the code below, it solved my problem.
<button th:text="#{msg_warning}" th:attr="onclick='return confirm(\'' + #{msg_confirm_warning} + '\');'">
Delete
</button>

Geb - Inconsistent behaviour in headless mode

I am testing a grails application and have the tests run by Hudson. The tests are passing 100% of the time when run on local machine.
Database Is always reset when the tests initialize.
I have problem setting the value for a dynamic form. In my .gsp I have the following :
<g:xEditableRefData owner="${license}" field="isPublic" config='YN'/>
This is generating an ‘Edit’ link,. When clicked a dropdown appears which allows the user to select between Yes or No. (screenshots at the end of mail):
Following is the generated code:
<span data-url="/demo/ajax/genericSetRel"
data-source="/demo/ajax/sel2RefdataSearch/YN?format=json&oid=License%3A1"
data-name="isPublic" data-type="select" data-pk="License:1"
class="xEditableManyToOne editable editable-click editable-empty" id="License:1:isPublic">Edit
</span>
And when clicked:
<span class="editable-inline editable-container">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group">
<div>
<div class="editable-input">
<select class="input-medium">
<option value="RefdataValue:1">Yes</option>
<option value="RefdataValue:2">No</option>
</select>
</div>
<div class="editable-buttons">
<button class="btn btn-primary editable-submit" type="submit">
<i class="icon-ok icon-white"></i>
</button>
<button class="btn editable-cancel" type="button">
<i class="icon-remove"></i>
</button>
</div>
</div>
<div class="editable-error-block help-block" style="display: none;"></div>
</div>
</form>
</div>
</span>
I have the following method in my Page class for setting the value of the edit/dropdown:
editIsPublic { option ->
$("span", 'data-name': "isPublic").click()
try {
waitFor { $("form.editableform") }
} catch (geb.waiting.WaitTimeoutException e) {
throw new RequiredPageContentNotPresent()
}
$("select.input-medium").value(option)
$("button.editable-submit").click()
}
This is always successful on my local machine, but when run headless on Hudson I get about 80% failure. When it fails the tests don’t stop, but the dropdown has wrong value, and no exceptions are thrown. I have also considered passing arrow keys instead of set the value but this is not a good option for other reasons. Any ideas why the above code is not working on Hudson? Is there any other way I could set the value?
UPDATE
Adding a lot of waitFor statements seems to have fixed the issue for now. I have defined the following closure, and I am using it on everything that is interactive.
waitElement {run ->
try{
waitFor{run()}
} catch (geb.waiting.WaitTimeoutException e) {
throw new RequiredPageContentNotPresent()
}
}
I didn't spend a lot of time trying to get headless firefox working, because I read of many issues such as these. I decided to give PhantomJS a try instead and it has been working exactly as expected so far.
To set up the PhantomJSDriver you need to:
Download/install PhantomJS per their docs
Add the PhantomJSDriver to your test dependencies 'com.github.detro.ghostdriver:phantomjsdriver:1.1.0'
Set a system property that points to the PhantomJS binary
Set PhantomJSDriver in the GebConfig file
Here's a simple example of what I put in my GebConfig:
System.setProperty("phantomjs.binary.path", "path/to/phantomjs/binary")
driver = {
def pjsDriver = new PhantomJSDriver()
// set window size manually because the default size is very small
pjsDriver.manage().window().size = new Dimension(1680, 1050)
pjsDriver
}
Sorry that doesn't directly answer the question of "why" some tests are having issues, but hopefully that will resolve it!

Can't get onclick on a button to be accepted

I currently have a link in the below form:
Change
In order to fit the look of the site in which I'm adding this link, I want to change it to a button input, as so:
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')" />
However, I'm running into a snag with this second form: the single quotes around #Url.Action("ChangeNumbers") are being flagged as Unterminated string constant. Can anyone tell me what I'm doing incorrectly and how to fix it?
EDIT
It didn't occur to me to just try the page - it looks like the second form works. So now my question is - why is Visual Studio flagging this as incorrect?
You're not doing anything "incorrectly" per se, it's just that Razor isn't perfect, and things like quotes within quotes tend to cause it to freak.
One quick fix would be to store the URL in a variable and then use the variable:
#{ var url = Url.Action("ChangeNumbers"); }
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#url')" />
However, an even better fix is to not use the onclick attribute at all. Put this where it belongs: in JS.
<script>
$('#myButton').on('click', function () {
changeNumbers('Numbers', '#Url.Action("ChangeNumbers")');
});
</script>
Used jQuery above, since it's included in MVC by default
I've found that to make Visual Studio happy in this scenario, the easiest thing to do is simply change the <input /> element to a <button></button> element and the error will resolve itself:
<button type="button" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')">Change</button>
Otherwise, to continue using an <input /> the markup will need to be changed to the following:
<input type="button" value="Change" onclick="#("changeNumbers('Numbers', '" + Url.Action("ChangeNumbers") + "')")" />

get value form simpledialog2 blank mode

I have used JQM SimpleDialog2 in my app. I am having one textbox and button in that dialog. i can't able to get the value from input while click on button in dialog. i have used blank mode.. Here is my code.. I am getting empty value from this code. please correct me.
<div id="myDialog" style="display:none"
data-options='{"mode":"blank","top":"10%","headerClose":false,"blankContent":true}'
<Center>please enter Your Amount here</center>
<input id="txtAmt" name="amy" value="" type="text" placeholder="Amount">
<div data-role="navbar" data-grid="a">
<ul>
<li>Submit</li>
<li>Cancel</li>
</ul>
</div>
function getAmount()
{
alert("amount: "+$("#txtAmt").val());
}
i didnt try this using SimpleDialog but this works just fine for me:
function getAmount(){
alert (document.getElementById('txtAmt').value);
}
By the way i would recommend using the built-in Popup-Dialog function instead of SimpleDialog. See here: http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html

Resources