Develop Reference

How to properly register a click event on a radio button?

I am dynamically creating HTML radio buttons where I am assigning the Id of the input tag to a variable. I want to append a click event handler to these radio buttons using the Id I have assigned. How do I properly use the Id I created to generate a click event? Right now, the event is not being triggered at all.
generateDynamicHTML(function (structure) {
let keys = Object.keys(structure);
keys.forEach(function(key){
let radioButton = $("<input type='radio' name='studentName' id=" + key + "/><label for=" + key + ">" + key + "</label>");
radioButton.appendTo('#studentToggle')
$("#" + key).click(function () {
console.log(key);
})
})
})
I am using the console.log to test if the method was being hit but I am getting empty results. I know the keys are correct because the radio buttons are being created.
Any help would be appreciated.
Thank you.

The problem is that the id added is key/ not key. You should leave a space between " and the closing of the input tag. Or use template literals.
See below
const structure = {
'first': 1,
'second': 2
}
let keys = Object.keys(structure);
keys.forEach(function(key) {
let radioButton = $("<input type='radio' name='studentName' id=" + key + " /><label for=" + key + ">" + key + "</label>");
// or template literals
// let radioButton = $(`<input type='radio' name='studentName' id=${key} /><label for=${key}>${key}</label>`);
radioButton.appendTo('#studentToggle')
$("#" + key).click(function() {
console.log(key);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="studentToggle">
</div>

If you use event delegation, you never have to add extra event handlers to options as long as their parent does not change:
const generateDynamicHTML = function( structure ) {
return Object
.keys( structure )
.map(function( key ) {
return '<input type="radio" name="studentName" id="' + key + '"/><label for="' + key + '">' + key + '</label>';
})
.join( '' );
};
const fields = $( '#student_fields' );
// Add the click handler before any radios
fields.on( 'click', 'input[type="radio"]', function( event ) {
console.log( event.target.id );
});
// Add the radios, the click stil works
fields.append( generateDynamicHTML({
"john": { "age": 21 },
"jane": { "age": 20 }
}));
// Add more radios
fields.append( generateDynamicHTML({
"dave": { "age": 21 },
"joe": { "age": 19 }
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="student_fields">
<legend>Students</legend>
</fieldset>

Start autocomplete when press any keyword in input field

Autocomplete is not working when there is some text in input field and I want that it should work in that input field at any time when I press any keyword(e.g '#').
I am able to do the search part it is showing in the log but on page its not visible, its only visible if the input field is empty.

you can see this example.
i think it could help you a
<input type="text" name="autocomplete" id="globalBCCAutoComplete" value="john">
$(document).ready(function() {
let countries = [
{ value: '{contract_name}', data: 'Contact Name'},
{ value: '{user_company}', data: 'User Company' }
];
//get current value from the textbox
let initialTextValue = $('#globalBCCAutoComplete').val().trim();
//append the values to the json object.
$(countries).each(function(key, country) {
country.value = initialTextValue + ' ' + country.value
});
//the rest of your code:
$('#globalBCCAutoComplete').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
});

ajax autocomplete same data with multiple textbox jquery

i have one issue with jquery autocomplete, its working with one textbox perfect but when i create multiple textbox using jquery with same ID at that time its working for only first textbox not for another textbox .
my question is i want to create multiple textbox and implement same autocomplete data with all text box
this is my code for create textbox using jquery
var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input id="autocomplete-ajax" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
this code for ajax autocomplete
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
please help me for this issue its very important for me
thanks all.

var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input class="txtAutocomplete" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
Autocomplete function
$('.txtAutocomplete').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});

why did you use the same ID for severals input ? use classes if you have to tag multiples elements, for example .autocomplete-ajax-input on each textbox. And then declare your autocomple function with $('.autocomplete-ajax-input').autocomplete

Selecting an autocomplete item is not working

I have the following field inside my asp.net mvc web application:-
<input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style="margin-top:8px"/>
and i wrote the following autocomplete function:-
$("input[data-autocomplete-source]").each(function () {
var target = $(this);
target.autocomplete({
source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000,
create: function () {
$(this).data("autocomplete")._renderItem = function (ul, item) {
return $('<li>').append('<a>' + item.label + '<br>' + item.resourcename + ' | ' + item.customername + ' | ' +item.sitename + '<hr>' +'</a>')
.appendTo(ul);
};
}
});
});
Currently the auto complete is working well (the result list will be displayed), but the problem is that if i select an item from the auto complete result it will not be rendered inside the auto complete field.and when i check the firebug i noted the following error , when selecting an auto complete item:-
TypeError: item is undefined
[Break On This Error]
self.element.val( item.value );
For example if i start typing the following words "i am" , then i select "I am writing" from the autocomplete list result , then the autocomplete field will have the "I am" text instead of the select "I am writing". Can any one advice , what is causing this problem?
Thanks
EDIT
i edited my autocomplete as follow, by adding focus & select :-
$("input[data-autocomplete-source]").each(function () {
var target = $(this);
target.autocomplete({
source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000,
focus: function (event, ui) {
$("input[data-autocomplete-source]").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("input[data-autocomplete-source]").val(ui.item.label);
return false;
},
create: function () {
$(this).data("autocomplete")._renderItem = function (ul, item) {
return $('<li>').append('<a>' + '<b>'+item.label + '</b><br>' + '<span style="color:#8e8e8e ">' + item.resourcename + ' | ' + item.customername + ' | ' + item.sitename + '<hr style="padding: 0px; margin: 0px;">' + '</span></a>')
.appendTo(ul);
};
}
});
});
but i wil get the following error when i am trying to select an autocomplete item:-
TypeError: ui.item is undefined

Please add "Select" event and try below
$( "input[data-autocomplete-source]" ).autocomplete({
select: function( event, ui ) {
$( "input[data-autocomplete-source]" ).val( ui.item.yourValueProperties);
return false;
}
});
***Note : yourValueProperties= like customername ***

Read selected node's values from kendo tree view?

I have a kendo treeview having a node with {id, value}. and I want to get selected node's id and value when I click on a button.
How can I get it? Is there any inbuilt functions there to get it?
Here is my sample code:
$("mytree").kendoTreeView({
dataSource: mydata,
dataTextField: "Name",
dataValueField: "Id",
});

Use the .select() method. Be sure to look at the other methods available as well.
var tv = $('.mytree').data('kendoTreeView'),
selected = tv.select(),
item = tv.dataItem(selected);
if (item) {
alert('Selected item: ' + item.Name + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
} else {
alert('Nothing selected');
}
Fiddle here

**
var tv = $("#treeview-right").data("kendoTreeView");
var selectedNode = tv.select();
var item = tv.dataItem(e.node);
item.text will give you the text of the selected node.
**

I disagree with the selected answer because depending on what you actually DO, you can be 1 step behind the actually selected value.
If you had some simple delete function then this type of code works fine
var treeview = $("#treeview").data("kendoTreeView");
var selectedNode = treeview.select(),
item = treeview.dataItem(selectedNode);
However, once you start playing with the treeview more you will end up regretting that as I have.
Best practice is to tie to the event handler
e.g.
var treeview = $("#treeview").kendoTreeView({
expanded: true,
select: onSelect,
....
}).data("kendoTreeView");
select function
function onSelect(e) {
var treeview = $("#treeview").data("kendoTreeView");
var item = treeview.dataItem(e.node);
if (item) {
console.log('Selected item: ' + item.whatever + ' | Id = ' + item.Id + ' | Type = ' + item.Type);
var someVariable = item.whatever;
} else{
console.log('nothing selected');
}