Develop Reference

Capture search button event on an input with clear button

I have the following in my app html:
<form>
<input id="txt-search" type="search">
<button id="btn-clear"><i icon="ion-android-cancel"></i></button>
</form>
My JavaScript:
$( document ).on( "click", "#btn-clear", function( evt ) {
evt.preventDefault();
$( "#txt-search" ).val("");
$( "#txt-search" ).focus();
$( "#btn-clear" ).hide();
} );
The problem I am having is when the user clicks the "Search" button on the virtual keyboard in iOS the clear button is getting clicked. I don't understand why this is happening. The txt-search is in focus so it shouldn't be sending the event to the clear button. Any ideas on how I can get around this?

Use a jQuery submit event, not a click, like this:
$( "#txt-search" ).on( "submit", function( evt ) {
evt.preventDefault();
$( "#txt-search" ).val("");
$( "#txt-search" ).focus();
$( "#btn-clear" ).hide();
} );

jQuery UI Combobox: How can I add a class to autocomplete div

I use the jQuery combobox plugin:
https://jqueryui.com/autocomplete/#combobox
My JS:
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
My goal is to add a custom class to the autocomplete div in order to individually style the autocomplete dropdown. I already tried the following, but this is not working:
$( "#combobox" ).combobox().autocomplete("widget").addClass('my-custom-autocomplete-class');

Try This, As per selected value class add to combobox write css for each option mention in drop down
$(function($) {
$( 'select[id=combobox]' ).on("change",function() {
var dynaminClass = $(this).val();
console.log(dynaminClass);
$(this).attr('class', dynaminClass);
})
})

Validation Form Replicating

I have a form that when is submitted it checks if the user selected the field, and if didn't it gives a message to fill, but if i keep clicking the message keeps duplicating, triplicating and goes on... How can i make the message appear only one time? Here is the code
$( "#myform" ).submit(function( event ) {
var met = $("#mySelect").val();
if (met === "0"){
$( ".msn" ).append( "Select a Field" );
return false
}else{
$( "#myform" ).submit();
}
});

Since the problem is on the appended label try this:
$( "#myform" ).submit(function( event ) {
var met = $("#mySelect").val();
if (met === "0"){
// Clear .msn
$(".msn").empty();
// Append label
$( ".msn" ).append( "Select a field" );
return false
}else{
$( "#myform" ).submit();
}
});
Check this updated fiddle.

Use .one function
$( "#myform" ).one('submit', function( event ) {
var met = $("#mySelect").val();
if (met === "0"){
$( ".msn" ).append( "Select a Field" );
return false
}else{
$( "#myform" ).submit();
}
});

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!

Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.

Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

set function on and off on one button click

I have a button #sort where I set the sortable() jQuery UI function. It works, but I want it to have one more functionality: when I click second time on the same button I would like to disable this function. What should I do?
$('#sort').click(function(){
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Thank you in advance.

You can do:
$('#sort').click(function(){
if ($("#sortable").hasClass("ui-sortable")) {
$("#sortable").sortable("disable");
$("#sortable").removeClass("ui-sortable");
} else {
$("#sortable").sortable("enable");
$("#sortable").removeClass("ui-sortable-disabled");
}
});

To disable sorting:
$("#sort").sortable('disable');
To enable sorting:
$("#sort").sortable('enable');
// use case
$('#sort').click(function(){
var isEnabled = $( "#sort" ).sortable( "option", "disabled" );
if(isEnabled) {
$( "#sort" ).sortable( "disable" ); // disable sorting
});

$('#sort').click(function(){
if (!($(this).hasClass('sortable'))){
$("#sortable" ).sortable();
$(this).addClass('sortable');
}else{
$("#sortable" ).sortable("disable" );
$(this).removeClass('sortable');
}
});