I want to create twitter bootstrap compliant form. According to the docs for Twitter Bootstrap v2.2.2 (the version included with web2py) the html should look like:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
I'm currently using SQLFORM which outputs html that doesn't really fit with this (even using formstyle='divs'). Besides I want my html output to be clean without web2py artifacts such as class="w2p_fl". So my thought is to use a custom form. However in doing this there would be a lot of repeated code. That is, the following would basically need to be repeated for each field.
{{=form.custom.begin}}
<div class="control-group">
{{=LABEL(form.custom.label['myfield'], _class='control-label',
_for='mytable_myfield')}}
<div class="controls">{{=form.custom.widget.myfield}}</div>
</div>
...
{{=form.custom.end}}
So how can I repeat the above unit of code so I could replace it with something like {{=bootstrap_field(db.mytable.myfield)}} or some other way to adhere to DRY?
What is the web2py way to do this? Create a view function? Pass a function in the dictionary returned by the controller? Create my own html helper? Create my own widget? Another way?
If you're using Bootstrap 2, you can just do:
form = SQLFORM(..., formstyle='bootstrap')
For Bootstrap 3 (or any other custom formstyle you'd like to create), the formstyle argument can be a function (or other callable) that produces the form DOM. The function will be passed the form and a fields object, which is a list of tuples, with each tuple containing a CSS id, label, input element, and (possibly empty) comment/help text. To get an idea of what such a function should look like, check out the one used for Bootstrap 2 forms.
Related
I have scenario where I am changing the input text, i have multiple forms and one input within each form so i want to get the current form name whose input i am changing. how to do this in angular 2??
Below is my code for child component
<form #form1="NgForm" novalidate>
<input id="phoneNumber" type="text" placeholder="phoneNumber" class="validate"/>
</form>
<form #form2="NgForm" novalidate>
<input id="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
Now suppose i am adding mobile number i want its form name. How to do this angular 2?? This is i want to access in parent component I am accessing the child component form using #ViewChildren and i am able to access the form manually but i want access dynamically with respect to the input i am accessing ..
In Angular you have two choices use dynamic forms or template driven forms,
your choice is dynamic forms using #form1="NgForm"
Angular dynamic-form
In your code you forgot the '[formControlName]' directive on the inputs, when you have those you can access the form from your component code like:
Component:
this.form1.valueChanges.subscribe(data => console.log('Form changes', data));
HTML:
<form #form2="NgForm" novalidate>
<input [formControlName]="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
I am able to get the current form valid invalid in parent form by passing index as input to child form and emitting the same in parent form...
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
Assuming that i have the following data in my params
params:[input:[1, 2, 3]]
And i have the following form in my Grails app
<div class="block1">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input1" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block2">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input2" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block3">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input3" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
The form design above is correct, because in my form design, there will be several inputs of the same name (but each will be saved to the database under different primary keys) and it can be increases and decreases according to user selection.
Few questions using the above
How do i make it so that the value for input1 is params.input[0], input2 is params.input[1] and input3 is params.input[2] in the view? I can pass the model from controller without problem, but i couldn't distribute the value properly to each input on the form.
Is there any way to change the value ${input} dynamically? As in if i want to change the value to ${input[0]} or ${input[1]}
Can i automatically set the amount of block appended into the form using the g:each tag? Say like if from controller i want to set the rendering block amount to 3, so can i use the g:each tag to render the block 3 times in the form?
Thanks
The links are examples of how to use ajax/jquery to get values from a remote call and replace html element (divId) within a page - this divId could be the entire
<input type="text" name="input" value="newvalue"/>
upon triggering some form of call as above to get the new value.. in regards to
g:textField
yes it works like all other grails tags in the end they are transformed back to the correct HTML terminology...
The actual variable value is dynamic if you defined
<input name="existingvariable" value="${something}" ...
where something was a parameter from the given controller - and then you updated the call so
://YOURHOST:8080/yourapp/controller?existingvariable=newvalue
and refreshed or clicked this link which is what ajax would be doing for you doing a new call to either another controller to generate new values or same and passing new value to it and then grabbing data and pushing it back onto the divId ... (all in the background)
Groovy loading into divs
Grails - Select menu not rendering
I want my selects dropdowns to auto populate with Ajax in Grails website
The above are all related to using ajax to populate / update existing form elements
If you wish to update a live form with a new live value (non existant in DB) take a look at modaldynamix plugin. //github.com/vahidhedayati/modaldynamix
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.
I'm trying to make a Widget that generalizes a bootstrap style from twitter for collapsible items.
I got to make it work hardcoding it, but I find some dificulties abstracting it.
The widget looks like:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
... text to show collapsed ...
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
... anything to show expanded ...
</div>
</div>
</div>
</div>
The thing is, this uses a javascript which depends on ids of some div tags. The generalized widget would need this to be randomized or depending on some seed passed in the constructor.
It would also be nice to have access to those generated Strings from Java part, as it would be a fancy way to set the text showing in the widget.
My first approach was to use something like <ui:with type="com.a.b.c.IdGenerator" field="idGenerator"></ui:with> but it seems to instanciate dynamically the class IdGenerator so no access to the Strings is obtained in Java part.
Is there any fancy way to dinamically generate those Strings having access to them from the Java part?
You simply need a #UiField IdGenerator idGenerator on the Java side to have the instance created by the <ui:with> injected in it (or you can #UiField(provided = true) it).