I am currently using react-select library to my project
react-select
This is my create invoice page, Please check below view,
When user select the PO drop down, red colored text boxes are automatically filled. It is working well.
This is my invoice list page view
When user click the action button, data passed and redirect to the create invoice page. Currently object passed and PO number set correctly. but other fields did not filled automatically.
PO NO is set correctly. But on change function did not fired and did not set other text box values.
This is my drop down and onchanges function.
<Select
options={options}
value={values.purchaseOrderNumber}
onChange={onChange} onFocus={onChange}
name="purchaseOrderNumber"
/>
const onChange = (selectedOP) => {
setInputValue(selectedOP);
loadselectedValue(selectedOP);
//handleChange(selectedOP);
console.log(selectedOP);
};
I know this codes not enough to give better solution. but if you can please tell me the correct path to do this using react hooks. thanks
Related
I want to filter through listData that populates a react table. When an option is selected in a react select dropdown menu I want the table to only show the rows that have the changes in.
This is what I am trying to do:
``` data={_.filter(listData, (row) => {
return includes(row, row.has_changed);
})} ```
Currently when an option from the dropdown is selected it doesn't do anything.
I am not quite sure how to go about doing this? Any ideas? Please let me know if you need more code/ what code would help.
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.
I have a requirement to open a modal on click of input box. Modal contains list of countries with search bar, once modal is open it searches for text picked from input and shows filtered list. Now user can search for different country and select from filtered list, modal closes and value is added to input field. In code,
openCountryPickerModal($event) {
let modal = this.modalCtrl.create(CountryCodePickerComponent, {"searchValue":$event.target.value});
modal.onDidDismiss(data => {
if(data){
$event.target.value=data.countrySelected;
// Here: the value set to $event.target.value is not updating to input box's model emergencyContactInfo.currentPersonalAddress.country
}
});
modal.present();
}
and in template
<ion-input (click)="openCountryPickerModal($event)" [(ngModel)]="emergencyContactInfo.currentPersonalAddress.country" type="text" placeholder="Country" readonly></ion-input>
Now the problem is, though it appears value is changed in UI, but never updates value to model. Any special reason?
I tried many ways to solve this but nothing works and I appreciate help if any.
I'm trying to have a dropdown menu for the user to select the database table. I have defined few tables in db.py and I want the user the to select a particular table from a dropdown menu and insert entries. Right now I use SQLFORM:
def index():
form=SQLFORM(db.selectedtable) #want to change the table name#
if form.process().accepted:
response.flash = 'form accepted'
elif form.errors:
response.flash = 'form has errors'
else:
response.flash = 'please fill out the form'
return dict(form=form)
I need the user to select 'selectedtable' value from a dropdown list that shows all the available tables in the DB. I do not necessarily want to retrieve the table values from DB. I am OK with defining a list with the available tables and the dropdown menu can pull the table names from that list.
So far I only found IS_IN_DB to automatically create a dropdown and PluginDropdown() but that does not serve my purpose. If soemebody can direct me to the proper way of handling this task I'd be really thankful.
Regards.
Update:
After Anthony's suggession I tried the following with , as I'm not that familiar with JS.
{{extend 'layout.html'}}
{{select='NONE'}}
<form>
<select>
{{for item in TOOLS:}}
<option value="{{select=item}}">{{=item}}</option>{{pass}}
</select>
<input type="submit" value="Go!"/>
</form>
<h2>Input form</h2>
{{=form}}
<h2>{{=select}}</h2>
As you might see this doesn't work properly. What I tried to do is to get the user chose value to 'select' variable. But it doesn't work. It always gets the last element in ITEMS (this list is defined in db.py). My next option would be to be call another controller function, passing the user selected value as an argument. Then it can prepare the form with the passed value and send to a view to display
<h2>Input form</h2>
{{=form}}
But I'm not sure how I can assign the user chosen value to an argument and then call another controller function with that arugument value.
If you have any suggestion how I can modify this to get the user chosen value thats very much appreciated. Thank you.
You could create a <select> element listing all the tables, and then load the form associated with the selected table as a web2py component via Ajax. In the view of the main page (e.g., /views/default/index.html):
<script>
jQuery(function() {
jQuery('#table').change(function() {
web2py_component("{{=URL('default', 'form.load')}}" + "/" +
jQuery(this).val(), target='form')
})
})
</script>
{{=SELECT('Select a table', *db.tables, _id='table')}}
<div id="form"></div>
And in a controller (e.g., default.py):
def form():
if request.args(0) in db.tables:
response.generic_patterns = ['load']
return dict(form=SQLFORM(db[request.args(0)]).process())
else:
raise HTTP(404)
Note, db.tables is a list of all the tables defined on the db connection object -- it is used in the SELECT() helper in the view to generate a <select> list of all the tables. The script in the view registers a jQuery event handler that fires whenever a different table is selected from the dropdown. The handler calls the web2py_component() function (which is in /static/js/web2py.js), which loads the form component via Ajax into the div with id="form". It appends the value of the selected table to the URL.
In the controller, the form() function checks for the db table name in request.args(0). It then sets response.generic_patterns so the "generic.load" view will be allowed (by default, generic views are only enabled for local requests). Alternatively, you could define your own "form.load" view, or even use a different extension (e.g., "form.html").
Because the form is loaded as a web2py Ajax component, the form submission will be trapped and submitted via Ajax as well, so it will not result in a full page reload.