SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery registration problem

    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:
    Code JavaScript:
    $.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:
    Code JavaScript:
    $.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!

  2. #2
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just fixed it and the errors are showing, however is there a better way to handle something like this?

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code javascript:
    $.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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

    Code JavaScript:
    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?

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could try moving the animations outside of beforeSend and just have them right before the $.ajax() call.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    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!

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Do you have a sample page online somewhere, might help if I could have a look at what it's sending back
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •