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>
Related
I have a standard Angular Material Menu in a toolbar...
<button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
<mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
<mat-menu #vidmenu="matMenu">
<button mat-menu-item>
<img src="assets/images/vid_welcome.jpg" height=40px/>
<span> Welcome</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video1.jpg" height=40px/>
<span>Video 1</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video2.jpg" height=40px/>
<span>Video 2</span>
</button>
</mat-menu>
In testing, users are not seeing the material menu icon no matter how large we make it. One user suggested we start the experience off with the menu open... that way they can see the choices, click on one, and the menu closes. Then they will know it's there for future use.
I have researched remotely triggering the click() to open it on during ngOnInit(), but all examples are in older angular versions, and even if I got it working, I'm guessing it will be buggy.
Is there a way to simply set a menu to a default state of being "open", and then just function normally from there?
Ensure you are using the following directive on the button which is used as the menu trigger on the UI.
<button
[matMenuTriggerFor]="menu">
</button>
<mat-menu #menu="matMenu">
...
</mat-menu>
Then in the .ts code of your component, ensure you have the following import:
import { MatMenuTrigger } from "#angular/material/menu"
Create the following property:
#ViewChild(MatMenuTrigger) adjustersMenuTrigger: MatMenuTrigger
Then finally to open the menu programmatically, use the following code:
this.adjustersMenuTrigger.openMenu()
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.
i want to make an onscreen Keyboard in dart with angular.js.
If one letter is pressed it should be on the html site.
How does it work?
This is what i´ve got in the index.html:
<button on-click="einsController.generateName()"id="z" class="button">Z</button>
<button on-click="einsController.generateName()"id="u" class="button">U</button>
<button on-click="einsController.generateName()"id="i" class="button">I</button>
<button on-click="einsController.generateName()"id="o" class="button">O</button>
<button on-click="einsController.generateName()"id="p" class="button">P</button>
<button on-click="einsController.generateName()"id="a" class="button">A</button>
<button on-click="einsController.generateName()"id="s" class="button">S</button>
<button on-click="einsController.generateName()"id="d" class="button">D</button>
<button on-click="einsController.generateName()"id="f" class="button">F</button>
<button on-click="einsController.generateName()"id="g" class="button">G</button>
<button on-click="einsController.generateName()"id="h" class="button">H</button>
<button on-click="einsController.generateName()"id="j" class="button">J</button>
<button on-click="einsController.generateName()"id="k" class="button">K</button>
<button on-click="einsController.generateName()"id="l" class="button">L</button>
<button on-click="einsController.generateName()"id="y" class="button">Y</button>
<button on-click="einsController.generateName()"id="x" class="button">X</button>
<button on-click="einsController.generateName()"id="c" class="button">C</button>
<button on-click="einsController.generateName()"id="v" class="button">V</button>
<button on-click="einsController.generateName()"id="b" class="button">B</button>
<button on-click="einsController.generateName()"id="n" class="button">N</button>
<button on-click="einsController.increment()"id="m" class="button">M</button>
This is where the letter shall appear:
<span id="badgeName">{{einsController.name}} </span>
this is the function in the dart File:
String name = '';
void generateName() {
name = "Q";
}
I still don´t get it. I think I need to change something in the method of generateName().
I want an onScreenKeyboard something like this http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774
Only that it I need to use dart Code.
The ng-click directive should be on the button where you click not on the tag where you want to show the result.
You don't need your query('#letter_A').onClick.listen(... when you use ng-click they have similar functionality.
You need to place the controller keyboard so that your buttons and the <div> where you want to show the output are within the tag where the controller is applied.
Try it and if it doesn't work update your question with the new code and I'll take another look.
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.
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