Hi i have to perform perform like, when the ajax is in progress, then do not allow the user to do page refresh.
here is the code i have
$('#submit').click(function() {
$(function() {
$(".col1").mask("Generating csv...."); //This will generate a mark, Here i would like to prevent the user from doing any sort of operation.
var to = $('#filters_date_to').val();
var from = $('#filters_date_from').val();
$.ajax({
url:"../dailyTrade/createCsv?filters[date][to]="+to+"&filters[date][from]="+from,success:function(result){
if(result) {
$(".col1").unmask(); //Here we can unlock the user from using the refresh button.
window.location = '../dailyTrade/forceDownload?file='+result;
setTimeout('location.reload(true);',5000);
}
}
});
});
});
Any suggestions.
Best you can do is use onbeforeunload to present the user with a message saying that a request is in progress and asking them if they are sure they want to proceed.
e.g.
var req;
window.onbeforeunload = function() {
if(req) {
return 'Request in progress....are you sure you want to continue?';
}
};
//at some point in your code
req = //your request...
You cannot, in any way, prevent the user from leaving your page using JS or anything else.
I doubt if you should do that.
$(window).bind('beforeunload',function(){
return 'are you sure you want to leave?';
});
If you are talking about a refresh "html button" on your web page, that can easily be done. Just before you make your ajax call, disable your refresh button and on success/error function of the ajax call enable it.
Disable button
$("#refreshBtn").attr("disabled", "disabled");
Enable button
$("#refreshBtn").removeAttr("disabled");
You cannot do it just by inserting JavaScript code.
Only ways I can think of are:
Use synchronous ajax call, on that way browser should freeze (however it will notify user that script is taking too long to process and user will be able to stop execution)
Write browser plugin that will modify browser behavior (eg. prevent refreshing page for url that you preset)
Both ways are ugly and I wouldn't recommend doing it.
You should modify your script so it can resume execution if page has been refreshed (use HTML5 localStorage).
http://www.w3schools.com/html/html5_webstorage.asp
In your case, I would put in localStorage simple state (boolean) to check did ajax call happened or not. If it did happened, then just try calling again same url and you will get file name. But on server side (if you haven't done already) you should implement caching, so when same url is called twice, you don't need to make two separate files, it could be same file (server will be much lighter on hardware resources).
Related
$('#gd').on('click', function(){
// move up and down DOM elements
// some ajax procedure to store new values on database (php/mysql)
});
Is there any danger to repeating this click very quickly for a long time?
For example - if the connection is poor - will the ajax will not complete each time?
I tested on my live server - seems there is no problem, but... I'm still concerned.
And what is the way to avoid possible problems it this scenario - i.e. if a user keeps clicking very quickly on the #gd button.
This "Danger" would be more accurately described as undesired behavior. However, it is indeed issue which should be treated - as sending multiple request when only 1 is required would consume resources on both client and server with no reason.
If you would like to prevent the user from clicking the button while the request is being processed, disable the button after the client send it it, and re-enable it after response processing complete:
$('#gd').on('click', function(){
// 1. do some stuff with DOM
// 2. disable button + make ajax call
$.ajax({someRequestOptions})
.always(function() {
// 3. re-enable button
});
});
I am trying to make.. "something" to know if an user is closing the browser or in other case is idle. I need to logout the user using a token.
I am using Symfony2.4 and actual logout include a handler because I need to know if the person is logged in another computer. I can't simple use a session expire because that handler will not execute and the application will still show the user as logged.
I am using this code and works really good!!
<script>
var unloaded = false;
$(window).on('beforeunload', unload);
$(window).on('unload', unload);
function unload(){
if(!unloaded){
$('body').css('cursor','wait');
$.ajax({
type: 'get',
async: false,
url: "{{ logout_url('main') }}",
success:function(){
unloaded = true;
$('body').css('cursor','default');
},
timeout: 50
});
}
}
</script>
The thing with this is that when the user try to go any link in the website this code execute and they need to log in again.
What can I do to avoid this code run by simply going to another link or what other thing can I do to have similar results?
This is more of a Javascript question, but well.
What about wrapping all your external links with javascript that sets a flag that disables your unload() function ? This is not very smart to do, though, but should work.
Something like that (not tested) :
$('a').click(function(){
// set the flag
myFlag = true;
return true;
}):
and in your unload :
function unload(){
if (myFlag) {
myFlag = false
return
}
// the rest here
}
EDIT :
If you want to send a request on page unload, it's better to use navigator.sendBeacon() as the data is transmitted asynchronously to the web server when the User Agent has an opportunity to do so, without delaying the unload or affecting the performance of the next navigation. See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
I have a small problem: I need to detect if the user of my website has not carried out any Ajax POST request in a set time frame, and give him a prompt to do something about it. I already have a code as follows:
var idleCounter = 600
var loginTimeoutCounter = setInterval(function() {
console.log(idleCounter)
// If a POST request is detected, reset idleCounter to max value.
if (idleCounter > 0) {
idleCounter -= 1
} else {
var promptAboutLogout = confirm('You have been idle for more than 6 hours.\n\n' +
'Your login session could have expired by now.\n\n' +
'Please be sure to refresh this web page before attempting to upload new content.\n\n' +
'Press OK to reload this page, or Cancel to stay on it as-is.')
if (promptAboutLogout) {
clearInterval(loginTimeoutCounter)
location.reload() // Reload the web page to refresh the login credentials.
} else {
idleCounter = 600 // Re-set the counter for 10 min to give user another prompt.
}
}
}, 1000)
I just cannot figure out how to neatly add in a code for POST request detection. I do not want to glue in idleCounter value modification in a form submit eventListener a few hundred lines earlier, because it will be messy, and difficult to come back to when the code will go through the next revision in any foreseeable future.
Is there any neat JS function which picks up occurrence of any POST request?
The approach you are using would make more sense if you want to prompt the user before the session is about to expire and not after the session has expired. However if you want to continue using this approach you should have a common controller/util(consider it a wrapper over the lib you are using for ajax requests) from where you fire all your ajax requests. So whenever you want to invoke an ajax request, you pass the details to the controller which in turn wil make the actual ajax request. It would then receive the response from server and pass it to the callee for further processing. Here you can handle your timer variable for every post request.
Now if your are using a common controller you can get rid of this timer thing all together. When the session will expire, you server will redirect to the login page, mostly with status code 302. Your browser will handle this redirect request and serve your ajax callback with the html of the login page. At this point you can prompt your message dialog or event better display the login screen so that user can reauthenticate and continue his work from there. This should be some amount of code change but should surely ease things in future.
Working on a platform, to enable auto-ticketing functionality. For which a REST API request is used for ticket creation. Unfortunately, there are 2 requests popping simultaneously, which results in creating duplicated tickets.
How to handle such case and send only one of these requests?
Tried adding the 2nd request in the response callback of the first, though this does not seem to work.
if (flag == 1){
logger.debug("Node-down alarm-Request raised - +sitn_id);
clearTimeout(mouseoverTimer);
mouseoverTimer = setTimeout(function(){
logger.debug("Inside Call back function - ");
//function call for ticket creation
incidentRequest(sitn_id,confUtil.config.mule_url);
}, 10);
You really should show more of the code that makes the request, though it seems as if you are doing some ajax inside your 'incidentRequest', so I will presume that (if that isn't what you are doing, then please, show your code....) - and since you tags say javascript and jquery - well, here goes...
To stop the 'double send' in an AJAX call, it is simple:
function incidentRequest(sitn_id,confUtil.config.mule_url){
// stop the double by clearing the cache
$.ajaxSetup({cache: false});
// continue on with the AJAX call
// presuming the url you want is confUtil.config.mule_url
// and the data you want to send is sitn_id
$.post(confUtil.config.mule_url, 'sitn_id=' + sitn_id, function (data) {
// do cool stuff
});
}
Hopefully that will help you get moving. If not, then we will need more code of what is going on around all this.
What is a good way of saving data form without submit button?
I have one idea. Below exemplary source code.
var delay = 1000,
timeId,
ajax,
//fw is some framework
form = fw.get('myform');
form.getFields().on('change', changeEventHandler);
function changeEventHandler() {
clearTimeout(timeId);
timeId = setTimeout(this.ajaxRequest, delay);
}
function ajaxRequest() {
//What do with old ajax request? Abort it?
ajax = fw.ajax({
url: 'ololo',
params: {
data: form.getValues()
}
});
}
What do with old ajax request? Abort it?
Have somebody other ideas?
I had a similar problem when designed an interactive form without save button.
First of all, its not a good idea to save the data on every change. I used on blur event, so when the input loses focus, I check if the value was changed (i.e. not just focus-blur on the input), if it was changed, I disabled the input and send an ajax request. When the request returned, I enabled the input once again (possibly displaying an error if the ajax failed and etc, depends on your needs).
Its the easiest way to do interactive form. This avoids the headache of multiple request trying to modify the same value on server side and the headache of monitoring all ajax requests.