I have the following code:
$( "#software" ).on( "selectmenuchange" , function ( e, ui ) {
// do some stuff
});
When clicking on the already selected item, nothing happens because it doesn't change. How can I conver this case too?
$( ".selector" ).selectmenu({
open: function( event, ui ) {
//on open event
},
select: function( event, ui ) {
//on select event
}
});
Related
I have a data from my controller and when the page loads I want the autocomplete input to search for that data and select it.
I am able to search the data using:
$( "#autocomplete" ).autocomplete( "search", '<?=$ID?>' );
above code works and showing the correct value of autocomplete. Now I cant select the value so that the autocomplete input triggers change. I wanted the input to trigger change because I will auto populate some input.
The way I select the value pro grammatically is :
select: function( event, ui ) {}
Now i found this:
search: function( event, ui ) {},
Is is possible to combine the two?
How to select searched data from auto complete programmatically ?
Update:
This is how my autcomplete works:
$( ".updatedautocomplete" ).autocomplete({
source:function(request,response){
var $this = $(this);
$.post("url",{
term:request.term
}).done(function(data, status){
response($.map( data, function( item ) {
return {
data
}
return false; // Prevent the widget from inserting the value.
}));
});
},
select: function( event, ui ) {
$( this ).attr( 'data-value' , ui.item.id );
$( this ).attr( 'data-asd' , ui.item.sad );
$( this ).val( ui.item.label );
$( "#modal" ).val( ui.item.qwe.trim() );
$( "#modal" ).val( ui.item.asd.trim() );
$( "#modal" ).val( ui.item.zxc.trim() );
$( "#modal" ).val( ui.item.ert.trim() );
$( "#modal" ).val( ui.item.dfg.trim() );
return false;
}
});
The reason why I wanted select event is to populate some input as shown in the source
You simply do jQuery.val() on the input element, like so.
Edit
Since you seem to want to trigger the selection after an asynchronous data retrieval, you probably want the response event and perform the selection there.
response (event, ui)
Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled
$(".updatedautocomplete").autocomplete({
source: function(request, response) {
var $this = $(this);
//$.post("url", {
// term: request.term
//})
//.done(function (data, status) {
// response($.map(data, function (item) {
// return {
// data
// }
// return false; // Prevent the widget from inserting the value.
// }));
//
//});
// Simulates some data returned from server
response([
{ label: "Javascript", value: "js" },
{ label: "CSharp", value: "cs" },
{ label: "PHP", value: "php" }
]);
},
response: function(event, ui) {
// Make your preferred selection here
var item = ui.content[0].label;
$(this).val(item).trigger('change');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input class="updatedautocomplete" />
search and select are the events which get triggered when the search is taking place. You don't execute them.
Additionally, I believe the method search (not the event one) is meant rather for "suggesting" users that a value/tag exists in the list and that they need to select it themselves. So, yes, if you need a value programmatically selected (without user interaction) you might need to do it by .val() and optionally .trigger().
This is rather a simple question, but how do I disable the dropdown of the jQuery Autocomplete? When a user starts typing, I run my own function on the response callback. I don't need anything else to appear. This is what I have:
$( "#search" ).autocomplete({
source: "/app/friends",
minLength: 2,
response: function( event, ui ) {
$(".ui-menu-item").hide(); //i hoped this would work
display(ui.content);
}
});
According to the documentation for the plugin, there is an open event that fires when the menu opens. You can put some code in that event to hide the drop down:
$( "#search" ).autocomplete({
source: "/app/friends",
minLength: 2,
response: function( event, ui ) {
display(ui.content);
},
open: function( event, ui ) {
$(".ui-autocomplete").hide();
}
});
I've got a sub navigation that has 3 different styles and functions based on browser width. See it live here.
$(function() {
$(window).resize(function() {
if(Modernizr.mq('(min-width:641px) and (max-width: 1200px)')) {
$(".subnav-menu").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').show();
});
$(".subnav-close").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').hide();
});
$(".tablet-subnav li").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').hide();
});
}
else if(Modernizr.mq('(max-width: 640px)')) {
$(".subnav").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-mobile-open').toggle();
$('.subnav-mobile-close').toggle();
});
}
}).trigger('resize');
});
The menu that should be showing up on click is not showing up at all on Safari on my desktop or phone, tested on several other macs and got nothing. It's working fine in Chrome/Firefox other than sometimes it will fire the menu's slideToggle multiple times. What am I doing wrong?
Edit:: The menu appears to not expand in mobile safari or mobile chrome at all, whereas I thought this was purely a safari issue. The little arrow on mobile and the menu button tablet do change though, and if I tap under there were the menu should be, it reacts as if going to the link, but the menu is not visible... Really strange.
Try using .off( "click", "**" ) on the click event handlers that were added from one media query and replace them with the .on( "click" ) event handlers that you need for the current media query.
Also, you can create a nice fade effect without the common problem of multiple queued animations by adding .stop( true, true ) to the chain.
Without your html, I couldn't really test it, but here's about what it should look like:
$( window ).on( "resize", function ()
{
if( Modernizr.mq( "(min-width:641px) and (max-width: 1200px)" ))
{
$( ".subnav" ).off( "click", "**" );
$( ".subnav-menu" ).on( "click", function ()
{
$( ".primary-subnav" )
.stop( true, true)
.slideToggle();
$( ".subnav-close" )
.stop( true, true )
.show();
});
$( ".subnav-close, .tablet-subnav li" ).on(" click", function ()
{
$( ".primary-subnav" )
.stop( true, true )
.slideToggle();
$( ".subnav-close" )
.stop( true, true )
.hide();
});
}
else if ( Modernizr.mq( "(max-width: 640px)" ))
{
$( ".subnav-menu, .subnav-close, .tablet-subnav li" ).off( "click", "**" );
$( ".subnav" ).on( "click", function ()
{
$( ".primary-subnav" )
.stop( true, true )
.slideToggle();
$( ".subnav-mobile-open, .subnav-mobile-close" )
.stop(true, true)
.toggle();
});
}
})
.resize();
I have accordion is collapsible and sortable.
Look here full code in action http://jsfiddle.net/wvtPw/
And this the JS code I'm using
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size
See this image below is example of collapsed div, see how easy to use and you can see below it easily.
So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this
And when he drop the element just turn back to expanded like normal
I recommend doing the following:
$(function() {
var active = false,
sorting = false;
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true,
activate: function( event, ui){
//this fixes any problems with sorting if panel was open
//remove to see what I am talking about
if(sorting)
$(this).sortable("refresh");
}
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
start: function( event, ui ){
//change bool to true
sorting=true;
//find what tab is open, false if none
active = $(this).accordion( "option", "active" );
//possibly change animation here (to make the animation instant if you like)
$(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );
//close tab
$(this).accordion({ active:false });
},
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
//possibly change animation here; { } is default value
$(this).accordion( "option", "animate", { } );
//open previously active panel
$(this).accordion( "option", "active", active );
//change bool to false
sorting=false;
}
});
});
DEMO:
http://jsfiddle.net/m939m/2/
Please let me know if you have any questions! Cheers!
have a look at the documentation for sortable
look at the sortable event start( event, ui ). The logic would then check to see if the item is expanded. if so then close it. after sort expand it again
http://api.jqueryui.com/sortable/#event-start
Add the code below before the stop event on your sortable object.
over: function(event, ui) {
$('#accordion').accordion({active:false});
},
http://jsfiddle.net/wvtPw/8/
While this code works for the collapsing/expanding issue when sorting, the "activate"-function causes an issue regarding opening the first item in the accordion. Opening and closing the first item makes it impossible to reopen. Continuing with the next item, same thing happens. In the end the complete list of items will not be possible to expand.
Since this is more of a UX question, my suggestion is to offer a different UX. I would disable sorting by default and offer a button to toggle sorting on/off. When sorting is enabled, collapse all the fields and disable the accordion.
$( '.accordion-toggle' ).on('click', function() {
$( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
.accordion({
header: "> div > h3",
collapsible: true
});
$( "#accordion.sorting" )
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
EDIT: (2018-06-18)
I missed that this is jQuery UI. You probably want to use the enable/ disable features.
$( '.accordion-toggle' ).on( 'click', function() {
if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
$( '#accordion' ).removeClass( 'sorting' )
.accordion( "enable" )
.sortable( "disable" );
} else {
$( '#accordion' ).addClass( 'sorting' )
.sortable( "enable" )
.accordion( "disable" )
I am using jQuery Autocomplete to search a local database of cities. Here is the code:
$('#txt_search_city').autocomplete({
source: url,
delay: 0,
autoFocus: true,
select: function( event, ui ) {
$( "#id_city" ).val( ui.item.id );
$(this).closest('form').submit();
},
focus: function( event, ui ) { event.preventDefault(); }
});
I'd like the first returned value to be selected by default (like it works on facebook). So essentially, if they just hit enter they will trigger the selection of the first result.
I thought that's what autoFocus: true did, but it isn't working. Not showing errors, just not selecting the first result.
Thoughts?
Autofocus will highlight the first record..
Your code would then just need to include autoFocus: true, like below:
$('#txt_search_city').autocomplete({
source: url,
delay: 0,
autoFocus: true,
select: function( event, ui ) {
$( "#id_city" ).val( ui.item.id );
$(this).closest('form').submit();
},
focus: function( event, ui ) { event.preventDefault(); }
});
This seems to be outdated. I had the same problem.
Just use .autocomplete({autoFocus: true})
I'm using jquery-ui-1.10.0.min and it works now.
No plug is needed.