CODEWITHSUNDEEP
jquerypythonajaxdjangopython-2.7
Shivam Mitra
Shivam Mitra

Reputation: 1052

use of ajax with django for passing information

I am trying to test the use of ajax with django views. I am new to ajax and django. I have created a grid of 3*3 cells of buttons. When I click any button, it replaces its text with and 'X' and then should be passed to view "handler" with the help of ajax. But it is not passing the control to view "handler" in my case. I don't understand why it is not working. Here is my code:

url file:

 from django.conf.urls import include, url
    from django.contrib import admin
    from game import views
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^handler/',views.handler,name='handler'),
        url(r'^$',views.home,name='home'),
    ]

views file

from django.shortcuts import render
    from django.http import HttpResponse
    from django.http import Http404

    def handler(request):
        if request.is_ajax():
            pos = request.POST['pos']
            return HttpResponse(2)
        else:
            raise Http404
    def home(request):
        context = {}
        return render(request,"game/home.html",context)

home.html file:

<head>
<head>
<style>
td {
    padding:0;
}
table {
    height:240px;
    width:240px;
    border-collapse: collapse;
    border-spacing: 0
}
input {
    margin:0;
    width:80px;
    height:80px;
    font-size: 50px;
    text-align: center;
}
#content {
    position:absolute;
    top:210px;
    left:540px;
}
</style>
<script>
function change(id)
{
    var y = document.getElementById(id);
    y.value = 'X';
    $.ajax({
        url:"handler/",
        type:"POST",
        data:{pos:id},

        success:function(data) {
            var x = document.getElementById(data);
            x.value = 'O';
            console.log("sucess");
        },
        error:function(xhr,errmsg,err) {
            alert("error");
        }
    });
}
</script>
</head>
<body>
<div id = "content">
<center><table>
<tr>
<td><input type = "button" onclick="change(1)" id = "1"></input></td>
<td><input type = "button" onclick="change(2)" id = "2"></input></td>
<td><input type = "button" onclick="change(3)" id = "3"></input></td>
</tr>
<tr>
<td><input type = "button" onclick="change(4)" id = "4"></input></td>
<td><input type = "button" onclick="change(5)" id = "5"></input></td>
<td><input type = "button" onclick="change(6)" id = "6"></input></td>
</tr>
<tr>
<td><input type = "button" onclick="change(7)" id = "7"></input></td>
<td><input type = "button" onclick="change(8)" id = "8"></input></td>
<td><input type = "button" onclick="change(9)" id = "9"></input></td>
</tr>
</table>
</center>
</div>
</body>
</html>

Upvotes: 2

Views: 680

Answers (1)

Alex Polekha
Alex Polekha

Reputation: 1690

Use csrf_exempt decorator since you don't send csrf token it via ajax. In addition make sure you have included <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>into your template file. That should work.

from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render
from django.http import HttpResponse
from django.http import Http404

@csrf_exempt
def handler(request):
    if request.is_ajax():
        pos = request.POST['pos']
        return HttpResponse(2)
    else:
        raise Http404

Upvotes: 1

Related Questions