$.ajax({
type: "POST",
url: "http://localhost:8080/ChecktToken",
data: {"token": ($.cookie("uid")) },
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function() {
},
error: function(data) {
location.href =('login.html')
},
});
The above Ajax call is used for redirecting the user to the login page if he is trying to access any other pages before actually logging into an application.
This works completely OK, but it takes about 2 seconds to redirect to the login page.
So for example if I try to access http://localhost:8080/index.html prior to logging in I will be able to see that page for 2 seconds before actually being redirected.
Is location.href =('login.html') the best method for redirection or is there something better I could do?
Looking for advices.
2 second delay in redirecting page is due to Ajax call waiting for response from server. These 2 seconds may increase if network of server slows down. To prevent page load you have hide page till you get the response or error. You can do that using beforeSend call back in ajax.
$.ajax({
type: "POST",
url: "http://localhost:8080/ChecktToken",
data: {"token": ($.cookie("uid")) },
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function() {
//Hide page till you get the response. You can use element Id which holds entire body.
$(body).hide();
},
success: function() {
$(body).show();
},
error: function(data) {
location.href =('login.html')
},
});
Related
I have setup properties in my Ajax Request not to store cache. I have also added query string as a parameter in the URL to call new Ajax request. But whenever i refresh the page i see old content on the page. I always have to hard refresh a page to see the updated content.
The request headers are getting passed to the browser correctly which i have set in the properties of ajax. But why do i always have to hard refresh to get the updated content. How can i load the new content on just a page refresh. I have pasted my Ajax below
AJAX Methods to set the properties
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.type == 'POST') {
options.url += '?' + Date.now();
}
});
$.ajaxSetup({
cache: false,
headers: {
'Cache-Control':'max-age=0, public'
},
});
My JQuery
$.ajax({
url: "/Configuration/TestPlan/GetUserList",
type: 'POST',
cache: false,
dataType: 'json',
// async :false,
beforeSend: function () {
//call pageloader
showImageLoader();
},
data:jsonString,
contentType: "application/json; charset=utf-8",
success: function (data) {
From jquery - ajax - "If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests" -
So I don't think the cache option is doing what you think. Since it's a POST the only thing that will affect the cache-busting is that little snippet you have:
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.type == 'POST') {
options.url += '?' + Date.now();
}
});
Every time it makes a request - that page is actually being cached. It just does a new Date.now() - then that url is cahced until you do a new Date.now().
So when you comment it out - the last page/data called for is cached and now you've commented out the only thing updating the cachebuster.
Perhaps just apply the cache busting directly to the raw call:
$.ajax({
url: "/Configuration/TestPlan/GetUserList?" + Date.now(),
type: 'POST',
cache: false,
dataType: 'json',
// async :false,
beforeSend: function () {
//call pageloader
showImageLoader();
},
data:jsonString,
contentType: "application/json; charset=utf-8",
success: function (data) {
I have a problem with AJAX request to my external API.
I tried to develop login from jQuery to API like that:
$.ajax({
type: "GET",
dataType: "json",
crossDomain: true,
cache: false,
url: __Configuration.apiURL+"/login",
xhrFields: {
withCredentials: true
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", Login.MakeAuth(email, password));
},
success: function(data){
}
});
Everything looks ok when login and username are correct,
but when i tried to put wrong login and password then Ajax returns authorization window (prompt) from api.. so my problem is: how to prevent from that? I don't want to see this prompt...
I'm calling php file through ajax call and if it returns nothing i want to redirect user to another page (It's for error reports, if it doesn't return anything it means that user logged in). Tried to add error section but it doesn't work. Any suggestions will help. Thanks! Btw, I have small jQuery function at the top of the ajax function, why it breaks my whole ajax call?
ajax.js
function loginAjax() {
//$("#email_errors").empty(); //This function doesnt work and kills whole ajax call. Here is loginAjax function call line - <button type = "submit" id = "push_button" onclick = "loginAjax(); return false">PushMe</button>
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
}
});
}
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
},
error: function(){
window.location.replace("http://stackoverflow.com");
}
});
}
To redirect using javascript all you need to do is override the location.href attribute.
function loginAjax() {
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
// the success method is deprecated in favor of done.
done: function(data) {
$("#login_error").html(data.login_message);
},
fail: function(data) {
location.href="path/to/error/page";
}
});
}
Hello i trying to to save response from htmlpage and save the content of this page, but i always getting an error.What i am doing wrong?
<script type="text/jscript">
var page = "";
$.ajax({
url: "https://www.bbvanetcash.com/local_kyop/KYOPSolicitarCredenciales.html",
type: "GET",
cache: false,
crossDomain: true,
cache: false,
contentType: "application/json; charset=utf-8",
data: {},
jsonp: 'jsonCallback',
dataType: "jsonp",
success: function (data) {
page = data;
console.log("Good");
},
error: function (e) {
console.log("Error");//here where i am stuck
}
});
</script>
"https://www.bbvanetcash.com/local_kyop/KYOPSolicitarCredenciales.html" - i think its URL belong from other domain not from your home/base domain url. that's why you getting error.
You can not make a AJAX http request for NON HOME url.
NON HOME: Its means you can only access your Base domain content though ajax.
I have a mobile app using mostly JQuery Mobile. I have an ajax function using POST and I can't seem to get anything to effect the UI when I fire the click event. I tried setting
$('#cover').show();
as the very first thing in the function then I do some basic things like document.getElementById('user') etc to set some variables and check input, but as long as the ajax function is there it won't show the div or even the spinner from JQ Mobile. Unless I debug and step through the code then the spinner and div show up fine. I tried setTimeout and putting it in the beforeSend area of the ajax call. Everything works fine otherwise. It seemed to work a little better with GET I'm not sure if that has anything to do with it or not.
$.ajax({
cache: false,
type: "POST",
async: false,
url: urlString,
data: jsonstring,
contentType: "application/json",
dataType: "json",
success: function (data) {
JSONobj = JSON.parse(data);
},
beforeSend: function(xhr){
//console.log('BeforeSend');
},
complete: function (xhr) {
//console.log('Complete');
},
error: function (xhr, status, error) {
console.log(error);
}
});
You could use the Ajax Global handlers to handle this:
$(document).
.ajaxStart(function(){
$('#cover').show();
})
.ajaxStop(function(){
$('#cover').hide();
});
This way you don't have to worry about showing/hiding the overlay on individual Ajax calls.
Try this
$("#someButton").click(function(e){
e.preventDefault() //if you want to prevent default action
$('#cover').fadeIn(100,function(){
$.ajax({
url: "someurl",
data: "Somedata",
contentType: "application/json",
dataType: "json",
},
success: function (data) {
JSONobj = JSON.parse(data);
$('#cover').fadeOut(100);
},
complete: function (xhr) {
$('#cover').fadeOut(100);
}
});
});
});