I need to invoke an event (for example - display alert) if a user presses on a link (not clicks) - and I don't want it to redirect him to another page. In other words - when a user clicks a link - everything is as usual but when the user presses the link, just the event happens (the alert is displayed) and the user will stay in my page. Is this possible?
By saying press I mean that a user presses on a link for at least one second.
Thanks.
After you refined your question, this code does what you are looking for:
<script>
var timeout;
function onMouseDown(){
timeout = window.setTimeout("alert(1)",1000);
}
function onMouseUp(){
window.clearTimeout(timeout);
}
</script>
click
Notes:
The return false causes the href not to be executed,
The timeout set and clear makes sure that a press of less than a second, won't fire the event
This will fire the alert if the user presses and holds the mouse over 1 second (1000 ms) on the link.
Define press.
You probably want to use either the mousedown or keypress event, depending on what you mean. (The latter case would probably involve checking the event to make sure it was the enter key that was used)
What I understood is that you want:
user pressed the link -> fire an action, but don't redirect the browser
User clicks the link (mouse up over the same object where you pressed the button) -> redirect to a different page
The following code might help
<html>
<head>
<script type="text/javascript">
function mouse_pressed(){
alert('pressed button');
}
function goToLink(url){
window.location = url;
}
</script>
</head>
<body>
<label onclick="goToLink('http://www.google.com');" onmousedown="mouse_pressed();" >text</label>
<body>
</html>
In Jquery you can do this in a simple way.
$("a").live('click',function(){
event.preventDefault();
});
Related
The Issue
There is a timeout function below that ajaxes in the html of the page instantly after an interval of 1200 (jQuery timeout), and it is great until the user presses enter before the timeout is finished, or after, and the html for the page is called twice unnecessarily.
The Code I am using
The function called onkeyup of the input
var timeoutReference;
function instant(){
var val=some filters;
if(val!=''){
if(timeoutReference)clearTimeout(timeoutReference);timeoutReference=setTimeout(function(){
ajaxHTML();
},1200);
}
}
Same function is called on enter
$(document).on('keypress',function(e){
if(e.keyCode==13){
ajaxHTML();
}
});
Question
What can I add to stop the Timeout Function if enter is pressed before it, or how can I prevent the same HTML document from being called twice? Thanks
You've got all the code you need in what you've posted. Just clear the timer when the user presses enter, which will prevent the callback from firing.
if(e.keyCode==13){
clearTimeout(timeoutReference);
ajaxHTML();
}
At the moment, your code calls ajaxHTML() when the user presses enter, but it may already be queued up to call that from your setTimeout set by instant() - resulting, as you say, in two AJAX calls.
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I got the snippet below from this SO post, and it works when a user tries to reload the page or close the browser etc. but if the user clicks on a link then it lets them naivagate away, and then incorrectly starts displaying the message on the wrong page. I am using pjax for the links.
$(document).ready(function () {
$('textarea').change(function () {
window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
});
});
You should use onbeforeunload like this, inconditionally:
<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!saved) {
return "You did not save, do you want to do it now?";
}
}
</script>
It is not safe to handle this event only when another event is fired. The onchange event of your textarea here probably don't fire before you click on a link so the window won't handle the onbeforeunload at all. The link will work as expected: you will get redirected.
To deal with the saved flag, you could listen to what happens in your textarea, for example, when the user is actually typing something:
$('textarea').keyup(function(){
saved=false;
});
Then, if you save the data in ajax, the save button could set it back to true:
$('#btnSave').click(function(){
// ajax save
saved=true;
});
Otherwise, it will load the next page with the saved flag on.
what about something like the following?
Listening on all <a> links and then, depending on whether the variable needToSave is set to true, showing the message or letting it go.
var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){
if (needToSave == true) {
alert("You need to save first");
event.preventDefault();
return;
}
});
UPDATE (as per Roasted's suggestion) this should trigger the unload event every time the link is clicked and perform your existing logic:
// listen on all <a ...> clicks
$(document).click("a", function(event){
$(window).trigger("unload");
});
jsFiddle here - http://jsfiddle.net/k2fYM/
I'm need to preform a specific action in my app if the user presses and holds a button for a few second, if the user removes his finger from the button before the delay runs out, then this action will be cancelled. I use 'ontouchstart' event for the press.
Is there any way i can achieve this using html and javascript?
Thanks.
Here is a code snippets to achieve this particular requirement,
var pressTimer;
$("#btnClick").mouseup(function(){
clearTimeout(pressTimer);
return false;
});
$("#btnClick").mousedown(function(){
pressTimer = window.setTimeout(function() { ... your code here ...},time_delay)
return false;
});
Search for keyup and keydown events in javascript
useful link:
http://www.webmonkey.com/2010/02/javascript_events/#keydown
I have a page with a form that is submittes via ajaxSubmit() (so, without changing the page).
My goal is that, when the user try to change page (or even to close the browser), i ask him if really want to exit the page without sending the form (exactly as gmail does).
Gmail for example do this with a window.confirm-like popup, but if it is possible, i'll like to handle it with custom messages and options.
jQuery have the unload event:
$(window).unload( function () { alert("Bye now!"); } );
but it permits me just to do something before exit the page; i need to 'block' the page exit, if the user click the relative button.
So, how to handle (and cancel) the page-exit event?
try the following. Demo here
<script type="text/javascript">
function unloadPage(){
return "dont leave me this way";
}
window.onbeforeunload = unloadPage;
</script>
It's possible bind the "onbeforeunload" event with jQuery:
$(window).bind('beforeunload', function(e) {
return "ATTENZIONE!!";
});
It works!!