how to get event of on change of drop down in angular? - javascript

can you please tell me how to get event of on change of drop down in angular ?.
I make a drop down from json .I need to show alert when user change the drop down ng:change and get it drop down value ? I make form form using this doc
https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#global-options
here is my plunker http://plnkr.co/edit/wbziK5aRUg69JuwXDoVy?p=preview
how I i bind ng:change ?
here is my drop down
title: {
type: "string",
required: true,
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
how to bind the drop down event ?

angularjs Select with filter to filter out the option that's already selected
refer this you need to use ng options and you r using array.and ur trying to populate object thats why it is not getting binded i guess

Related

ng-select disable form control not working in reactive form angular

I was trying to setvalue to my form and would like to disable the form.
Somehow if I setvalue to form it is working fine but as soon I write disable method my ng-select value is going out.
Have anyone faced same issue while disabling the ng-select with values?
form = new FormGroup({
code: new FormControl()
});
values = [{
value: "0"
label: "test1"
},
{
value: "1"
label: "test2"
}
]
//I am setting values using setvalue and disbling after wards
this.form.controls['code'].setValue('0')
this.form.disable();
<ng-select formControlName="code" [items]="values" bindValue="value" labelForId="code"
[clearable]="false" [selectOnTab]="true" placeholder="Select one" data-e2e-id="code">
</ng-select>
Are you sure that you change value?
Method to set value:
Methods using setValue()
this.form.get("code").setValue('0');
this.form.controls["code"].setValue('0');
Methods using patchValue()
this.form.get("code").patchValue('0');
this.form.controls['code'].patchValue('0');
this.form.patchValue({"code": '0'});
In you case could be the problem that form updates only after applying disablibg and you doesn`t see that you update filed on a wrong way
You can disable/enable a form control when you initialize it by setting disabled to true as follows
users.push(this.fb.group({
userType: this.fb.control({value: 'Admin', disabled: true})
}));
You can do so by calling the disable/enable methods for that particular form control to perform it dynamically.
// To enable form control
userType.enable();
// To disable form control
userType.disable();

How to disable a SELECT OPTION in AG-Grid

I'm trying to disable a dropdown element in AG-Grid and React. Like this example from W3Schools:
option value="volvo" disabled>Volvo
This will be a dynamically built dropdown and I can find no mention of the ability to do this using a cellEditor or cellEditorParams. I can find no evidence that disabling a dropdown option is possible in AG-Grid.
You can achieve this by using a custom cell renderer for that field i.e
{
field: 'yourField',
cellRenderer: 'selectboxRenderer',
// Here **disable** is the prop that will get passed to your selectBoxRenderer
// You can put your condition when based on which you want to disable
// You will also have to receive that **prop** in your component
cellRendererParams: {
disable: ({ data }) => {
// Your condition here
},
}
}

Can't programmatically select option using Select2

I have a Select2 working fine attached to a select list but when someone enters a new item and I rebind the select list and try to programmatically select the new item, it refuses to display.
There are a number of other posts re this but their solutions don't work for me.
Use .select2("val", value). Does nothing.
Use .select2("data", value). Does nothing. Not sure how this is supposed to be different.
Use the InitSelection option to set a value. This leads to the following error message: Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element.
In the Ajax success function after adding the new option to the database, I have the following Javascript:
BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[{id: "' + data.DishID + '", text: "' + data.DishName + '"}]';
$("#dd").select2("data", arr);
So in this latest iteration I have tried to supply an array with the id and text from the select list item as per another suggested solution but still nothing occurs. What am I doing wrong? Is this impossible when using Select2 with a select list?
Edit: I have the following line in MVC that creates the Select list:
#Html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new { id="dd",style="width:470px;" })
which must be causing the problem by binding to DishID from the model which was originally blank when it came from the server. DropDownGroupListFor is just an HTML helper that allows for using OptionGroups in a Select but it must be the binding that is a problem. What is the best approach here, to bind in a different way or to somehow update the model's DishID, not sure of the best practice?
var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change");
You need to destroy your select2 before adding/modifying items. If you do, then your select2 will respond just like its bound first time
Select2 Dropdown Dynamically Add, Remove and Refresh Items from

Fire method to fill detailsview control, from jquery autocomplete input

I have an input box for searching employee info (attached to a jquery autocomplete), and a box for employee number. The employee info queries multiple values (Lastname Firstname, Title, Clocknum) and returns them all as a string via the autocomplete. This is only if they dont know the clock number. The additional box is so they can search via clocknum as well.
Is there a way, to fire a method which populates a data control after clicking on or tabbing on the selected jquery autocomplete value?
using the select property of your autocomplete box:
updated after ekoz's comment
$('#lastName').autocomplete
({
source : "FormAutoComplete.ashx",
minChars : 3,
width : 325,
mustMatch: true,
select : function()
{
//jquery allows you to save several code lines
$('#txtClock').value(ui.item.value.substr(ui.item.value.length-5));
}
});
a complete read of jquery autocomplete's documentation should makes clear the code above http://jqueryui.com/demos/autocomplete/

Update autoselect value option dynamically using Ajax.InPlaceCollectionEditor

I'm using Scripaculous' in place collection editor to present the user a with list of customers to assign to a contact dynamically. I am passing a value parameter as detailed in the documentation so when the select is generated it will auto-select the current associated customer (if there is not one already the default is provided.)
This works well except when the user clicks on the 'edit me' field a second time the original value is selected, not the customer that was selected most recently. This is because the original call to InPlaceCollectionEditor is unchanged. My question is whether there is any way to update the autoselect value without dynamically updating the entire scriptaculous call (this would mean selecting all the customers again via ajax, which is possible but not ideal.)
Here is the code:
<div id="editme">Test 1</div>
<script type="text/javascript">
new Ajax.InPlaceCollectionEditor(
'editme',
'/usercustomer/editCustomer/id/811',
{ collection: [['192981', "Test 1"],['192893', "Test 2"],['192894', "Test 3"] ... ],
ajaxOptions: {method: 'get'}
, value: 192893 } // specifying the value parameter auto selects object id 192893
);
</script>
Is this a limitation of InPlaceCollectionEditor or is there some other way around this?
Pass a variable instead of the hardcoded number as 'value'. Set that variable to the initial or selected value right before making the call.

Categories