We Keep Coding

Disable button not woking

I have a function that displays a textbox, but my button is not disable when im not typing in textbox.
$(document).ready(function () {
loadData();
function loadData(is_category) {
$(document).on('click', '.viewdetails', function () {
var html = '';
html += '<input type=text id="ConvoDetails">'<input type="submit" class="sendButton">';
},
$('.sendButton').prop('disabled', true);
$('#ConvoDetails').keyup(function () {
$('.sendButton').prop('disabled', this.value == "" ? true : false);
});
});

Short fix:
$('.sendButton').prop('disabled', 'disabled');
However, you might want to change your code to bind to change event instead of keyup. keyup is fired way too often for your needs and it might cause lags.

In your input html you can catch the key up element like this <input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this) and then a function that handles the event like this onInputKeyUp(element) {}.
Also, you don't need this line of code $('.sendButton').prop('disabled', true); if you set your input button by default as disable like this <input type="submit" class="sendButton" disable>
The full code example:
$(document).ready(function () {
loadData();
function loadData(is_category) {
$(document).on('click', '.viewdetails', function () {
var html = '';
html += '<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"><input type="submit" class="sendButton" disable>';
});
});
onInputKeyUp(element) {
element.disabled = element.value == "";
}

Blur event cancels Click events with jQuery on Mobile device

I have a blur event in a textarea:
$("#question-id-5-answer").blur(function (event) {}
And a click event in the Submit button:
$("#" + _sendBtnId).on("click", function () {}
It happens that the Click event does not fire because the Blur event cancel the click event.
I can't use the Mousedown event because it's a touch device that does not detect it.

I tried saving the following on my mobile device as a htm file and accessed using Forefox application. Appears to be working as expected. Please have a look if it helps you.
<form id="myForm">
<textarea id="myTxt"></textarea>
<input type="button" id="butSubmit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#myTxt").blur(function() {
if($(this).val() != "") {
alert("retunging false");
return false;
}
alert("rextarea is empty");
});
$("#butSubmit").click(function() {
alert("submitted");
});
});
</script>

how to get id of any control using javascript?

I have an html page with various textbox and button
then I added this javascript
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(this.id);
}, false);
};
my goal is to return the ID of the control clicked by the user (as an alert)?
eventually I will add more to this. but as an alert is ok for now. Thank you

Use the target of the event. Here's a runnable sample:
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(evt.target.id);
}, false);
};
<input id="button" type="button" value="button" />
<input id="text" type="text" />

You have added eventListener to the window object.So "this"keyword refers windows object and not your buttons.check for ev.srcElement
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(evt.srcElement.id);
}, false);
};

How to clear the textbox value after 5 sec using JQuery?

I have tried this :
<script type="text/javascript">
$(function() {
$("#button").click( function()
{
alert('button clicked'); // this is calling
setTimeout(function(){
alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
}, 9000);
}
);
});
</script>
my HTML code:
<form>
<input type="text" id="clearTxt"/>
<input type="submit" value="Search" id="button" />
</form>
But this code is not working.Please help me to solve this issue.

When I pasted your code into a fiddle, the alert did fire. However the timeout function won't execute because due to the form tags surrounding the inputs, when you click the submit button you navigate away from the page and the timeout doesn't have time to execute. You should either change the submit to a button, or call preventDefault() in the function to stop the form from submitting.
This code works:
HTML:
<form>
<input type="text" id="clearTxt" />
<input type="button" value="Search" id="button" />​
</form>
Script:
$(function() {
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "";
}, 5000);
});
});
See http://jsfiddle.net/acfkU/1/

Your code is fine, but you are submitting the form, you can use preventDefault method of the event object and make sure jQuery is loaded in your page.
$("#button").click(function(event) {
event.preventDefault();
//alert('button clicked'); // this is calling
setTimeout(function() {
// alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
// $('form').submit();
}, 9000);
});

Instead of adding it to click event you can try adding it on form submit.
function onSubmit() {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
$('#clearTxt').attr('value',"hi");
}, 5000);
return false;
}
Since your are updating the value attribute directly it will take immediate effect in the UI.
If don't want to add to the onsubmit, better change the type of the button from submit.

override the default submit action (that has a preventDefault method) like below:
$("#yourform").submit(function(event) {
event.preventDefault();
});
Here it is:
HTML
<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />
JS
$(function(){
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "hi";
}, 5000);
});
});
Demo JSFiddle

Hiding search field code only executes one time

I'm writing a piece of jQuery to make a search box appear when a user hovers over the search button, displays for five seconds, then disappears if the user hasn't given the search text field focus.
It currently just appears, disappears, then reappears for good. My code is below, you can see it in action at http://emilysenger.ca
jQuery(document).ready(function(){
jQuery('input').blur(function(){
jQuery('input').removeClass("focus");
})
.focus(function() {
jQuery(this).addClass("focus")
});
jQuery("div#sneakySearch form input#search").css("display", "none");
jQuery("div#sneakySearch form input#searchButton").hover(function(){
jQuery("div#sneakySearch form input#search").fadeIn("slow");
}, function(e){
jQuery(e).delay(5000,
function(e){
if(!jQuery("div#sneakySearch form input#search").hasClass("focus"))
{
jQuery("div#sneakySearch form input#search").fadeOut("slow");
}
});
});
});
Some help with this would be awesome. Thanks!

I made it so it fades out on the textbox's blur event too, and that it never fades out if the textbox has text in it. You can see it working here.
The HTML:
<div id="sneakySearch">
<form method="get" action="/">
<input type="text" name="s" id="search">
<input type="submit" value="Search" id="searchButton">
</form>
</div>
And the JS:
function fadeOutSearch() {
var element = jQuery("div#sneakySearch form input#search");
if (!element.hasClass("focus") && element.val() == "") {
element.fadeOut("slow");
}
}
jQuery(document).ready(function() {
jQuery('input').blur(function() {
jQuery('input').removeClass("focus");
setTimeout(fadeOutSearch, 1000);
}).focus(function() {
jQuery(this).addClass("focus")
});
jQuery("div#sneakySearch form input#search").hide();
jQuery("div#sneakySearch form input#searchButton").hover(function() {
jQuery("div#sneakySearch form input#search").fadeIn("slow");
}, function(e) {
setTimeout(fadeOutSearch, 1000);
});
});