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.
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
});
});
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.
I have a form that has a set of drill-downs so one drop down will fill in another. I have a script set up to remember the form values and reset them for that page. My issue comes in when I execute on the trigger for the element, I can't figure out any way to wait on the other dropdown to refresh and then setting its value. Is there any way I can wait for the success result of a function that's kicked off by trigger('change') (or similar function) besides listening for the ajax request. My fall back plan is to do this with cookies and then fill in the form server side. Which might look better anyway, I'm just wondering if it can be done.
I have it saving the values from each drop down and loading them when I get back, I'm wondering if there's some way I can
listen for the ajax call in dropdown_a to finish if I load the value from session storage and call $('#dropdown_a').trigger('change')
the more I think about it I'd probably have to store some sort of value in the program that tracks any request made so I can await them
which would defeat the purposes of the self contained script I have for this
$('#dropdown_a').on('change', function() {
//Ajax call I want to wait for
$.ajax({
url: 'someendpoint',
data: 1,
success: function(response) {
util.fillsInSelectBox(response, $('#dropdown_b'));
},
error: function() {
showErrorModal();
}
});
});
$('#dropdown_b').on('change', function() {
$('#table').bootstrapTable('refresh');
});
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).
I have a fairly complex PHP script in place, and I need to embed a very small JavaScript prompt inside of this code.
This is my criteria / requirement:
I want this JavaScript code to execute when a certain set of criteria is met.
I do NOT want to execute this code with any kind of submit button.
I currently have the PHP code calling the JavaScript prompt correctly.
The JavaScript comment / variable is being initialized, and stored properly, within the JavaScript code itself.
The parent PHP code is waiting for the JavaScript input, and does not continue until the prompt text has been entered.
But, I have not been able to figure out how to pass the JavaScript variable back to the parent PHP code.
What I have so far is very simple, but it is working exactly as I intended:
function getReprNotes() {
?>
<script>
var REPRNOTES = prompt('Please enter any appropriate reprocessing request notes');
alert(REPRNOTES);
</script>
<?php
}
getReprNotes()
Note that I want to pass the REPRNOTES text / variable back to the parent script.
Can anyone tell me how I need to do this, using the above code?
Keep in mind javascript is client side scripting, and php is server side. The only way for you to send information to PHP is by making a call to the server, the best way to do this from the client using javascript without submitting a form is by is using AJAX.
Take a look at these tutorials: 5 Ways to make AJAX calls with jquery and 24 best practices for AJAX implementations.
This is what AJAX calls are for. Split your PHP into two and have the javascript issue an ajax call which triggers the second. If you can use jQuery then you want to make a $.ajax() call: https://api.jquery.com/jQuery.ajax/
If you can't or don't want to use jQuery you can still make ajax calls through XMLHttpRequest objects: http://www.w3schools.com/Ajax/default.asp
$.ajax({
url: '/to-some-url',
data: 'data=' + value,
type: 'POST',
success: function (response, textStatus, jqXHR) {
if (jqXHR.status > 0) {
// do something here
}
}
});
You can use jquery ajax method to pass javascript variable value to php by post(or get). But I don't understand what you really want to achieve