We Keep Coding

Disable the function of a submit button in a html form with jquery, but still have it visible

As you can see in the code below, I am making an automated chat.
The user inputs text and the code responds with a message.
It's working alright so far but right now I want to prevent the user sending another message before my message appears.
So lets say the user sends a message, after that the submit button becomes disabled, preventing the user from sending more messages. When the code responds, the button comes availible again.
I don't want to hide the button, but I want to disable it's function.
That way it'd still be visible, just not functional while the function runAI is running.
If someone can help, that'd be great.
Code:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#typing").hide();
var n = "You:<br>";
var o = $('#outputWindow');
var i = $('#inputWindow');
var s = $('#sendButton');
var t = $('#typing');
var r = -1;
//arrays
var msg = ['msg1', 'msg2', 'msg3'];
//fire send events
$(s).click(function() {
runAI();
});
$(i).keydown(function(e) {
if (e.keyCode == 13) {
runAI();
}
});
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
if (r+1 >= msg.length)
{
setTimeout(function(){$('#inputWindow').hide(); }, 8000);
setTimeout(function(){$('#sendButton').hide(); }, 8000);
return true; // end the function here;
}
else
{
i.val('');
i.focus();
}
}
}
});
});//]]>
</script>

As per the latest jQuery Docs which was last updated January 26, 2015.
// Disable
$( "#sendButton" ).prop( "disabled", true );
// Enable
$( "#sendButton" ).prop( "disabled", false );

To disable the button :
$("#buttonId").prop("disabled",true);
And to enable the button :
$("#buttonId").prop("disabled",false);
I would integrate in your code like this ;
$(s).click(function() {
$("#buttonId").prop("disabled",true);
runAI();
});
$(i).keydown(function(e) {
if (e.keyCode == 13) {
$("#buttonId").prop("disabled",true);
runAI();
}
});
And then when runAI() is done :
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
if (r+1 >= msg.length)
{
setTimeout(function(){$('#inputWindow').hide(); }, 8000);
setTimeout(function(){$('#sendButton').hide(); }, 8000);
return true; // end the function here;
}
else
{
i.val('');
i.focus();
}
$("#buttonId").prop("disabled",false);
}
}

document.getElementById("Submit").disabled = true;

Use:
$("#buttonId").prop("disabled",true);

To disable the button
$('input[type="submit"], input[type="button"], button').disable(true);
To enable the button again
$('input[type="submit"], input[type="button"], button').disable(false);
Of course the selector should be matching your submit button. my example would disable all buttons on your page

A .Click function not working in jQuery

What I need:
I need the button2 to appear when button1 is clicked. NEW STUFF: What I need it to do is save button2 there so if you refresh or "run" button 2 is already there how would I do that?
What I've done/Tried:
I've tried a bunch of different things such as changing it around changing the scope, as well as checking for console errors, I get none so I'm not too sure what is going on.
CODE
$(document).ready(function () {
$('#button2').hide();
window.highestLevel = 1;
$('#button1').click(function () {
Check();
highestLevel = 2;
});
if (highestLevel == 2) {
$('#button2').show();
}
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}
});
WHAT WORKS
The only thing that works is it stores it correctly to the html local storage when I click $('#button1').
Link , jsFiddle

For this to work as you describe, the if-structure ...
if (highestLevel == 2) {
$('#button2').show();
}
... must be inside the click function. Try ...
$('#button1').click(function () {
Check();
highestLevel = 2;
$('#button2').show();
});
You really don't need the if-structure doing it this way ... in your code, the if-structure only runs on document-ready (ONE TIME).

You are mistaken about what is happening. This code block runs when the document is loaded, not after button1 is clicked.
You want to put it inside the click function
$('#button1').click(function () {
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
You will also want to prevent the default action of the button, which is to post the page causing it to reload, by adding an event object
$('#button1').click(function (e) {
e.preventDefault();
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
});

You don't need all of that... The problem is that
if (highestLevel == 2) {
$('#button2').show();
}
executes only once, when the document is ready.
Try this:
$(document).ready(function () {
$('#button2').hide();
$('#button1').click(function () {
$('#button2').show();
});
});

Try with this
window.highestLevel = localStorage.getItem('highestLevel');
$(document).ready(function () {
if (highestLevel == 2) {
$('#button2').show();
$('#button1').hide();
}
else {
highestLevel == 1
$('#button1').show();
$('#button2').hide();
}
$('div').click(function () {
if (highestLevel == 2) {
highestLevel = 1;
$('#button1').show();
$('#button2').hide();
}
else{
highestLevel = 2;
$('#button2').show();
$('#button1').hide();
}
Check();
});
});
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}

How to call outside function inside animate complete function in Jquery

I have the following code in one of my websites. I have a declared function named "pressedTab(tab)".
When i try to call it inside the following animate complete function, $('#firstShow').animate({'margin-left':'-='+go+'px'}, 1000, 'linear',function() {...pressedTab(tab);} it's not working.
I know its a scope thing but can someone help me fix the code? The strange part is that this code for years it worked. The last year it's not working properly.
<script type="text/javascript">
$(document).ready(function () {
$('.tab1').click(function () {
name('tab1');
});
$('.tab2').click(function () {
name('tab2');
});
$('.tab3').click(function () {
name('tab3');
});
function name(tab) {
function pressedTab(tab) { //FUNCTION THAT I NEED HELP WITH
if (tab == 'tab1') {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('.tab1 p').removeClass('current').addClass('current');
$('.tab2 p').removeClass('current');
$('.tab3 p').removeClass('current');
$('#tug').hide('fast');
$('#tugImages').hide('fast');
$('#vessels').show();
$('#vessels2').hide(0);
} else if (tab == 'tab2') {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('.tab1 p').removeClass('current');
$('.tab2 p').removeClass('current').addClass('current');
$('.tab3 p').removeClass('current');
$('#tug').hide('fast');
$('#tugImages').hide('fast');
$('#vessels').hide(0);
$('#vessels2').show();
} else {
$('#img-2 #folder-tab-3').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexUp');
$('#folder-tab-1').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('#folder-tab-2').removeClass('zindexUp').removeClass('zindexDown').addClass('zindexDown');
$('.tab1 p').removeClass('current');
$('.tab2 p').removeClass('current');
$('.tab3 p').removeClass('current').addClass('current');
$('#tug').show();
$('#tugImages').show();
$('#vessels').hide(0);
$('#vessels2').hide(0);
}
}
if ($('#firstShow').attr('time') == "0") {
var go = "250";
$('#firstShow').animate({
'margin-left': '-=' + go + 'px'
}, 1000, 'linear', function () {
$(this).attr('time', "1");
$('.tab1').attr('time', "1");
$('.tab2').attr('time', "1");
$('.tab3').attr('time', "1");
//Show the right folder
$('#folder-tab-1').show("fast");
$('#folder-tab-2').show("fast");
$('#img-2 > #folder-tab-3').show("fast");
//Hide the Upper of the folder
$('#img-1').hide("fast");
$('#firstShow #folder-tab-3').hide("fast");
//alert(tab);
pressedTab(tab); //FUNCTION WHERE I WOULD LIKE TO BE CALLED BUT IT'S NOT
});
} else {
pressedTab(tab);
}
}
});
</script>

Callback function in animate(...) will be call after name(tab) in context which do not have access to scope of name(tab) function, but it have access to global scope. Try to put pressedTab(tab) outside $(document).ready(...) it should work.

alert when value changed setinterval

When there is an update from getjson, the textbox text changed!
No allert is comminh up.. some one can help me with this allert??
The textbox:
<input id="your_textbox" />
setInterval(function () {
$.getJSOg('/api/my_apiurl', function (Payload) {
$(Payload).each(function (i, item) {
$("#your_textbox").val(item.CR_DateTime);
});
});
}, 3000);
and the script to allert "haai:
setInterval(function () {
jQuery('#your_textbox').on('input', function () {
alert('haai');
});
}, 3000);
Change to (not working):
setInterval(function () {
var check;
$(function(checkForMessages) {
$.getJSON('/api/myapiurl', function (data) {
if(data == 1) {
//There are new messages
clearInterval(check);
alert("You have mail!");
}
}
);
check = setInterval(checkForMessages, 3000);
});
}, 3000);

You keep adding an even to the textbox over and over and over again! That is really bad.
It should just be
jQuery('#your_textbox').on('input', function () {
alert('haai');
});
Now JavaScript does not trigger the event when you change the textbox with code, so you need to do the triggering.
var previousValue = $("#your_textbox").val(),
newValue = item.CR_DateTime;
if (previousValue !== newValue ) {
$("#your_textbox").val(newValue).trigger("input");
}

Detect Mousemovent inside of blur function Jquery

I am trying to create a neat way to stop an AJAX called based upon if the browser is in focus, and if the mouse moves.. So here's what I want it to do:
If the user goes to a different tab in their browser, minimized the window, or goes somewhere else other than the web app, I want it to kill the AJAX calls in 1 minute. If the user moves the mouse anywhere in the web app, it should consider the user "focused" on the app, and thus continue the ajax calls. I put a timeout called "st" in there to take care of the "timeout" portion, but adding in a mouse detector is a little more advanced. Here's what I have:
var window_focus = true;
$(document).ready(function () {
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});
waitForMsg();
});
I was going to try adding in something like this:
$(function () {
$().mousemove(function () {
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
});
});
But it didn't work. Thanks for your help.

http://jsfiddle.net/popnoodles/5mqMm/
You probably want this using .one(). This will see the mouse move, run your procedure and not run it again, until the window is reloaded or it's on another page.
Putting it inside of blur means blurring sets it up again.
}).blur(function () {
$(document).one('mousemove', function(){
// i react ONCE to the mouse being moved
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
// focus the window again as desired
$(window).trigger('focus');
});
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});

Try this jsfiddle
var window_focus = true, lastMouseMoveTime;
$(document).ready(function () {
lastMouseMoveTime = new Date().getTime();
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
window_focus = false;
console.log('Init Suspension...');
// Set Timeout
});
waitForMsg();
$(document).mousemove(function(){
lastMouseMoveTime = new Date().getTime();
if(!window_focus ){
waitForMsg(); // restarting ajax if it stopped because of mousemove.
}
});
});
in your ajax call method
if( !window_focus){
if( new Date().getTime() - lastMouseMoveTime > 60*1000 ){
return;
}
}