I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.
Related
I have several textboxes within Bootstrap columns that I want to bring closer to one another, but no matter what I do the distance between textboxes stays the same.
How can I
Shorten the distance between the textboxes?
Shorten/make more narrow the column background or bring the textbox closer to the outside of a column
Here is the code that I have
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 1</div>
<input class="form-control" type="text" asp-for="myclass.box1" />
<span asp-validation-for="myclass.box1" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 2</div>
<input class="form-control" type="text" asp-for="myclass.box2" />
<span asp-validation-for="myclass.box2" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="col-lg-1">
<div class="bisformdynamiclabel">Box 3</div>
<input class="form-control" type="text" asp-for="myclass.box3" />
<span asp-validation-for="myclass.box3" class="alert-danger"></span>
</div>
</div>
</div>
Thank you in advance for everyone's help
This seems like something that should be pretty easy, but I am unable to customize the Login (login/authenticate) and Logout functionality of spring-security-shrio that is pre-built.
I would like to do things like add a login counter, or login log so when a user logs in I log who they are and additional information like an ip address.
Also, I went to the source and found the LoginController, copied that but noticed that there is no authenticate method within that controller.
I am upgrading an application from Grails version 2.4.4 to Grails 3+. Where is the code that is generated? Any guidance would be most appreciated.
Not Shiro specific but you can add a login directory to views then add your own auth.gsp to handle logging in.
Note that a number of the parameter names changed from Grails 2 to 3 e.g. j_username to username see here.
Here's a bootstrap styled one I converted from a Grails 2 to 3 app recently:
<html>
<head>
<meta name='layout' content='main'/>
<title><g:message code="springSecurity.login.title"/></title>
</head>
<body>
<div id='login' class="maincontentdiv">
<g:render template="/templates/alerts"/>
<form action='${postUrl}' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'>
<fieldset>
<legend><g:message code="springSecurity.login.header"/></legend>
<div class="form-group">
<label class="col-md-4 control-label" for="username">
<g:message code="springSecurity.login.username.label" default="Username" />
<span class="required-indicator">*</span>
</label>
<div class="col-md-4">
<input type='text' class='form-control' name='username' id='username'/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">
<g:message code="springSecurity.login.password.label" default="Password" />
<span class="required-indicator">*</span>
</label>
<div class="col-md-4">
<input type='password' class='form-control' name='password' id='password'/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<input type='submit' id="submit" class='btn btn-primary' value='${message(code: "springSecurity.login.button")}'/>
</div>
</div>
</fieldset>
</form>
</div>
<script type='text/javascript'>
<!--
(function() {
document.forms['loginForm'].elements['username'].focus();
})();
// -->
</script>
</body>
</html>
I am writing integration test for following html structure but i am stuck on text fields and capybara fill_in method
<div class="row" id="attr_3">
<div class="span4">
<input name="description[]" type="text" value="Air Conditioning" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
<div class="row" id="attr_20">
<div class="span4">
<input id="description_" name="description[]" type="text" value="Autopilot" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
This is a chunk of code Now I have to fill the value of text box whose description is "Air Condition". How I can do that? because there is no formal structure of this html and Air Condition is not label it is also a text box.
I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.
I am using bootstrap-sass 2.0.0 in my gemfile, but I am having trouble getting both prepended and appended content added to an input tag in a form to work.
I got on FireBug with FireFox and copied the exact html that they use for the example on the twitter bootstrap site, copied here:
div class="control-group">
<label class="control-label" for="appendedPrependedInput">Append and prepend</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input id="appendedPrependedInput" class="span2" type="text" size="16">
<span class="add-on">.00</span>
</div>
</div>
</div>
But I get the prepended text facing the wrong way (it looks like the appended tag) so it kind of looks like this: [span)[.....input....][span) instead of this: (span][.....input.....][span) .
Also appended buttons do not register as being appended (also with copied code from the example) like so: (....input....) (button) instead of (....input.....][button)
Any ideas on how I can get to this: (span][....input....][button) ? I already tried the code below:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span>
<input id="search" class="input-xlarge" type="text" size="16">
<button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I appreciate any and all help!
You have the right idea, you just have to put everything that is either to be appended/prepended or have something appended/prepended to it on one line with no spaces.
Like this:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span><input id="search" class="input-xlarge" type="text" size="16"><button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I tested this on my own Bootstrap setup and it displays properly.