Develop Reference

Not able to perform change event with autocomplete field in Angular formly

I am using autocomplete field, to populate the values. I have used templateOptions.change in expression properties to set value of other field, but i have noticed that change event is called only when the value of autocomplete is deselected. when i am trying to select the value from autocomplete change event is not called.
I have created a stackblitz link to achieve my requirement, I am noticing that change event only calls after we change the value of autocomplete dropdown, and if it is blank and then we select any value it doesn't call the change event.
I want to know whether there is an option for onselect of dropdown rather than the change event.
I tried using the hooks too with the template option but didn't work out, it will be helpful if anyone can assist on this.
Thank you
Please find this link: https://stackblitz.com/edit/angular-bf6g6m-6twrjw
First Step:
When i select first value from autocomplete dropdown: Observation is no change event is called
Second Step:
Now when i select the other value from dropdown: Observation is change event is called.

change event doesn't work as desired with autocomplete using formly and ng-prime.
I tried using onSelect which works fine and the behavior of the event is as desired.
Please find below the following code, just replace change event with onSelect on using autocomplete, formly, primeng and angular.
In formly autocomplete component: (Ng-prime formly)
(onSelect)="to.onValueSelect(field,$event)"
While consuming onSelect in autocomplete field
fields: FormlyFieldConfig[] = [
{
key: 'Autocomplete',
type: 'autocomplete',
templateOptions: {
required: true,
label: 'Autocomplete',
placeholder: 'Placeholder',
filter: (term) => of(term ? this.filterStates(term) : states.slice()),
onValueSelect: (field, $event) => { //call the onSelect event
console.log('----->select event called')
}
},
},`

jQuery UI Autocomplete: Append to a cloned search not showing

I'm using the jQueryUI Autocomplete widget on my search form, It's working great on my initial search box, the user has the option to add another row using an add button, this fires a function that clones the master search:
$("#search_input").clone(true).addClass("cloned_terms_" + add_count).attr("id", "search_input_" + search_input).appendTo("#clone");
this adds identifiers to the row, then i'm adding a data-id attribute to the new search box:
$(".cloned_terms_" + add_count + " input").val('').removeClass("search_input_0").addClass("search_input_" + search_input).attr("data-id", search_input);
However when I try and use the appendTo option on the autocomplete, it doesnt show, If i view the page in the console the list is there but doesnt show, I've tried adding the ui-front class to various parts of the page with no luck, any help would be appreciated, here is the function to create the autocomplete:
function setAutocomplete ( source , autocomplete_selector )
{
console.log("autocomplete_selector: " + autocomplete_selector);
$(autocomplete_selector).autocomplete({
source: source,
autoFocus: true,
minLength: 1,
disabled: false
}).focus(function() { // refocus the autocomplete if the user clicks away from a partially complete search
$(this).autocomplete("search");
});
}
This is called initially on the first search input, and works great:
however when I add another search row. I either get the autocomplete attached to the initial search or it will not show, Any help? Cheers
EDIT
Here I'm at the point where I'm getting the desired effect, but it is only visible in the console, the user can't see the options?

Render custom Radio button in ExtJS 3

I want to customize the radio button where I need to display text box, or Date field besides radio button instead of text.
There is a similar question Add custom item to radio button in extjs, but the answer is for ExtJs 4. Can someone please help me with similar implementation for ExtJs 3?
I tried using contentEl, but the div gets appended below the radio input tag, so is not visible. After looking at Ext code I tried overriding private getContentTarget function and it seems working but doesn't feel the right approach

Here is a workaround based on the ExtJs 4 answer. Instead of boxLabelEl, you can use getEl().down('label.x-form-cb-label') like so:
listeners: {
render: function( radio ) {
var boxLabelEl = radio.getEl().down('label.x-form-cb-label');
boxLabelEl.update("");
radio.field = Ext.create('Ext.form.field.Number', {
renderTo: boxLabelEl,
width: 40,
disabled: !radio.getValue()
});
boxLabelEl.setStyle('display','inline-block');
},
change: function( radio ) {
radio.field.setDisabled(!radio.getValue());
}
}
This should work for ExtJs 3.

JQuery Mobile Mail Form - capturing data from "select" field

I used the following solution for a mailer form for my JQuery Mobile site:
http://eisabainyo.net/weblog/2011/06/29/creating-a-contact-form-in-jquery-mobile-and-php/
Everything works fine, except the "required" function does not properly parse values for HTML "select" elements:
$('.required', $contactform).each(function (i) {
if ($(this).val() === '') {
error++;
}
}); // each
In other words, whenever I add the class "required" to a "select" form element, the form will not submit because it always triggers the error "Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk" regardless of what item is selected.
Source article is from June 2011, so my guess is that this function doesn't work with my version of JQuery (1.8.3) or JQM (1.3.2).
I'm not a Javascript expert, and this article unfortunately provides little documentation as to how exactly this function works. Any suggestions?

Use this instead of the line that you have:
$('.required', $contactform).not('span').each(function (i) {

Issue with custom validation rule

I am using knockout.js plugin. I have created a custom validation rule named select for selectlist. I have created a jsfiddle :
http://jsfiddle.net/fQBxM/1/
My problem is when i load the page, the validation message is already shown, but i want to show it only when user submit the form. How can i do this ?

Add a default value '0' to your observable, then the validation won't fire for the initial value:
ko.observable('0').extend({ select: { message : "please select gender" } })
Demo JSfiddle.