I have a angular-strap select defined as follows :
<button type="button" class="btn btn-primary" ng-model="idMedecin"
ng-options="medecin.id as medecin.titre+' '+ medecin.prenom+' '+medecin.nom for medecin in model.medecins"
data-placeholder="{{model.placeholder}}" bs-select>
Action <span class="caret"></span>
</button>
In the controller, I change the value of [model.placeholder] whenever the user picks another language (i18n), by example from [Choisissez un médecin] to [Choose a doctor]. Nevertheless, this change doesn't appear on the select button.
How can I propagate to the select button, the change that was done on the model ?
I have exactly the same question for the angular-strap datepicker :
<input type="text" ng-model="model.jour" class="form-control btn-warning"
data-min-date="today"
data-date-format="fullDate"
data-autoclose="true"
data-date-type="number"
data-use-native="true"
bs-datepicker/>
When showed the first time, this component uses correctly the current language. When the user changes this language, I change [$locale.id] with the new locale. Nevertheless the datepicker is not refreshed with a new calendar.
Related
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 am creating a rails app with a page to add up a total cost for people to review before they submit an order. I want the total to change depending on a set of options in a set of radio buttons.
How can I change a variable representing a total amount in a web page when a radio button selection is changed? I want this to happen without reloading the page.
From the sounds of it, you'll probably want to use standard Javascript / JQuery to add up the total on screen. This is opposed to the proposal of ajax, as you don't need to pull any extra data from the erver:
--
JSFiddle
#view
<input type="radio" name="option" value="3.99">Small (£3.99)<br>
<input type="radio" name="option" value="6.99" checked>Medium (£6.99)<br>
<input type="radio" name="option" value="9.99">Large (£9.99)<br>
<div class="total" >
Total:
<span id="total"></span>
</div>
#app/assets/javascripts/application.js
$(document).on("change", "input:radio[name=option]", change_value);
$(document).ready(change_value);
function change_value() {
var value = $("input:radio[name=option]:checked").val();
$("#total").html( "£" + value );
};
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'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.
My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.
<div data-role="content">
...
<fieldset data-role="controlgroup" id="showChooser">
<legend><h3>Which show are you attending?</h3></legend>
<input type="radio" name="activeShow" id="activeShow1" value="1" />
<label for="activeShow1">
<h2>Choice 1</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow2" value="2" />
<label for="activeShow2">
<h2>Choice 2</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow3" value="3" />
<label for="activeShow3">
<h2>Choice 3</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
...
</fieldset>
...
</div>
This results in the following list being displayed:
(source: skitch.com)
So, on-click of one of them, I'm running this code:
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c');
$(this).next().attr('data-theme','e');
$("#settings").page();
});
The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.
Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.
The first time you click one, it has the desired effect:
But subsequent clicks don't appear to un-highlight any previously selected rows:
I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?
I had the exact same problem.
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
$(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});
See this jQuery forum post.