CODEWITHSUNDEEP
javascriptajaxdjangocallback
Chris
Chris

Reputation: 12181

Callback (success?) function for AJAX

When a user enters their info into the sign-up page and clicks "submit", usernameCheck() is called. In theory, it should send an AJAX request to the server, which checks to see if the username is taken. If it is, then the user is alerted and nothing else happens. Otherwise it checks that the password is valid. In a previous question, I was told that I needed a callback function to stop the form from submitting before AJAX returned asynchronously. Instead, I put the form submit in the success: part of the AJAX request, so it should only get called iff the username is unique and the password is valid.

However, it doesn't seem to ever get to the password check phase, or display any alert...

function usernameCheck(){ //returns true if username is free
    var ajaxHeaders = {}; //create header object
    ajaxHeaders["X-CSRFToken"] = getCookie('csrftoken'); //add csrftoken from cookies for authentication server-side
    $.ajax({
        type:'POST',
        url:"http://omnicloud.me/signup", 
      data:{username: $("#username").val()}, 
      success:function(response){
        if(response=="true"){
           $('#passAlert').innerHTML("Sorry, that username is already taken") 
           //passalert is where all of the errors (username taken, invalid password) show up
        } else {
            if (passwordCheck()){
                $('#signup_form').submit();
            }
        }
        },
    headers: ajaxHeaders //settings for ajax request
    });

    return !($('#passAlert').value == "Sorry, that username is already taken")
}

function passwordCheck(){
    var pattern =  /[a-z,A-Z,0-9,$,#,@,!,&,%,+,_,-,?]{10,}/  //regexp for valid charachers
    var text = document.getElementById('password').value;
    var msg = document.getElementById('passAlert');
    if(text.length < 10){
        msg.innerHTML = "Passwords need to be at least 10 characters long :(";
        return false;
    } else if (!text.match(pattern)){
        msg.innerHTML = "You have entered an invalid digit (sorry)";
        return false;
    } else if (unacceptable(text)){
        msg.innerHTML = "You can be more creative than that...";
        return false;
    } else if(text != document.getElementById('pass_repeat').value){
        msg.innerHTML = "Your passwords do not match.";
        return false;
    }
    return true;
}

function unacceptable(pwd){ //joins the array, if it matches any one of them 
                                                        //(g means at any point, i means case insensitive) password rejected
    var re = new RegExp(unforgivable.join("|"),"gi");
    return (pwd.toString().match(re) != null);
}

Django signup view:

def signup(request):
if request.method == 'GET':
    return render_to_response('signup.html', context_instance=RequestContext(request))
elif request.is_ajax(): 
#query db for user with username provided via ajax, return if it exists
    try:    
        user = User.objects.get(username=request.POST.get("username")) 
    except User.DoesNotExist:
        return HttpResponse("false",context_instance=RequestContext(request))
    else:
        return HttpResponse("true", context_instance=RequestContext(request))

Upvotes: 1

Views: 1375

Answers (1)

Soren
Soren

Reputation: 14688

The fact that you mention the full qualified domain name;

http://omnicloud.me/signup

suggest to me that you are calling a server from a domain which is different from where you are loading the page and that you are running into cross domain name browser restrictions. Cross domain is possible, but requires more setup -- try first to make it work using the same domian as where you are loading the page,

i.e.use the 

   /signup

on the same server rather than using the http://omni.... part.

Upvotes: 1

Related Questions