What am I doing wrong with this AJAX in django? - ajax

Question

I am trying to implement AJAX in django. I have the following file login.html
This file contains the form and ajax script
{% extends 'services/base_visitor.html' %}
{% block title %}Log In{% endblock %}
{% block login_active %}active{% endblock %}
{% block body %}
<div class="container-fluid" style="position: absolute;top:20%;left:35%;width:30%;">
<div class="panel panel-default">
<h3>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspLog In</h3>
<center>
<div class="panel-body">
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
<!-- action="{% url 'login_user'%}" -->
<form class="form-horizontal" role="form" action="{% url 'login_user'%}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<!-- <label class="control-label col-sm-2" for="id_username">
</label> -->
<div class="col-sm-10">
<strong><span class="glyphicon glyphicon-user"></strong>&nbsp&nbsp&nbsp
<input id="id_username" maxlength="30" name="id_username" type="text" placeholder="USERNAME" style="font-family: Courier New;font-size: 15px;border: none; border-bottom: 2px solid black;">
<div id="data"></div></span>
</div>
</div>
<div class="form-group">
<!-- <label class="control-label col-sm-2" for="id_password">
</label> -->
<div class="col-sm-10">
<strong><span class="glyphicon glyphicon-asterisk"></strong>&nbsp&nbsp&nbsp
<input id="id_password" maxlength="30" name="id_password" type="password" placeholder="PASSWORD" style="font-family: Courier New;font-size: 15px; border: none; border-bottom: 2px solid black;"></span>
</div>
</div>
</center>
<div class="form-group">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<div class="panel-footer">
Don't have an account? Click here to register.
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script>
$("#id_username").change(function(){
alert("The text has been changed.");
});
$("#id_username").change(function () {
var username = $("#id_username").val();
console.log(username);
$.ajax({
type:"POST",
url: '/ajax/validate_username/',
data:{
str:username,
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},
dataType: 'json',
success: function (data) {
// alert("done")
$("#data").html(data);
}
});
});
</script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
{% endblock %}
Following is my urls.py
look for validate_username
from django.conf.urls import url
from . import views
from django.contrib import admin
from django.urls import path
from services import views as user_views
app_name = 'services'
urlpatterns = [
path('admin/', admin.site.urls),
path('register/', user_views.register, name='register'),
path('base/', user_views.base, name='base'),
path('login/', user_views.login_user, name='login_user'),
path('index/', user_views.index, name='index'),
path('login/', user_views.logout_user, name='logout_user'),
# path(r'^signup/$', views.SignUpView.as_view(), name='signup'),
url(r'^ajax/validate_username/$', user_views.validate_username, name='validate_username'),
]
Following is my views.py
I check if the user is already present, if yes, then I return Success else I return Not Success.
from django.shortcuts import render
from django.contrib.auth import authenticate, login
from django.contrib.auth import logout
from .forms import UserForm
from .models import UserProfile, Customer, Seller, User
from django.http import *
def validate_username(request):
if request.method == 'POST':
username = request.POST.get('str',None)
# print(username)
data = {
'is_taken': user.objects.filter(username=username).exists()
}
if data.is_taken:
return HttpResponse("Success!")
else:
return HttpResponse("NOT Success!")
Whenever the user enters any text in username field my ajax request should come in action. However, this intended action is not done. Anyone, please clarify.
I also tried to print alerts using jquery, but it also doesn't seem to be working.

Answer 1

I think the problem is the binding try this:
window.onload = function() {
// add your code change here
$("#id_username").change(function(){
alert("The text has been changed.");
});
$("#id_username").change(function () {
var username = $("#id_username").val();
console.log(username);
});
}
or
$(document).ready= function() {
// add your code change here
$("#id_username").change(function(){
alert("The text has been changed.");
});
$("#id_username").change(function () {
var username = $("#id_username").val();
console.log(username);
});
}