Capture search button event on an input with clear button - javascript

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();
} );

Related

Wizard radio button checked not work and post?

I am not getting data from class which is selected - radio button not post.
Live example: https://www.kodjs.com/uyeol.php
All-Code jQuery: https://jsfiddle.net/8Lbsdduv/1/
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
/*My code*/
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val());
});
Try replacing
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
with this
$(wizard).find('[type="radio"]').prop('checked', false);
$(this).find('[type="radio"]').prop('checked',true);

jQuery change and click events

Binding events to an element should be something like:
$( document ).on( 'change', '#mySelect', showEvent );
$( document ).on( 'click', '#mySelect', showEvent );
function showEvent() {
console.log( event.target );
}
But by doing a simple test as shown below, binding the change and click events to the object mySelect they are triggered on different elements (change only by changing the select and the click by clicking anywhere on the document).
var mySelect = $( '#mySelect' );
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent( event ) {
console.log( event.target );
}
Two questions:
How does the change event work? By the documentation it shouldn't work because the selector must be a string:
A selector string to filter the descendants of the selected elements that trigger the event.
It souldn't work but, if the change works, why doesn't the click?
selector
Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Taken from http://api.jquery.com/on/
You are using the selector as a jQuery object, this method is mainly using for event delegation for binding event to dynamically generated element. So you can bind event directly to the jQuery object as
var mySelect = $( '#mySelect' );
mySelect.on( 'change', mySelect, showEvent )
.on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}
If it's dynamically generated then remove the $ wrapping just provide it as string
var mySelect = '#mySelect';
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}

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");
});

jQuery click event not firing after a different click event has been used

I am completely lost here, I have no idea as to why this is happening.
I have the following code in a .js file:
$( document ).ready(function() {
showMessage();
$( '#message' ).slideDown( 'fast' );
//Hide Message//
$( '#m_close' ).click(function( event ) {
$( '#message' ).slideUp( 'fast' );
});
//---//
$( '#m_button' ).click(function( event ) {
showMessage();
$( '#message' ).slideDown( 'fast' );
});
});
Now, the message div is created and slides down perfectly fine when the page first loads. When I press #m_close, the div slides up perfectly. However, if I press #m_button, the message slides down with all the right info, but pressing #m_close does absolutely nothing. I get no errors in the dev console, nothing seems to go wrong, it just refuses to work. I added a slideDown to the #m_close so that it would close then reopen, and it does that, and the #m_close will work infinitely, until #m_button is pressed.
What is going on?
EDIT: my HTML per request:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="includes/style.1.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js"></script>
</head>
<body>
<div id="message">
</div>
<button id="m_button">Message</button>
<script src="includes/functions.js"></script>
</body>
Looks like the message is loaded dynamically and the m_close might be added to the message element using showMessage() method.
so try
$( document ).ready(function() {
showMessage();
$( '#message' ).slideDown( 'fast' );
//Hide Message//
$( '#message' ).on('click', '#m_close', function( event ) {
$( '#message' ).slideUp( 'fast' );
});
//---//
$( '#m_button' ).click(function( event ) {
showMessage();
$( '#message' ).slideDown( 'fast' );
});
});
when you use click to register a click event handler, it register the handler to only those elements that exists in the dom at that moment. when you call showMessage again teh existing m_close is removed and a new one is created so the click handler is no more attached to the new element. The solution here is to use event delegation as shown above

closing jquery dialog from an iFrame

I have created a jquery dialog with an Iframe in it that's a form and I would like the dialog to close when the user hits cancel's or submits the form in the dialog...
$( "#dialog" ).dialog( "option", "title",["Create"] );
$( "#dialog" ).dialog( "open" );
$("#dialog-content").html("<iframe id='iframe_manage' width='825px' height='800px' class='popup_iframe' src='manage.php?PME_sys_operation=Add&pv=popup'></iframe>");
thoughts?
i tried something like this..
$("#iframe_manage").load(function () {
$('input[name=PME_sys_canceladd]').click(function() {
alert('Handler for .submit() called.');
//$('input[name=PME_sys_canceladd]').submit();
});
});
but doesn't seem to pick up the click event on the button..
I think you should be doing this
$("iframe").contents().find()
instead of just using $().
So maybe this would work:
$("#iframe_manage").load(function () {
$("#iframe_manage").contents().find('input[name=PME_sys_canceladd]').click(function() {
alert('Handler for .submit() called.');
//$('input[name=PME_sys_canceladd]').submit();
});
});

Categories

Resources