I'm using the most recent JQuery UI Tabs (1.10.2). http://jqueryui.com/tabs/
I need to be able to link to individual tabs from external pages. Maybe the more correct way to say it would be to say that I need to be able to change the initially active tab via a bookmarble link.
I know how to set the active index so that #tabs-3 is the active tab
$( "#tabs" ).tabs({ active: 5 });
But I need to know how to change the value for .tabs({ active }) with the url hash so that a link of "tabs-page.html#tabs-3" will load the third tab of "tabs-page.html" by changing .tabs({ active }) to "2" (since it is a zero-based integer).
I'm really more of an html/css designer and a novice to JQuery/JQuery UI, please and thank you for your help. I've searched and found fixes for earlier versions and alternate libraries like JQuery Tools, but nothing for JQuery 1.10.2. I've found ways to link to the section and then reset the window location, but that results in a lot of "jumpiness" as the browser switches between window locations. If there is another page with this fix please link in the comments. THANKS SO MUCH!!!
You will need to read the value of the hash within your jQuery. Some good information can be found here Getting URL hash location, and using it in jQuery
var url = "http://site.com/file.htm#3";
var hashValue = url.substring(url.indexOf('#')).replace('#',''); // '3'
Once you have this, you will be able to set the active tab on the jqueryUI Tabs
$('#tabs').tabs( "option", "active", hashValue );
You would need to do all of this when the page initially loads, so within a $(function(){ ... });
Update
Here is the full code;
<script>
$(function () {
// run the jquery ui plugin
$('#tabs').tabs();
// grab the url
var url = document.URL;
// grab the value of the hash
var hashValue = url.substring(url.indexOf('#')).replace('#', '');
// check to make sure it is a number
if (!isNaN(hashValue)) {
// set the active tab
$('#tabs').tabs("option", "active", hashValue);
}
});
</script>
We have a rails 3.2.8 app with jquery autocomplete. The app should fire an event after user selects a customer name from the list (#invoice_customer_name_autocomplete). After selecting, an ajax change event is fired. That's all the app should do. However the following code does not do the job (error: "t.item.customer is undefined"）. A user can not even select. The text box won't take customer name and the screen gets stuck:
//for autocomplete
$(function() {
return $('#invoice_customer_name_autocomplete').autocomplete({
minLength: 1,
source: $('#invoice_customer_name_autocomplete').data('autocomplete-source'),
select: function(event, ui) {
$('#invoice_customer_name_autocomplete').val(ui.item.customer.name);
},
});
});
$(document).ready(function (){
$('#invoice_customer_name_autocomplete').change(function (){
//ajax call
$.get(window.location, $('form').serialize(), null, "script");
return false;
});
});
If manually changing the customer name, the .change event will fire. However it does not fire after selecting. What's wrong with the code above?
UPDATE:
If the select can trigger a change event on invoice_customer_name_autocomplete, then this is what we want. Tried the code below without success (no change event fired):
select: function(event, ui) {
$(this).trigger('change');
}
You may be using the jQuery Autocomplete plugin I can't be sure, but you're calling it the way you would call the jQuery UI autocomplete.
In case you are using the first
Suggestions:
Use autocomplete in jQuery UI instead of the autocomplete plugin. The latter is deprecated.
Using the correct framework here is a example of it working:
jsFiddle
It is no different from yours, so the thing is that you should log the ui object in order to understand why you are accessing a null object, the easiest way to do it is to log on console the whole object and watch it.
console.log(ui)
Edit:
Regarding the onChange you may check this post: trigger onchange event manually
Hope it helps!
How do I trigger/call jQuery UI Autocomplete event handlers from each other, for example, triggering a search from the select handler?
Thx, Lille
The answer above is only valid for jQueryUI 1.8.x
Since jQueryUI 1.9.x you must add a timeout:
scott.gonzalez says:
"There were some pretty big changes to autocomplete between 1.8 and
1.9, specifically selection is now synchronous where before it was asynchronous."
more:
scott.gonzalez says:
"What's happening is selecting an item always closes the menu. Closing
the menu tells the autocomplete to ignore any pending searches. This
includes the search that you're manually triggering immediately before
the menu closes. It's also worth noting that you're running a
duplicative search, since you're triggering the search before the
value updates."
select: function(event, ui)
{
var that = $(this);
setTimeout(function() {
that.autocomplete("search");
}, 1);
},
Example: http://jsfiddle.net/RB4N3/
To trigger a search:
$("#my-autocomplete").autocomplete("search", "SearchTerm");
In general, call jQueryUI widget methods using $("selector").widget("method" /*, options */)
I have a JQuery Mobile Multi-Page layout and I want to trigger a function when a select menu on my site is changed.
Currently when the menu is changed three events fire.
I have put together an example that should show you what i'm facing.
From the main menu click Web Settings
Change the Theme option on the page
Notice the three alerts
Here is my code to register the event
$(document).bind("pagecreate", function() {
$("#settings-theme").bind("change", function(event) {
alert(event.target);
});
});
Things I have tried:
Changing the data-native-menu="false" to true removed one of the event firings.
Removed all other pages except web settings and that also reduced the number of events firing to two.
In JSFiddle, Framework Options > Head (nowrap) changed to DomReady also removed a event fire.
Update
It appears that pagecreate is fired every time a page is 'first-viewed' as well as twice when the homepage is loaded.
So by the time the settings page is loaded the event has been binded three times.. still no solution.
$(document).bind("ready", function() {
$("#settings-theme").live("change", function() {
alert("changed");
});
});
or
$(document).bind("ready", function() {
$("#pg-settings").delegate("#settings-theme", "change", function() {
alert("changed");
});
});
How do you trigger jQuery UI's AutoComplete change event handler programmatically?
Hookup
$("#CompanyList").autocomplete({
source: context.companies,
change: handleCompanyChanged
});
Misc Attempts Thus Far
$("#CompanyList").change();
$("#CompanyList").trigger("change");
$("#CompanyList").triggerHandler("change");
Based on other answers it should work:
How to trigger jQuery change event in code
jQuery Autocomplete and on change Problem
JQuery Autocomplete help
The change event fires as expected when I manually interact with the AutoComplete input via browser; however I would like to programmatically trigger the change event in some cases.
What am I missing?
Here you go. It's a little messy but it works.
$(function () {
var companyList = $("#CompanyList").autocomplete({
change: function() {
alert('changed');
}
});
companyList.autocomplete('option','change').call(companyList);
});
this will work,too
$("#CompanyList").autocomplete({
source : yourSource,
change : yourChangeHandler
})
// deprecated
//$("#CompanyList").data("autocomplete")._trigger("change")
// use this now
$("#CompanyList").data("ui-autocomplete")._trigger("change")
It's better to use the select event instead. The change event is bound to keydown as Wil said. So if you want to listen to change on selection use select like that.
$("#yourcomponent").autocomplete({
select: function(event, ui) {
console.log(ui);
}
});
They are binding to keydown in the autocomplete source, so triggering the keydown will case it to update.
$("#CompanyList").trigger('keydown');
They aren't binding to the 'change' event because that only triggers at the DOM level when the form field loses focus. The autocomplete needs to respond faster than 'lost focus' so it has to bind to a key event.
Doing this:
companyList.autocomplete('option','change').call(companyList);
Will cause a bug if the user retypes the exact option that was there before.
Here is a relatively clean solution for others looking up this topic:
// run when eventlistener is triggered
$("#CompanyList").on( "autocompletechange", function(event,ui) {
// post value to console for validation
console.log($(this).val());
});
Per api.jqueryui.com/autocomplete/, this binds a function to the eventlistener. It is triggered both when the user selects a value from the autocomplete list and when they manually type in a value. The trigger fires when the field loses focus.
The simplest, most robust way is to use the internal ._trigger() to fire the autocomplete change event.
$("#CompanyList").autocomplete({
source : yourSource,
change : yourChangeHandler
})
$("#CompanyList").data("ui-autocomplete")._trigger("change");
Note, jQuery UI 1.9 changed from .data("autocomplete") to .data("ui-autocomplete"). You may also see some people using .data("uiAutocomplete") which indeed works in 1.9 and 1.10, but "ui-autocomplete" is the official preferred form. See http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys for jQuery UI namespaecing on data keys.
You have to manually bind the event, rather than supply it as a property of the initialization object, to make it available to trigger.
$("#CompanyList").autocomplete({
source: context.companies
}).bind( 'autocompletechange', handleCompanyChanged );
then
$("#CompanyList").trigger("autocompletechange");
It's a bit of a workaround, but I'm in favor of workarounds that improve the semantic uniformity of the library!
The programmatically trigger to call the autocomplete.change event is via a namespaced trigger on the source select element.
$("#CompanyList").trigger("blur.autocomplete");
Within version 1.8 of jquery UI..
.bind( "blur.autocomplete", function( event ) {
if ( self.options.disabled ) {
return;
}
clearTimeout( self.searching );
// clicks on the menu (or a button to trigger a search) will cause a blur event
self.closing = setTimeout(function() {
self.close( event );
self._change( event );
}, 150 );
});
I was trying to do the same, but without keeping a variable of autocomplete. I walk throught this calling change handler programatically on the select event, you only need to worry about the actual value of input.
$("#CompanyList").autocomplete({
source: context.companies,
change: handleCompanyChanged,
select: function(event,ui){
$("#CompanyList").trigger('blur');
$("#CompanyList").val(ui.item.value);
handleCompanyChanged();
}
});
Well it works for me just binding a keypress event to the search input, like this:
... Instantiate your autofill here...
$("#CompanyList").bind("keypress", function(){
if (nowDoing==1) {
nowDoing = 0;
$('#form_459174').clearForm();
}
});
$('#search').autocomplete( { source: items } );
$('#search:focus').autocomplete('search', $('#search').val() );
This seems to be the only one that worked for me.
This post is pretty old, but for thoses who got here in 2016. None of the example here worked for me. Using keyup instead of autocompletechange did the job. Using jquery-ui 10.4
$("#CompanyList").on("keyup", function (event, ui) {
console.log($(this).val());
});
Hope this help!
Another solution than the previous ones:
//With trigger
$("#CompanyList").trigger("keydown");
//With the autocomplete API
$("#CompanyList").autocomplete("search");
jQuery UI Autocomplete API
https://jsfiddle.net/mwneepop/