We Keep Coding

In jquery how can i use .change to enable a button immediately?

I've a simple form with a text input and a button disabled, this button can be enabled if i write on input text, keyup() is the best way but when i use right click and paste this event isn't called and doesn't trigger that event. So i tried event change(), it's work but not immediately, i must unfocus the input text for have the button enabled. How can i enable this button immediately with copy and paste?
$(document).ready(function () {
$('#id_input').bind('keyup paste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
}
else
$('#btnSubmit').attr('disabled', 'disabled');
});
});

Rory is right that your code should work in general especially if you paste using Ctrl + V.
I assume that you experience the issue only if you paste using right-click and then select Paste from the context menu.
Try to monitor the property changes:
$(document).ready(function() {
$('#id_input').bind('input propertychange', function() {
if ($('#id_input').val().length === 6) {
$('#btnSubmit').removeAttr('disabled');
} else
$('#btnSubmit').attr('disabled', 'disabled');
});
});

You need to use the onpaste event.
$(document).ready(function () {
$('#id_input').bind('keyup onpaste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
} else {
$('#btnSubmit').attr('disabled', 'disabled');
}
});
});

Typescript and JQuery together

I have a little problem with typescript and jquery. And yes, I'm using Angular2.
My code looks like this:
Here I'm including JQuery so I can use it in ts
let $ = require('/node_modules/jquery/dist/jquery.js');
On another part I'm defining a function like this
public goBack() {
console.log("HUHU");
this.router.navigateByUrl('/dash/' + this.projectId);
}
So far so good... now it's the part using JQuery which doesn't work:
$(document).ready(function() {
$('.modal').modal('show');
});
$(document).keyup(function (e) {
if (e.which == 27 && $('body').hasClass('modal-open')) {
this.goBack();
}
});
$(document).click(function (e) {
if (e.target === $('.modal')[0] && $('body').hasClass('modal-open')) {
this.goBack();
}
});
What I'm doing here? I'm actualyl opening a bootstrap modal (popup) in the first part using $('.modal').modal('show'); and that's even working.
But the two other parts, keyup and click even handling are working too BUT I can't use this.goBack(). In this two parts I want to catch the events for:
Clicking ESC and closing the modal
Clicking out of the modal (grey zoned) to close it
As I said, the modal is closing but URL is not changing, changing by calling this.goBack()
And ideas out there?
Thanks in advance!
Yadbo

Change
$(document).keyup(function (e) {
and
$(document).click(function (e) {
to
$(document).keyup((e)=> {
and
$(document).click((e)=> {
if you use function your this will not refer to your component but to the instance of the click and keyup events.
The arrow notation is the short version of creating a js closure:
var self = this;
$(document).keyup(function (e) {
if (e.which == 27 && $('body').hasClass('modal-open')) {
self.goBack();
}
});
Suggested reading: How to access the correct `this` inside a callback?

How to trigger Click on enter button?

I am working on a search component in which auto suggestion comes when you type just like google. when i am clicking on autosuggestion it search fine. but when i use enter button instead of click it doesn't work. here is my code for click
function initSearchAutoClickable(resize, emchange){
$("body").on("click", ".ui-menu-item > a", function (event) {
$('.search .search-go').trigger('click');
});
}
Does anyone have idea how to make the same for enter button. .search-go is button on which search fires

Use keyup event and check the pressed button by keyCode or which
$("body").on("keyup", ".ui-menu-item > a", function (event) {
if(event.which == 13 || event.keyCode == 13){
$('.search .search-go').trigger('click');
}
});

Write code with :
$(document).keypress(function (event) {
if (event.which == 13) //Event for "Enter" key
{
//Write your code here.
}
});

If I understood you, you want to run the same code but when you press Enter, right?
So you need to do:
// Attach event Keypress to your search text box
$(someElementWhereYouPressEnter).on('keypress', onKeyPress);
// Handle keypress - check if is enter
function onKeyPress(e) {
if ( e.which == 13 ) {
// handle Enter press
$('.search .search-go').trigger('click');
}
}
Hope this will help you.

Here u have example. This must work.
http://jsfiddle.net/TDf9p/
Look on this:
$(Input).autocomplete({
source: function (request, response) {
do something
},
select: function (event, ui) {
do something
}
, change: function (event, ui) {
do something
}
, focus: function (event, ui) {
do something
}
Try use some event and do what u need in event. Debug your code and look when u want do something.
If this not help look here:
http://api.jqueryui.com/autocomplete/#event-search

How can i refer to a Modal Window in Dom?

I've gotten hundreds of aids from this site. thanks. This is my first question.
Which object is a modal window (alert popup) into the Dom. How can i refer it? How can i know if open or closed? Something like this: if (alertPopup is open) {..code...}
My code is this (i use jQuery):
<script type="text/javascript">
$(document).ready(function(){
var myButton = $('#mybutton')
myButton.click(function(){
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
});
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
</script>
<body>
<input id="myinput" />
<button id="mybutton">Show alert</button>
</body>
The purpose of the code is trigger up the event 'click' on the button whith key 'enter'. It works, but when i close the popup, again with key 'enter', the popup comes again an again. I need to disable event 'click' of my button or unbind the trigger action when the popup is displayed.
I would't like to make my own modal windows.
thanks in advance.

You can move the handler to its own function and programmatically bind/unbind it to the event:
$(document).ready(function(){
var myButton = $('#mybutton')
console.log('whee');
myButton.click(clickHandler);
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
function clickHandler(){
$('#mybutton').unbind('click', clickHandler)
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
}
However, it looks more like you're trying to deal with enter buttons in a form submission style. I'd recommend wrapping this whole thing in a form and dealing with it as such.
See http://jsfiddle.net/ruBY4/ for a cleaner form-based solution.

Using jquery to determine if any elements within a div was clicked

How can I tell using jQuery if an any element within a div (panel1) was clicked? I have this piece of code that I use to show/hide a popup:
$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else {
$('#panel1').hide();
}
});
The problem is that the popup (panel1) gets dismissed if I click on any control/element within panel1. I'd like to keep panel1 open unless an area outside panel1 is clicked (or if link1 is clicked again). How can I revise this code to achieve this? Thanks...

Try this
$('#panel1').click(function (e) {
e.stopPropagation();
//Other code if you want to execute anything on panel click.
});
$('body').click(function (e) {
if($("#panel1").is(":visible"))
$('#panel1').hide();
});

Make a following html markup:
<body>
<div id="div1">
... all the body content here
</div>
<div id="panel1">
</div>
I suppose the popup #panel1 is positioned out of normal flow anyway, so it is no problem.
Then in jquery use div1 instead of body and that's it :-)

$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else if($(e.target).attr('id') != 'panel1') {
$('#panel1').hide();
}
});