I'm trying to add new value to react-selectize multiselect when the user clicks on a button (I use http://furqanzafar.github.io/react-selectize/#/) .
In JQuery I just call addItem(value, silent) on a button click.
for example in JQuery:
v.selectize.addItem("email#gmail.com");
In My code:
I created some MultiSelect component:
<MultiSelect
placeholder = "All Emails"
options = {this.state.emails.map(
source => ({label: source, value: source})
)}
onValuesChange = {value => this.onInputChange(value, "sources")}
/>
Then I have this button on the bottom of the page:
<button OnClick={this.addEmailValue("email#gmail.com")}></button>
When I click on the button it goes to:
addEmailValue(email){
//here I want to add the email as a item to the multiSelect
}
How can I add "email#gmail.com" to the MultiSelect as an item? (just like the JQuery example on top)
Thanks.
By the looks of things, you just need to update the 'emails' state by pushing the new email to it in your addEmailValue function. For instance:
addEmailValue(email) {
var emails = this.state.emails;
emails.push({
label: email,
value: email
});
this.setState({
emails: emails
});
}
Related
On my webpage, I am using a Symfony Form with an EntityType class. I want to create an extra button that selects all items from this dropdown on click. Is this possible using JavaScript / JQuery? Simply changing the automatic generated HTML does not work.
FormType.php:
->add('item', EntityType::class, [
'class' => Item::class,
'choice_label' => function(Item $item) {
return sprintf('%s', $item->getName());
},
'label' => 'Staff',
'multiple' => true,
I think something like that would do the trick :
<!-- Somewhere in your Twig file : -->
<button id="check-all-options">Check all !</button>
document.querySelector('#check-all-options').addEventListener('click', () => {
// Select all the options of your <select> tag
const options = document.querySelectorAll('#form_item option');
// Loop on all the options and pass them to selected ✅
options.forEach(option => option.selected = true);
});
Let me know if it helps :)
I am trying to add dynamic add button angular2 multiselect. Any one has done this dynamic addition of user entered value by selecting Plus button. I have tried with addNewItemOnFilter: true, I'm not able to see any + button.
I am putting (onAddFilterNewItem)="onAddItem($event)" for using angular2-multiSelect.
In settings, I am having
addNewItemOnFilter: true in the settings file.
Still I am not getting an extra 'ADD' button to add extra field. Any help I would appreciate.
There You have dynamic multiselect buttons.
Updated as you want input inside.
Template:
<div *ngIf="buttons" class="btn-group">
<button *ngFor="let button of buttons" (click)="addDynaminMultiseletButton()">
{{button}} <input type="text" (click)="setInput($event)">
</button>
</div>
Component:
buttons = ['Another button']
input: string
constructor() { }
addDynaminMultiseletButton() {
this.buttons.push("" + this.input)
}
setInput(event: any) {
this.input = event.target.value
}
You can store them in database:
buttons$ = Observable<any[]>
constructor(private db: SomeDatabase){}
ngOnInit() {
this.buttons = this.db.collection('fancyButtons').valueChanges()
}
addDynaminMultiseletButton() {
this.db.collection('fancyButtons').add({ fancyButton: 'fancyButton' })
}
Remember to subscribe when you want to display async buttons:
Template:
<div *ngIf="buttons$ | async as buttons " class="btn-group">
<button *ngFor="let button of buttons" (click)="addDynaminMultiseletButton()">+</button>
</div>
Have a nice day and good luck with programming! Remember to assign at least one element in array so there will be at least one button on screen.
I using PrimeNg dropdown
Here is html of template
<div>
<label>{{ l('Portfolio') }}</label>
<p-dropdown
[(ngModel)]="property.portfolioId"
[disabled]="!landlordPortfolios.length"
[options]="landlordPortfolios"
autoWidth="false"
[style]="{ width: '100%' }"
name="landlordPortfolio"
[autoWidth]="true"
></p-dropdown>
</div>
I get values for dropdown via this method
getLandlordPortfoliosById(landlordId: number): void {
this.landlordPortfolios = [];
this._landlordPortfolios.getPortfolioDropdownValuesById(landlordId).subscribe(result => {
result.items.forEach(value => {
this.landlordPortfolios.push({
label: value.name,
value: value.id,
});
});
});
}
And call it like this
if (this.property.landlordId) {
this.getLandlordPortfoliosById(this.property.landlordId);
this.initLandlordSuggestionsById(this.property.landlordId);
}
For example I have landlordId = 1 and selected option for dropdown must be also with id = 1.
Here is result
But I get selected item in dropdown, just blank field, and I see all options when click dropdown. Where can be my problem?
So problem was in data request/get
if I set *ngIf to dropdown, like this *ngIf = "landlordPortfolios.length" and delete [disabled], all going well.
Here is the code where I have used the plugin to display options with checkbox in angular.I need to disable particular/set of options based on a condition. the ng-disable does not seem to help. Jquery needs to identify each li or option using id's.
<div ng-if="tab===1"
class="col-md-3 padd0LeftRight marTop5 width150"
ng-dropdown-multiselect=""
options="severities"
selected-model="$parent.severityModel" checkboxes="true"
extra-settings="severitySettings"
translation-texts="SeverityText"></div>
Controller:
$scope.severityModel =[];
$scope.severitySettings = {
showCheckAll: false,
showUncheckAll:false,
externalIdProp: ''
};
$scope.SeverityText = {
buttonDefaultText:"Severity "
};
{label: $scope.resource['casepage.filter.ciscopending.internal'],
name:'Cisco_Pending'
}];
$scope.severities = [
{label:$scope.resource['landingpage.label.severity1'], name:'1',id:'1'},
{label:$scope.resource['landingpage.label.severity2'], name: '2',id:'2'},
{label:$scope.resource['landingpage.label.severity3'], name: '3',id:'3'},
{label:$scope.resource['landingpage.label.severity4'], name: '4',id:'4'}
];
Onclick of a button or a checkbox, I have to disable some options in the dropdown. How do we do that? Can anyone suggest here. Thanks.
Whenever I click on view the items are selected on same page. I need to display them on the new page, but I am not able to do that.
<html ng-app="countryApp">
<body ng-controller="CountryCtrl">
<div ng-repeat="x in models track by $index">
<button ng-click="select(x, $index)">View Me</button>
</div>
Selected Model:
<p> {{selected.name}} </p>
<p> {{selected.brand}} </p>
<p> {{selected.price}} </p>
<p> {{selected.quan}} </p>
<p> {{selected.sku}} </p>
</body>
Function:
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope){
$scope.select = function(brand) {
$scope.selected = brand;
}
$scope.models = [
{ brand: "Brand: Apple", id: 980190962, name: "Name: iPhone 5", price: "Price: $199", quan: "Quantity: 1", sku: "SKU:1234" },
{ brand: "Brand: Samsung", id: 298486374, name: "Name: Galaxy S3", price: "Price: $199", quan: "Quantity: 2", sku: "SKU:5678"}
]
});
</script>
</html>
You can use two options either store that selected user to localstorage or somewhere and read that in details view like
localStorage.setItem('myObj',JSON.stringify(brand));
and retrieve that in details view like
JSON.parse(localStorage.getItem('myObj'));
OR
I will prefare to use parent child relationship in this suppose you have a parent controller named 'CountryCtrl' and two child controllers 'CountryListCtrl' and 'CountryDetailCtrl'. List page is bind to 'CountryListCtrl' and details view is bind to 'CountryDetailCtrl' and on top you have 'CountryCtrl'. You can change your view using ng-include etc. When moving from List to Detail Controller set an object on parent controller and it will be accessible to both Controllers. You can learn about parent and child relationship in angularjs on internet there are tons of article available.
Thanks.
To show the details of the selected item in a new tab, there are multiple ways to achieve this. One way is to add a form with attribute target="_blank" (to open the action attribute in a new tab) and submit it in the select() function.
So you can add a form, like this:
<form id="openNewTabForm" target="_blank" method="GET"></form>
Then update the function to submit the form. There are multiple ways to pass the data about the selected phone - e.g. store the data in form fields, serialize the data and store it in a cookie, in localStorage, etc. Here is an example using hidden form fields:
$scope.select = function(phone) {
var form = document.getElementById('openNewTabForm');
form.action = action="selectedPhone.html";
Object.keys(phone).forEach(function(field,index) {
var input = form.elements[field]; //look for an existing form field for this field
if (input) { //update existing form field
input.value = phone[field];
}
else { //create a new form field for this
input = document.createElement('input');
input.type = 'hidden';
input.name = field;
input.value = phone[field];
form.appendChild(input);
}
});
form.submit();
$scope.selected = phone;
}
Then have a new page (e.g. selectedPhone.html) that takes the values submitted with the form. This could be a server-side page (e.g. with PHP, Ruby, etc), in which case you would set the attribute method="POST" on the form. Or you can just use a regular HTML page and process the query string. You could also use AngularJS + UI Router, VueJS, etc. to modify the URL after it has been loaded.
Take a look at this Plunker example I made for an example. I would have included a code snippet that would run here but SO doesn't (currently) allow having a form submission open a new tab because it is sand-boxed.
Another approach might be to use window.open() for opening a new browser window but that might lead to issues with popup blockers for some users.
You can open new modal on click of button function like following -
In controller:
$scope.showDetails = function(){
// open new html modal to show new screen using following
$ionicModal.fromTemplateUrl('templates/views/details.html',{
scope: $scope,
animation: 'none',
backdropClickToClose: false
}).then(function(modal){
$scope.modal= modal;
$scope.modal.show();
});
}
In HTML:
<div ng-repeat="x in models track by $index">
<button ng-click="showDetails (x, $index)">View Me</button>
</div>
By using new modal (screen) you can design as you required as well.