Automatically Save Data Using JQuery/Javascript
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am working on a website, and want to allow my user to work without having to click save to manually save their data (similar to how Google Docs allow you to work without having to press save). I was able to achieve this by using a on change event in JQuery and using AJAX to post to the server every time that event occurred. The only problem is that this results in MANY requests to the server. How do I achieve the same result, while reducing the number times requests are sent to the server.
Any help would be greatly appreciated!
Thanks!
javascript jquery html post request
add a comment |
I am working on a website, and want to allow my user to work without having to click save to manually save their data (similar to how Google Docs allow you to work without having to press save). I was able to achieve this by using a on change event in JQuery and using AJAX to post to the server every time that event occurred. The only problem is that this results in MANY requests to the server. How do I achieve the same result, while reducing the number times requests are sent to the server.
Any help would be greatly appreciated!
Thanks!
javascript jquery html post request
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25
add a comment |
I am working on a website, and want to allow my user to work without having to click save to manually save their data (similar to how Google Docs allow you to work without having to press save). I was able to achieve this by using a on change event in JQuery and using AJAX to post to the server every time that event occurred. The only problem is that this results in MANY requests to the server. How do I achieve the same result, while reducing the number times requests are sent to the server.
Any help would be greatly appreciated!
Thanks!
javascript jquery html post request
I am working on a website, and want to allow my user to work without having to click save to manually save their data (similar to how Google Docs allow you to work without having to press save). I was able to achieve this by using a on change event in JQuery and using AJAX to post to the server every time that event occurred. The only problem is that this results in MANY requests to the server. How do I achieve the same result, while reducing the number times requests are sent to the server.
Any help would be greatly appreciated!
Thanks!
javascript jquery html post request
javascript jquery html post request
asked Nov 21 '18 at 22:13
CodeRocksCodeRocks
817
817
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25
add a comment |
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25
add a comment |
2 Answers
2
active
oldest
votes
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce
and throttle
in it.
add a comment |
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421178%2fautomatically-save-data-using-jquery-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce
and throttle
in it.
add a comment |
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce
and throttle
in it.
add a comment |
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce
and throttle
in it.
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce
and throttle
in it.
answered Nov 21 '18 at 22:22
BlueMBlueM
2,1971023
2,1971023
add a comment |
add a comment |
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
add a comment |
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
add a comment |
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
answered Nov 21 '18 at 22:19
N. KueN. Kue
306
306
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421178%2fautomatically-save-data-using-jquery-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can use websockets which will reduce server load
– charlietfl
Nov 21 '18 at 22:25