We Keep Coding

Disable back button of the navigator with JavaScript

I want to disable back button in the navigator with javascript, i used:
document.addEventListener("popstate", urlBackButton, false);
function urlBackButton() {
isBackButton = true;
var url = $("#cannotUseBack").val();
if (url == "/mypage") {
window.history.go(1);
return false;
} else {
return true;
}
}
It doesn't work.
Any help is appreciated. Thanks!

You can try the below code, it is working in chrome.
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};

Reload page after click OK on the Alert Page

I want to reload page after clicking OK button on the javascript Alert box.
Here is my code :
$(".erase").click(function () {
var answer = confirm("Delete This Data?");
if (answer === true) {
var erase = false;
if (!erase) {
erase = true;
$.post('delete.php', {id: $(this).attr('data-id')} );
erase = false;
}
window.location.reload();
} else {
return false;
}
});
if I put the window.location.reload(); there, the page reloading after click OK, but I can't delete the data I want.
If I remove it, I can delete the data but the page doesn't reload.
Please help me on this

You just need to provide the window.reload() as a callback to $.post.
$(".erase").click(function () {
var answer = confirm("Delete This Data?");
if (answer === true) {
var erase = false;
if (!erase) {
erase = true;
$.post('delete.php', {id: $(this).attr('data-id')}, function() { // here's the new bit
window.location.reload();
} );
erase = false;
}
} else {
return false;
}
});

Change your first line to (I write code from head):
$(".erase").click(async function () {
and line with $.post to this:
let postResult = await Promise.resolve($.post('delete.php', {id: $(this).attr('data-id')} ));

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

Disable JS Interaction Temporarily?

I want the following function to operate in a way that prevents users from spamming the mouseenter, mouseleave function, so that they can only operate the mouseenter/leave function once the fade action is complete. How would I do that?
$("#bocks").mouseenter(function(){
$("#bocks2").fadeOut(); });
$("#bocks").mouseleave(function(){
$("#bocks2").fadeIn();
});
http://jsfiddle.net/x2qNZ/

Try this:
var blocked = false;
function unblock() {
blocked = false;
}
$("#bocks").mouseenter(function(){
if (blocked) return;
blocked = true;
$("#bocks2").fadeOut(unblock);
});
$("#bocks").mouseleave(function(){
if (blocked) return;
blocked = true;
$("#bocks2").fadeIn(unblock);
});
You could also remove the event listeners and place it again in the unblock() function.

FadeIn/Fade out have completion callbacks.
http://jsfiddle.net/x2qNZ/3/
I have updated the Fiddle to disable fadeIn if we are actively fadingOut.
var isFiring = false;
$("#bocks").mouseenter(function(){
isFiring = true;
$("#bocks2").fadeOut(1000, function(){
isFiring = false;
});
});
$("#bocks").mouseleave(function(){
if(!isFiring){
$("#bocks2").fadeIn();
} else {
console.log('fire ignored');
}
});

Look at the updated fiddle
var mouseenterbusy = false;
var mouseleavebusy = false;
$("#bocks").mouseenter(function(){
if (mouseenterbusy == true) {
return;
}
mouseenterbusy = true;
$("#bocks2").fadeOut(function (){
mouseenterbusy = false;
});
});
$("#bocks").mouseleave(function(){
if (mouseleavebusy == true) {
return;
}
mouseleavebusy = true;
$("#bocks2").fadeIn(function (){
mouseleavebusy = false;
});
});
http://jsfiddle.net/x2qNZ/5/

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