jQuery registration problem

[Procode]

I am creating a JQuery powered registration form and I got everything to work now as I wanted except the showing of errors.

My previous code showed the errors just fine, but didn't have the loading sequence properly:

old code:

$.ajax({
		type: 'POST',
		url: 'main/join_ajax',
		data: form_data,
		dataType: 'json',
		success: function(json)
		{
			if(json.status == "yes"){
				$('#loading').fadeOut(3000);
				$('#register_container').html("<h1>Registration has been successful</h1>").slideDown(1000);
			} else {
				$("#errors").prepend(json.message).slideDown(1500);
			}
		}
	});

My new code does everything properly in terms of registration but it does not show the errors, like if I leave the fields blank and what not the errors do not display at all like they did with the old code.

New code:

$.ajax({
		beforeSend: function(){
			$('#register_container').slideUp(500);
			$('#loading').fadeIn(500);
		},
		type: 'POST',
		url: 'main/join_ajax',
		data: form_data,
		dataType: 'json',
	}).done(function(json){
		if(json.status == "yes"){
			$('#loading').fadeOut(10);
			$('#register_container').html("<h3>Registration has been successful</h3>").slideDown(500);
		} else if(json.status == "no") {
			$("#errors").prepend(json.message).slideDown(500);
		}
	});

Basically what happens now is the loading image just stays and nothing happens...

Also is there a better way to do this? I am confused with the promises and such.

Thank you!

[Procode]

I just fixed it and the errors are showing, however is there a better way to handle something like this?

[AussieJohn]

Hey Procode,

The correct way to handle this would be to use the success, complete and error callbacks as part of the ajax options.

i.e.

$.ajax({
    type: "POST",
    url: "/webservice/controller/action",
    data: {},
    dataType: "json",
    timeout: 10000,
 
    beforeSend: function(xhr, settings) {
        console.log("About to send");
    },
 
    complete: function(xhr, status) {
        console.log("Complete", this.url);
    },
 
    success: function(data, status, xhr){
        console.log("Success", this.url);
    },
 
    error: function(xhr, status, error) {
        console.log("Error", this.url, error);
 
    }
 
});

Note that you would still need to do the error checking in the success callback, the error callback only triggers where there is an error making the request to the webservice (e.g. HTTP 40x/50x errors, timeouts, etc)

You can start your loading animation in beforeSend but instead of stopping it in success or error, you would stop it in complete instead, as that is triggered when the AJAX request finishes.

[Procode]

I am having a slight problem with the code you gave, the button doesn't seem to be animating, however the end result does come out fine... this is for a url shortner.

If I remove the ajax part and just add the animations everythings works fine... (except the ajax part of course).

function doShorten(event)
{
	event.preventDefault();
 
	var form_data = {
		long_url : $('#long_url').val()
	};
 
	if(longurl.length < 1){
		alert("You can't leave the URL field blank!");
		return;
	}
 
	$.ajax({
	    type: "POST",
	    url: "url/short_ajax",
	    data: form_data,
	    dataType: "json",
		async : true,
	    timeout: 10000,
 
	    beforeSend: function() {
	        $("#shorten").fadeOut(0);
		$("#shrinking").fadeIn(100);
	    },
 
	    complete: function() {
		$("#shrinking").slideUp(200);
                $("#shorten").slideDown(300);
	    }
 
	    success: function(msg){
                $('#shorty').addClass('shorty').html("Short URL: "+msg);
	    },
 
	    error: function() {
	        alert("We are sorry but an error occured, please try again!");
	    }
	});
}

Am I doing something wrong?

[AussieJohn]

You could try moving the animations outside of beforeSend and just have them right before the $.ajax() call.

[Procode]

I have managed to get the animations to work, however, now there is a new problem, I dont know why but the ajax request now always returns an error, but everything still gets added to the database and such.

My new code:

function doShorten(event)
{
	event.preventDefault();
 
	var form_data = {
		long_url : $('#long_url').val()
	}
 
	$.ajax({
	    type: "POST",
	    url: "url/short_ajax",
	    data: form_data,
	    dataType: "json",
	    timeout: 10000,
 
	    beforeSend: function() {
	        $("#shorten").fadeOut(0);
		$("#shrinking").fadeIn(100);
	    },
 
	    complete: function() {
		$("#shrinking").slideUp(200);
	        $("#shorten").slideDown(300);
	    },
 
	    success: function(msg){
			$('#shorty').addClass('shorty').html("Short URL: "+msg);
	    },
 
	    error: function(error) {
			console.log(error);
	        alert("We are sorry but an error occured, please try again!");
	    }
	});

I can't figure out why it does this, and when I log the error variable I just get a whole bunch of stuff that I dont understand. Help please!

Thank you!

[AussieJohn]

Do you have a sample page online somewhere, might help if I could have a look at what it's sending back