I'm building a web app using React.js and react-bootstrap. I have a form page where the user can type in symptoms of a disease that they are experiencing. I want the user to be able to type in text and also have the option to remove previously typed text.
An example of it being done in Javascript is here:
http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3
I would like to have the same feature as the link above but using React. Here's the code I have so far for the section, but I'm unsure of the best way to continue.
var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>;
<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>
<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button>
When this.addSymptomField() is called, I want to add an Input field to the page, and when this.removeSymptomField() is called, I want to remove the existing Input field from the page.
Thank you so much!
You could keep a list of current inputs in state and modify that when calling addSymptomField and removeSymptomField
In your component constructor
this.state = { inputs: [] }
In render
<div className="inputs">
{this.renderInputs()}
</div>
And your renderInputs method could look like this
renderInputs() {
return this.state.inputs.map((input, index) => <Input key={index} type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>)
}
Then simply add or remove inputs to/from the list when calling the addSymptomField and removeSymptomField methods
Related
I use Tailwind Elements library with Tailwind CSS in my project.
Everything works perfectly, but there is one problem appeared... because I'm trying to clone the element and add to the page a copy.
I do the clone of a form with cloneNode method like this:
I have hidden HTML template:
<template id="temp">
<form>
<div class="datepicker relative mb-3" data-mdb-toggle-button="false">
<input type="text" placeholder="Select a date" data-mdb-toggle="datepicker" />
<label class="text-gray-700">Select a date</label>
</div>
</form>
</template>
When user clicks a button somewhere in the page "+ Add new form", then the new form will be added to the page. There can be many forms as user wants. So I want to use this template to clone it and insert new and new and new nodes to the page. JS:
import 'tw-elements'
let newForm = document.querySelector("#temp").content.cloneNode(true); // clone the <form>
newForm.appendChild(document.body); // add to the <body>
After these manipulations the new form added to the page, but the Datepicker does not work.
As I understood, I should call the initialization of the element programmably via JS like this:
let datePicker = newForm.querySelect('.datepicker');
datePicker.tweDatePicker(); // smth like that maybe
Right? But how? I cannot find in the docs how to call and init the Datepicker (or any other component) via vanilla JS programmably?
Maybe you know the better approaches.
I have a small form and when the user clicks on an element I want to display some more fields to the form. This action can be done multiple times. So my ideia is to have a separated html file with these fields to be appended to the form so I got this
public showMoreFields(): void {
const wrapper_div = document.getElementById("wrapper");
const template = require("./my-template.html")
container.innerHTML += template
}
The new fields are being appended properly.
My first question is: Is this the best approach to load external html? (I don't have the "text/template" script tag)
Or should I create a new component and append it to the maim form?
....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>
If so, how do I append new ones?
Also read about ngTemplateOutlet but didn't figure out how can apply to my case.
I am quite confused about this
Second. Although my new fields are being displayed the click events they are not triggering my functions.
exemple:
<span class="fa fa-remove" (click)="cleanInput()"></span>
// this is not executing the cleanInput function
Thanks
You can use *ngIf or [hidden] attributes on the section which you want to hide.
Example:
<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
1,
you can use flag in your component to show/hide data on button click:
in component:
showData: boolean = false;
in html:
<button (click)="this.showData=!this.showData">show/hide</button>
<div *ngIf="this.showData">
...
</div>
In my Office add-in I have a checkbox like the following:
<div class="ms-CheckBox">
<input id="inputId" type="checkbox" class="ms-CheckBox-input" />
<label id="labelId" role="checkbox" class="ms-CheckBox-field" aria-checked="false" name="checkboxA" for="inputId>
<span class="ms-Label">Text</span>
</label>
</div>
I want to retrieve through JavaScript its checked status (or its aria-ckecked status, I'm still not getting the differences between them), which I thought was through document.getElementById( 'labelId' ).checked, since it's specified in the documentation that they have an optional checked member, but I only get an undefined with it.
I'm very new to these technologies and have a couple concerns:
Does "optional member" mean that I have to explicitly create it so that it exists? If so, how can I do that?
However the checked member may come to existance, do I have to manually handle its value every time it's clicked on by the user or is it already internally managed and I simply haven't found the way to access it yet?
Maybe I just can't see a mistake I've made on the html code for the checkbox?
Thank you in advance!
You have several sources of documentation on Office UI Fabric depend on framework you are using or about to use. Your choices are:
JavaScript only (no framework)
React
Angular
Form the look up table you would choose JavaScript only link and follow it to find the component you are interested in. Before that I would suggest to read "Get Started using Fabric JS".
Now when you have documentation on checkbox component of vanilla JS implementation, follow the steps to set up your checkbox. This would include:
Confirm that you have references to Fabric's CSS and JavaScript on your page
Copy the HTML from one of the samples below into your page.
<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
<span class="ms-Label">Checkbox</span>
</label>
</div>
Add the following tag to your page, below the references to Fabric's JS, to instantiate all CheckBox components on the page.
<script type="text/javascript">
var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
for (var i = 0; i < CheckBoxElements.length; i++) {
new fabric['CheckBox'](CheckBoxElements[i]);
}
</script>
To get the status of your checkbox use method getValue() which returns true or false whether the component is checked or not.
I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/
Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});
I have an index.erb file created and within that file, I have code for a search bar:
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" placeholder="Search..." required>
<label for="search"><i class="mdi-action-search"></i></label>
<i class="mdi-navigation-close"></i>
</div>
</form>
</div>
</nav>
Ultimately I want to have this search bar to search my Sequel Database. I want to use a GET method in my app.rb file. However, I have a few obstacles.
Part 1
How can I save the text (that the user types into my search bar) into a variable that I can then use in my GET method (within my app.rb file)? In other words, how do I save what the user types into the search bar?
Part 2
Within my app.rb file, does it matter what my get method is called?
Part 3
I want to search my database using the .where() method. In my model.rb file, I defined a class Town. Within that migration, I have a collection of data. I want to search that data. So I'm guessing that my code in the app.rb file would be something like this (?):
#towns = Town.where(:name => #variable_from_part1)
Using the variable from PART 1 of my question, how would I go about searching my Sequel database? In other words, how would I search the database for what the user typed in and then display the result on my page?
Thank you!
PART 1
You create a name attribute within the <input/> field. So it would look something like this:
<input name="search" type="text" placeholder="Search..."/>
The most basic way of submitting this input is with an input field where the type=sumbit
<input type="submit" value="Search"/>
PART 2
It doesn't matter what you call the GET method. You could search a database using one, two, etc. methods. One way of doing it is to have a get '/search' do (or something like that) that directs the user to a webpage with the search bar. Then you could have that search bars action equal a different root like get '/' do. You could also just do it all under one GET root.
PART 3
Then within the app.rb file, under the GET root (get '/' do), you would use params[:search] to save the text that was entered into your input field.
get '/' do
#towns = Town.where(:name => params[:search])
end