I am using Angular.js for the following project. Using a template document, the
application renders paragraphs using user-input in a fill-in-the-blanks style.
So there are fields that the user must fill, let’s call them Blanks. Those
fields, inside the paragraphs, are highlighted so the user knows they can
interact with them. They can be of type date, email, text or
radio select. When they are clicked, I want to display, next to the
paragraph, a little panel containing a description of or instructions on how to
fill the field followed by the form element.
I would like to use a readable format for the HTML templates so I can mix
regular text with Blanks. I was thinking of using attributes on div elements
to specify the description of the element and the placeholder or the default option.
Here is how I started :
<div class="chapter" title="Colours">
<div class="article" title="Blue">
Blue is a special colour because it gives me particular emotions. First
of all, I feel
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="How does blue make you feel?"
doc-type="text"
doc-placeholder="like there is a wind in my ear."
doc-data="colour.blue.feeling"
>[[colour.blue.feeling]]</a>.
Second of all, blue reminds me of
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="Pick the thing blue reminds you of"
doc-placeholder="the sky".
doc-choices="the sky, the sea, the ocean"
doc-type="radio"
doc-data="colour.blue.memory"
>[[colour.blue.memory]]</a>
like the first time I experienced the colour which was on
<a href=""
class="blank"
ng-click="selectQuestion()"
doc-question="Select a day"
doc-placeholder="01/01/2015"
doc-type="date"
doc-data="colour.blue.date"
>[[colour.blue.date]]</a>.
</div>
</div>
Then there would be a hidden, automatically generated form which binds the
input elements to the data inside the anchor elements with class 'blank' :
<form>
<div>
<h2>How does blue make you feel?</h2>
<input type="text" ng-model="colour.blue.feeling">
</div>
<div>
<h2>Select a day</h2>
<input type="text" ng-model="colour.blue.date">
</div>
<div>
<h2>Pick the thing blue reminds you off</h2>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the sky" >the sky<br>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the sea" checked>the sea<br>
<input type="radio" ng-model="colour.blue.memory" name="colour.blue.memory" value="the ocean"> the ocean
</div>
</form>
Does this problem have a name?
Is my approach reasonable?
How can I programmatically create the form and bind the fields to it (of
course, I am not expecting code here, unless you can show me something similar).
To display only the part of the form that is of interest, with jQuery,
I would hide all the divs in the form then detach the form and re-attach it to the
div that is the Blank’s parent. Then I would show the div containing the relevant
input(s) by selecting it using a distinctive attribute, invoke jQuery’s show()
and it is done. How would I accomplish this using Angular?
Thank you very much for your help.
Related
i am loading handlebar templates in the two div locations(like add and edit tabs both are jsps) from the same page. so i have duplicate elements in the DOM object, since it is a template which is coming from server location. you can see the sample code below
<div id="add">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
<div id="edit">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
I can't modify the div container ids i.e exploding since some javascript functions attached to it based on that id to explode address field.
here the problem is if i made any changes to the edit tab, address "exploding" div, it is effecting in add tab address "exploding" since ids are repeated. i have tried jquery detach method to remove the dom elements, but didn't get proper result. Its a web application based on spring boot.
is there any possibility to load jsps dynamically through jquery, i have tried load method as well, but the call is going through controller. I didn't feel it as better option.
Thanks & Regards
krishna K
I have a "search as you type" control developed by another developer who is no longer there. Basically the control at the beginning looks like below:
<div id="someID">
<input type="text"/>
</div>
When the user searches for something. Each result is added as a new div element below the original div, like below:
<div id="someID">
<input type="text"/>
</div>
<div><span>result1</span></div>
<div><span>resul2</span></div>
I want to add the ability to move between these divs with up and down arrows, then clicking enter to choose the div, instead of using the mouse, knowing that I don't know the exact number of divs beforehand. I read some questions on stackoverflow, but they seem to expect the exact number of divs. Any solution or guidance is appreciated.
Thanx.
I am extending the functionality of a Business Intelligence tool. This is a web based application. Currently attempting to create some type of "form" validation. The strange thing is that this application reuses the same input for every single one of the form inputs. Once the user clicks away from the input html object, some javascript moves the value entered into the input into the text within a div.
Before:
<div>
</div>
Input filled out:
<input type="text" value="this is a test">
Result:
<div>
this is a test>
</div>
Is there any way to create a listener which will validate what is written inside of the div?
try this
<input type="text" value="this is a test"/>
instead of
<input type=text value=this is a test></input>
hope this helps...
I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>
We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.
Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?
You could use datalist. Example:
<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
<option value="Chocolate Chip"/>
<option value="Peanut Butter"/>
<option value="Raisin Oatmeal"/>
</datalist>
Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/
This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.
My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.
An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.
That's a fairly common way to design a form both on paper and on the web.
I'm not quite sure exactly what you mean with a better way to do so...
If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:
<select><!-- implemented something like rahul showed -->
<noscript>
<label for="ifOtherInput">If other please specify</label>
<input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
<!-- Here we know the user selected other so we can just have this label: -->
<label for="ifOtherInputJs">Please specify</label>
<input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>
The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.