I have the following function which works properly:
$(function() {
var availableTags = <? echo htmlspecialchars($jsEnc,ENT_NOQUOTES,'utf-8');?>;
$( "input.tags" ).autocomplete({
source: availableTags
});
});
On all pre-existing:<input class="tags"/> the function does just as it should (an autocomplete list that is a database dump).
Now, these inputs actually exist in a <table>, with rows that can be added or removed on the fly.
When adding the cells to the table I do the following:
if(i== document.getElementById("soldTo").cellIndex){
element2.setAttribute('class','tags');
}
Which basically makes the input (element2) capable of being a target (at least so I thought) of the jquery function.
I am assuming that the jquery function is not "conscious" of this new element and must be re-initialized in some way to see the new members.
Is this true? Is this done at the time of adding the new element? Some sort of $(x).add(myBehavior)?
EDIT
I tried the following:
$("table.inventoryItems").bind("DOMSubtreeModified", function() {
alert('z');
$( "input.tags" ).autocomplete({
source: availableTags
});
});
and the alert also does not trigger.
Does anything seem suspicious?
Thank you
PROPER SOLUTION EXTERNAL LINK
jquery autocomplete on element retrieved w/ ajax
try DOMSubtreeModified event:
$("table").bind("DOMSubtreeModified", function() {
$( "input.tags" ).autocomplete({
source: availableTags
});
});
or you can use on() method based on how you create a new input element:
$("table").on("change", "input.tags", function() {
$(this).autocomplete({
source: availableTags
});
});
Related
Demo and full code is like this :
http://jsfiddle.net/9R4cV/685/
I using like this :
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
But it's not working
Any solution to solve my problem?
You need to trigger .change() (or .trigger('change')) on input value changes, otherwise programatically changes are not triggering events.
The id of your input is #customer not #customer_name.
$( "#tags" ).autocomplete({
source: aTags,
select: function(event, ui) {
$("#customer").val(ui.item.label).change();
}
});
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
Working example.
Why not change the #customer_copy directly when item selected?
$( "#tags" ).autocomplete({
source: aTags,
select: function( event, ui ) {
console.log(ui.item.label);
$("#customer").val(ui.item.label);
$("#customer_copy").val(ui.item.label)
}
});
jQuery is new to me, thanks for bearing with me.
I have some text inputs in HTML:
<input type="text" class="NameTextID" id="fn.1">
<input type="text" class="NameTextID" id="ln.1">
<input type="text" class="EmailAddressTextID" id="ea.1">
Two inputs are of class NameTextID and one is of class EmailAddressTextID. Notice each id is unique.
I then would like to leverage jQuery's autocomplete function on any DOM item with a class from above.
$(document).ready(function() {
$(function() {
$( ".NameTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
$( ".EmailAddressTextID" ).autocomplete({
source: recEngineEmails,
minLength: recMinCharCount,
select: recEngine,
});
});
});
Now, in the function recEngine:
var recEngine = function(event, ui) {
var selected_value = ui.item.value
var selected_id = ????
}
jQuery passes two parameters, how can I obtain the id if the ui item that activated the recEngine function?
Thanks in advance!
You can just do:-
var selected_id = this.id;
where this refers to the current element being referred to.
You can acces it like this:
ui.item.id
First thing you can use multi selectors by separating by a comma ','.
Then to get the element where that fired the event you can use the key word this or event.target.
To get its id you can use $(event.target).attr('id')
$(event.target).attr('id')
$(document).ready(function() {
$(function() {
$( ".NameTextID, .EmailAddressTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
});
});
var recEngine = function(event, ui) {
var selected_value = ui.item.value;
var selected_id = $(event.target).attr('id');
}
I'm using http://jqueryui.com/demos/tabs/#manipulation. I want to get an title of current selected tab which I earlier named (e.g. from a href). How to get it?
I tried:
$(ui.tab).attr('href')
Alternative way to get tab title:
var selected = $("#tabs").tabs( "option", "selected" );
var selectedTabTitle = $($("#tabs li")[selected]).text();
From the jquery docs,
var selectedTabTitle = null;
$( ".selector" ).tabs({
select: function(event, ui) {
selectedTabTitle = $(ui.tab).text();
alert(selectedTabTitle);
}
});
Use following in case of jQuery 1.9+,
var currentTabTitle = $('div[id="mytabs"] ul .ui-tabs-active > a').attr("href");
Just another version:
$("#tabsId .ui-state-active > a").html()
i guess jquery was modified because now i was able to fetch tab name using:
$(function () {
$( "#tabs" ).tabs({
activate : function (event,ui) {
selectedTabTitle = ui.newTab[0].innerText;
alert(selectedTabTitle);
}
});
});
Thanks I was struggling with this code.
Now I've used thiscode in my program. Working like this.
$('#tabs').click('tabsselect', function (event, ui) {
var selectedTab = $("#tabs").tabs('option','selected');
alert("selectedTab===>" + $($("#tabs li")[selectedTab]).text());
});
I have a large block of HTML that needs to be replaced, which includes fadeOut/fadeIn transitions. I can't figure out how to add the HTML to the page (hidden) without wrapping it in a div.
$.get('/ajax', function(newHtml){
var $newEvent = $('<div class="new-event" />').hide().html(newHtml);
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow').removeClass('new-event'); //then remove the wrapper div that I didnt need in the first place
});
});
What is the best way to do this while utilizing best practices for performance?
Solution:
For some reason, I thought that creating a new element like this: $(newHtml) was less efficient (bad performance) than html(newHtml). But apparently, they are the same as far as performance goes (I have no data to back this up other than my own observations).
So the following code is just as efficient as the previous:
$.get('/ajax', function(newHtml){
var $newEvent = $(newHtml).hide();
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow');
});
});
When adding the code to the page, have top level elements all be hidden
<div style="display:none;">...</div>
When fadeIn is called jQuery automatically removes it for you.
If you can't modify the returned html just do it this way then,
$(newHtml).hide().appendTo('#content');
That will hide it before being added to the DOM.
How about something like
$('#content .event').fadeOut('slow', function()
{
$(this).html(newHtml).fadeIn('slow');
});
Why you don't simply replace the content of .event instead of removing it and creating a new one?
$.get( '/ajax', function( newHtml )
{
$( '#content .event' ).fadeOut( 'slow', function ()
{
$( this ).html( newHtml ).fadeIn( 'slow' );
});
});
Edit
If you really need to remove the entire node, you can do this instead
$( this ).remove();
$( '<div class="new-event">' ).appendTo( $('#content') ).html( newHtml ).fadeIn( 'slow' );
You could just have it as a javascript string, and add it when you need.
var $newEvent = $(newHtml);
// and later on
$( '#content .event' ).fadeOut('slow', function ()
{
$(this).append($newEvent).fadeIn( 'slow' );
});
I am wondering how to grab the selected item's text value on jquery autocomplete.
I have initialised jquery as following :
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
}
});
});
And I have created a function function AutoCompleteSelectHandler(event, ui) { }.
Inside this function I want to some extra handling to feed data into correct textboxes but I can't figure out how to grab the text value of the selected item.
I did google a bit and tried examples but I can't seem to get it working.
Any help will be much appreciated.
Thanks a lot advance.
The ui parameter has an item property with the selected text
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
alert(selectedObj.value);
}
source: http://jqueryui.com/demos/autocomplete/#event-select go to tab "Events" and then event "Select"
// list of clients
$( "#client" ).autocomplete({
source: "lib/getClientList.php",
minLength: 2,
select: function(event, ui) {
alert(ui.item.value);
}
})
;
The ui.item.value is the reference that jquery utilizes to assign a value to the input
You don't need to apply an anonymous function as a wrap, you can directly pass the function ref.
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: AutoCompleteSelectHandler
});
});
Within that method, you can either access this or event.target to get the current value, both values are referencing the input element:
function AutoCompleteSelectHandler(event, ui) {
alert( $(event.target).val() );
alert( $(this).val() );
// alert( this.value );
}
You just grab the value from the input in the same way you would if the user had typed it in themself:
$('input#autocomplete').val()