We Keep Coding

Issue with redirect vs render from a ajax jquery call

This is what my js looks like,
$.ajax({
url: "/traffic/validateParams",
data: JSON.stringify(data),
type: 'post',
contentType: 'application/json; charset=utf-8',
success: function (d) {
if(d == "") {
$.ajax({
url: "/traffic/update",
data: JSON.stringify(data),
type: 'post',
contentType: 'application/json; charset=utf-8'
});
} else {
alert(d);
btn.removeAttr("disabled");
}
}
});
Here, validateParams will return an error message if something is incorrect with the validation of the data, or else update method is called.
My issue starts here, with the update method. Below are two codes for the same method, the one with redirect doesnt work, and the one with render works just fine.
Code with redirect:
def update() {
def p = (request.JSON ?: params)?.subMap(TrafficSimulatorConstant.params.keySet())
TrafficSimulatorConstant.updateParams(p)
log.info("traffic simulator configured")
redirect(action: "status") }
Here, in the above code, even though the values are update, there is no redirect to the status page. and also, the button is not enabled.
Code with render:
def update() {
def p = (request.JSON ?: params)?.subMap(TrafficSimulatorConstant.params.keySet())
TrafficSimulatorConstant.updateParams(p)
log.info("traffic simulator configured")
String url = createLink(action:"status")
render(text: "window.location.href='${url}'", contentType: "application/javascript") }
Here, the values are update and the page is redirected to the status page. The button enable/disable doesn't matter because it is a page redirect and we have a new page.
I would like to understand the difference between the two implementations and also would like to know if there is a way to achieve the same behavior with redirect?
Thanks in advance.

How to run another JS method from longPolling?

How in method with longPolling:
function getNewMessagesLong() {
pollingFishingStarts();
$request = $.ajax({
type: 'POST',
url: "listenMessageLong",
data: lastIncomingMessageLongJson,
dataType: 'json',
success: function(data) {
}, complete: getNewMessagesLong})
}
on complete to run another method?:
function pollingFishingEnds() {
document.getElementById("fishing-end").src = "resources/img/fishing-end.png";
document.getElementById("fishing-start").src = "resources/img/fishing-start-empty.png";
}

With the example you posted, you could simply do something like this, adding an anonymous function that calls your "ends" method AND restarts your polling method:
function getNewMessagesLong() {
pollingFishingStarts();
$request = $.ajax({
type: 'POST',
url: "listenMessageLong",
data: lastIncomingMessageLongJson,
dataType: 'json',
success: function(data) {
},
complete: function() {
getNewMessagesLong();
pollingFishingEnds();
}
});
}
You could also change up to a window.setInterval() long-polling paradigm that would allow you to use your complete option to set your actual end method, rather than hijacking it for long-polling.
I'm assuming here that you want to call the "end" state code after the first round completion. Otherwise, there's literally no end to your polling, unless you have some server message to terminate, in which case you need to post that code for additional information.

Ajax redirect on error

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";
}
});
}

Ajax function working in IE but not Firefox

I have an ajax function is called when a form is completed. It is suppose to redirect to a certain page if there is a success for a failure. When I run the form in IE, it works perfectly but in Firefox, the page does not redirect at all. It just refreshes the page. Here is the ajax code:
$.ajax({
url: "someURL",
type: "POST",
dataType: "xml",
data: params,
success: function () { window.location = 'success_page.htm' },
failure: function () { window.location = 'error_page.htm' }
});

Well, there's a minor mistake in your code: you are missing some semicolons:
$.ajax({
url: "someURL",
type: "POST",
dataType: "xml",
data: params,
success: function () { window.location = 'success_page.htm'; },
failure: function () { window.location = 'error_page.htm'; }
});
If this still doesn't resolve your problem, then I would guess there is something wrong with your params variable. Could you show us the whole code?

try
window.location = '/error_page.htm'
Sometimes working with IE I had the same problem, I use window.location.href instead of window.location

Show a loading div during ajax post

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);
}
});
});
});