Jquery Use addclass in submit form with ajax
When submit form i need to run addclass and show loading animation and then run ajax
But when in ajax add false to async ,first run ajax and then loading anamiatin execute.
$('.form-login').submit(function(e) {
$('#alert-massages').html("").removeClass("alert alert-warning");
$(".btn-login").addClass('loading');
$(".btn-login").attr('disabled','disabled');
if(formLogin.valid()) {
$.ajax({
url : "<%=checkOtpLoginUrl %>",
dataType : "json",
async: false,
data : {
"<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
"<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
"<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
"<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
method : "post"
}).done(function(data) {
if (data.result) {
javascript jquery ajax
asked Jan 2 at 13:26
user9383073user9383073
12
add a comment |
When submit form i need to run addclass and show loading animation and then run ajax
But when in ajax add false to async ,first run ajax and then loading anamiatin execute.
$('.form-login').submit(function(e) {
$('#alert-massages').html("").removeClass("alert alert-warning");
$(".btn-login").addClass('loading');
$(".btn-login").attr('disabled','disabled');
if(formLogin.valid()) {
$.ajax({
url : "<%=checkOtpLoginUrl %>",
dataType : "json",
async: false,
data : {
"<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
"<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
"<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
"<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
method : "post"
}).done(function(data) {
if (data.result) {
javascript jquery ajax
asked Jan 2 at 13:26
user9383073user9383073
12
1
First of all, don't useasync: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?
– David
Jan 2 at 13:28
I need to use async : false
– user9383073
Jan 2 at 13:29
1
It's not a problem. It's the expected behaviour. Addingasync:false(which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to useasync:false? What's the reason?
– Jeremy Thille
Jan 2 at 13:30
add a comment |
When submit form i need to run addclass and show loading animation and then run ajax
But when in ajax add false to async ,first run ajax and then loading anamiatin execute.
$('.form-login').submit(function(e) {
$('#alert-massages').html("").removeClass("alert alert-warning");
$(".btn-login").addClass('loading');
$(".btn-login").attr('disabled','disabled');
if(formLogin.valid()) {
$.ajax({
url : "<%=checkOtpLoginUrl %>",
dataType : "json",
async: false,
data : {
"<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
"<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
"<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
"<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
method : "post"
}).done(function(data) {
if (data.result) {
javascript jquery ajax
asked Jan 2 at 13:26
user9383073user9383073
12
When submit form i need to run addclass and show loading animation and then run ajax
But when in ajax add false to async ,first run ajax and then loading anamiatin execute.
$('.form-login').submit(function(e) {
$('#alert-massages').html("").removeClass("alert alert-warning");
$(".btn-login").addClass('loading');
$(".btn-login").attr('disabled','disabled');
if(formLogin.valid()) {
$.ajax({
url : "<%=checkOtpLoginUrl %>",
dataType : "json",
async: false,
data : {
"<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
"<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
"<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
"<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
method : "post"
}).done(function(data) {
if (data.result) {
javascript jquery ajax
javascript jquery ajax
asked Jan 2 at 13:26
user9383073user9383073
12
asked Jan 2 at 13:26
user9383073user9383073
12
asked Jan 2 at 13:26
user9383073user9383073
12
asked Jan 2 at 13:26
user9383073user9383073
12
asked Jan 2 at 13:26
user9383073user9383073
12
12
1
First of all, don't useasync: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?
– David
Jan 2 at 13:28
I need to use async : false
– user9383073
Jan 2 at 13:29
1
It's not a problem. It's the expected behaviour. Addingasync:false(which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to useasync:false? What's the reason?
– Jeremy Thille
Jan 2 at 13:30
add a comment |
1
First of all, don't useasync: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?
– David
Jan 2 at 13:28
I need to use async : false
– user9383073
Jan 2 at 13:29
1
It's not a problem. It's the expected behaviour. Addingasync:false(which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to useasync:false? What's the reason?
– Jeremy Thille
Jan 2 at 13:30
1
1
First of all, don't use
async: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?– David
Jan 2 at 13:28
First of all, don't use
async: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?– David
Jan 2 at 13:28
I need to use async : false
– user9383073
Jan 2 at 13:29
I need to use async : false
– user9383073
Jan 2 at 13:29
1
1
It's not a problem. It's the expected behaviour. Adding
async:false (which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to use async:false? What's the reason?– Jeremy Thille
Jan 2 at 13:30
It's not a problem. It's the expected behaviour. Adding
async:false (which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to use async:false? What's the reason?– Jeremy Thille
Jan 2 at 13:30
add a comment |
2 Answers
2
active
oldest
votes
The problem is right here:
async: false
For one thing, this is deprecated (or at least quickly becoming deprecated?) and is unlikely to be supported in recent or future browser updates. It's always been bad practice in the first place, and makes your code go against JavaScript principles. Don't use it.
But more to the point, it explicitly tells your browser to make this asynchronous operation a blocking call. What that means is the browser can't perform any UI updates until the operation completes. Modifying the class of a DOM element is a UI update. The underlying DOM itself is being updated, but the browser can't render that change on the screen until all blocking operations are complete.
Make your asynchronous operations asynchronous. Remove async: false. This will allow the browser to make the UI updates you want it to make.
If there's some other reason why you think you need to use async: false, then that's the actual problem you need to solve. Currently your code is just hiding that problem by creating another problem.
answered Jan 2 at 13:33
DavidDavid
150k28146212
add a comment |
Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
While $.addClass() is synchronous, css are applied with a bit of delay in the browser and when sync ajax call is done the browser is locked and can't repaint the new css appearence.
A workaround could be both to delay the ajax call in a setTimeout or make the ajax call async, which can solve istantly the issue.
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
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%2f54007205%2fjquery-use-addclass-in-submit-form-with-ajax%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 problem is right here:
async: false
For one thing, this is deprecated (or at least quickly becoming deprecated?) and is unlikely to be supported in recent or future browser updates. It's always been bad practice in the first place, and makes your code go against JavaScript principles. Don't use it.
But more to the point, it explicitly tells your browser to make this asynchronous operation a blocking call. What that means is the browser can't perform any UI updates until the operation completes. Modifying the class of a DOM element is a UI update. The underlying DOM itself is being updated, but the browser can't render that change on the screen until all blocking operations are complete.
Make your asynchronous operations asynchronous. Remove async: false. This will allow the browser to make the UI updates you want it to make.
If there's some other reason why you think you need to use async: false, then that's the actual problem you need to solve. Currently your code is just hiding that problem by creating another problem.
answered Jan 2 at 13:33
DavidDavid
150k28146212
add a comment |
The problem is right here:
async: false
For one thing, this is deprecated (or at least quickly becoming deprecated?) and is unlikely to be supported in recent or future browser updates. It's always been bad practice in the first place, and makes your code go against JavaScript principles. Don't use it.
But more to the point, it explicitly tells your browser to make this asynchronous operation a blocking call. What that means is the browser can't perform any UI updates until the operation completes. Modifying the class of a DOM element is a UI update. The underlying DOM itself is being updated, but the browser can't render that change on the screen until all blocking operations are complete.
Make your asynchronous operations asynchronous. Remove async: false. This will allow the browser to make the UI updates you want it to make.
If there's some other reason why you think you need to use async: false, then that's the actual problem you need to solve. Currently your code is just hiding that problem by creating another problem.
answered Jan 2 at 13:33
DavidDavid
150k28146212
add a comment |
The problem is right here:
async: false
For one thing, this is deprecated (or at least quickly becoming deprecated?) and is unlikely to be supported in recent or future browser updates. It's always been bad practice in the first place, and makes your code go against JavaScript principles. Don't use it.
But more to the point, it explicitly tells your browser to make this asynchronous operation a blocking call. What that means is the browser can't perform any UI updates until the operation completes. Modifying the class of a DOM element is a UI update. The underlying DOM itself is being updated, but the browser can't render that change on the screen until all blocking operations are complete.
Make your asynchronous operations asynchronous. Remove async: false. This will allow the browser to make the UI updates you want it to make.
If there's some other reason why you think you need to use async: false, then that's the actual problem you need to solve. Currently your code is just hiding that problem by creating another problem.
answered Jan 2 at 13:33
DavidDavid
150k28146212
The problem is right here:
async: false
For one thing, this is deprecated (or at least quickly becoming deprecated?) and is unlikely to be supported in recent or future browser updates. It's always been bad practice in the first place, and makes your code go against JavaScript principles. Don't use it.
But more to the point, it explicitly tells your browser to make this asynchronous operation a blocking call. What that means is the browser can't perform any UI updates until the operation completes. Modifying the class of a DOM element is a UI update. The underlying DOM itself is being updated, but the browser can't render that change on the screen until all blocking operations are complete.
Make your asynchronous operations asynchronous. Remove async: false. This will allow the browser to make the UI updates you want it to make.
If there's some other reason why you think you need to use async: false, then that's the actual problem you need to solve. Currently your code is just hiding that problem by creating another problem.
answered Jan 2 at 13:33
DavidDavid
150k28146212
answered Jan 2 at 13:33
DavidDavid
150k28146212
answered Jan 2 at 13:33
DavidDavid
150k28146212
answered Jan 2 at 13:33
DavidDavid
150k28146212
150k28146212
add a comment |
add a comment |
Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
While $.addClass() is synchronous, css are applied with a bit of delay in the browser and when sync ajax call is done the browser is locked and can't repaint the new css appearence.
A workaround could be both to delay the ajax call in a setTimeout or make the ajax call async, which can solve istantly the issue.
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
add a comment |
Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
While $.addClass() is synchronous, css are applied with a bit of delay in the browser and when sync ajax call is done the browser is locked and can't repaint the new css appearence.
A workaround could be both to delay the ajax call in a setTimeout or make the ajax call async, which can solve istantly the issue.
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
add a comment |
Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
While $.addClass() is synchronous, css are applied with a bit of delay in the browser and when sync ajax call is done the browser is locked and can't repaint the new css appearence.
A workaround could be both to delay the ajax call in a setTimeout or make the ajax call async, which can solve istantly the issue.
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
While $.addClass() is synchronous, css are applied with a bit of delay in the browser and when sync ajax call is done the browser is locked and can't repaint the new css appearence.
A workaround could be both to delay the ajax call in a setTimeout or make the ajax call async, which can solve istantly the issue.
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
answered Jan 2 at 13:33
Mosè RaguzziniMosè Raguzzini
4,3771225
4,3771225
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%2f54007205%2fjquery-use-addclass-in-submit-form-with-ajax%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
1
First of all, don't use
async: false. Ever. It wouldn't surprise me if it's not even supported in recent browser updates. Once you correct that, does the issue remain?– David
Jan 2 at 13:28
I need to use async : false
– user9383073
Jan 2 at 13:29
1
It's not a problem. It's the expected behaviour. Adding
async:false(which you should never do) forces your code to be synchronous, meaning everything freezes as long as the ajax call isn't finished (which is why you should never use it), therefore the loading animation doesn't show up until the end. Why do you need to useasync:false? What's the reason?– Jeremy Thille
Jan 2 at 13:30