Skip to content

Commit a5ecc81

Browse files
gowthamandgowthamand
committed
ajax update
1 parent 798bae7 commit a5ecc81

File tree

2 files changed

+127
-174
lines changed

2 files changed

+127
-174
lines changed

‎crud/views.py‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,13 @@ def fileupload(request):
104104
context = {'documents': documents}
105105
return render(request, 'fileupload.html', context)
106106

107+
def is_ajax(request):
108+
return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
107109

108110
@login_required
109111
def ajax(request):
110112
if request.method == 'POST':
111-
if request.is_ajax():
113+
if is_ajax(request):
112114
data = Ajax(
113115
text=request.POST['text'],
114116
search=request.POST['search'],
@@ -129,7 +131,7 @@ def ajax(request):
129131
@csrf_protect
130132
def getajax(request):
131133
if request.method == 'GET':
132-
if request.is_ajax():
134+
if is_ajax(request):
133135
data = Ajax.objects.order_by('-created_at').first()
134136
created = data.created_at.strftime('%m-%d-%Y %H:%M:%S')
135137
datas = {"id": data.id, "text": data.text, "search": data.search, "email": data.email,
@@ -142,7 +144,7 @@ def getajax(request):
142144
@csrf_protect
143145
def ajax_delete(request):
144146
if request.method == 'GET':
145-
if request.is_ajax():
147+
if is_ajax(request):
146148
id = request.GET['id']
147149
ajax = Ajax.objects.get(id=id)
148150
ajax.delete()

‎templates/ajax.html‎

Lines changed: 122 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -7,198 +7,149 @@
77
<h1 class="mt-4">AJAX</h1>
88
<ol class="breadcrumb mb-4">
99
<li class="breadcrumb-item"><a href="/">Dashboard</a></li>
10-
<li class="breadcrumb-item active">AJAX </li>
10+
<li class="breadcrumb-item active">AJAX</li>
1111
</ol>
1212
<div class="card mb-4">
1313
<div class="card-header">
1414
<i class="fas fa-table me-1"></i>
1515
</div>
16-
<div class="card-body">
16+
<div class="card-body">
1717
{% for message in messages %}
1818
<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
1919
{{ message }}
2020
</div>
2121
{% endfor %}
22-
<div class="bd-example">
23-
<form id="example-form" action="ajax" method="POST">
24-
{% csrf_token %}
25-
<div class="row mb-3">
26-
<div class="col">
27-
<div class="form-floating mb-3 mb-md-0">
28-
<input class="form-control" type="text" id="example-text-input" placeholder="Text" required>
29-
<label for="example-text-input">Text</label>
30-
</div>
31-
</div>
32-
<div class="col">
33-
<div class="form-floating">
34-
<input type="search" class="form-control" placeholder="Search" id="example-search-input" required>
35-
<label for="example-search-input">Search</label>
36-
</div>
37-
</div>
38-
</div>
39-
<div class="row mb-3">
40-
<div class="col">
41-
<div class="form-floating mb-3 mb-md-0">
22+
<div class="bd-example">
23+
<form id="example-form" action="ajax" method="POST">
24+
{% csrf_token %}
25+
<div class="row mb-3">
26+
<div class="col">
27+
<div class="form-floating mb-3 mb-md-0">
28+
<input class="form-control" type="text" id="example-text-input" placeholder="Text" required>
29+
<label for="example-text-input">Text</label>
30+
</div>
31+
</div>
32+
<div class="col">
33+
<div class="form-floating">
34+
<input type="search" class="form-control" placeholder="Search" id="example-search-input" required>
35+
<label for="example-search-input">Search</label>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="row mb-3">
40+
<div class="col">
41+
<div class="form-floating mb-3 mb-md-0">
4242
<input type="email" class="form-control" placeholder="Email" id="example-email-input" required>
4343
<label for="example-email-input">Email</label>
44-
</div>
45-
</div>
46-
<div class="col">
47-
<div class="form-floating">
44+
</div>
45+
</div>
46+
<div class="col">
47+
<div class="form-floating">
4848
<input type="tel" class="form-control" placeholder="Mobile Number" id="example-tel-input">
4949
<label for="example-tel-input">Mobile Number</label>
50-
</div>
51-
</div>
52-
</div>
53-
<div class="row mb-3">
50+
</div>
51+
</div>
52+
</div>
53+
<div class="row mb-3">
5454
<button class="btn btn-primary btn-block" type="submit">Submit &nbsp;&nbsp;&nbsp;<span></span></button>
55-
</div>
56-
</form>
57-
</div>
58-
</div>
55+
</div>
56+
</form>
57+
</div>
58+
</div>
59+
</div>
60+
<div class="card mb-4">
61+
<div class="card-header">
62+
<i class="fas fa-table me-1"></i>
63+
Ajax List
64+
</div>
65+
<div class="card-body">
66+
{% for message in messages %}
67+
<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
68+
{{ message }}
69+
</div>
70+
{% endfor %}
71+
<table class="table table-bordered" id="myTable" width="100%" cellspacing="0">
72+
<thead>
73+
<tr>
74+
<th>ID</th>
75+
<th>Text</th>
76+
<th>Search</th>
77+
<th>Email</th>
78+
<th>Mobile</th>
79+
<th>Created At</th>
80+
<th>Action</th>
81+
</tr>
82+
</thead>
83+
<tbody>
84+
{% for ajax in ajax_list %}
85+
<tr id="table-{{ ajax.id }}">
86+
<td>{{ ajax.id }}</td>
87+
<td>{{ ajax.text }}</td>
88+
<td>{{ ajax.search }}</td>
89+
<td>{{ ajax.email }}</td>
90+
<td>{{ ajax.telephone }}</td>
91+
<td>{{ ajax.created_at |date:"d-m-Y H:i:s" }}</td>
92+
<td><a class="btn btn-sm btn-warning"><span class="fa fa-edit"></span> Edit</a>
93+
<a class="btn btn-sm btn-danger delete" data-id="{{ ajax.id }}">
94+
<span class="fa fa-trash"></span> Delete
95+
</a>
96+
</td>
97+
</tr>
98+
{% endfor %}
99+
</tbody>
100+
</table>
101+
</div>
59102
</div>
60103
</div>
61-
{# <div id="content-wrapper">#}
62-
{# <div class="container-fluid">#}
63-
{# <!-- Breadcrumbs-->#}
64-
{# <ol class="breadcrumb">#}
65-
{# <li class="breadcrumb-item">#}
66-
{# <a href="#">Dashboard</a>#}
67-
{# </li>#}
68-
{# <li class="breadcrumb-item active">Ajax Crud</li>#}
69-
{# </ol>#}
70-
{# {% for message in messages %}#}
71-
{# <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">#}
72-
{# {{ message }}#}
73-
{# </div>#}
74-
{# {% endfor %}#}
75-
{# <div class="card mb-3">#}
76-
{# <div class="card-header">#}
77-
{# <i class="fas fa-table"></i>#}
78-
{# Ajax Crud#}
79-
{# </div>#}
80-
{# <div class="card-body">#}
81-
{# <form class="form-horizontal" >#}
82-
{# {% csrf_token %}#}
83-
{# <div class="form-group">#}
84-
{# <div class="form-row">#}
85-
{# <div class="col-md-6">#}
86-
{# <div class="form-label-group">#}
87-
{# <input class="form-control" type="text" id="example-text-input" placeholder="Text" required>#}
88-
{# <label for="example-text-input">Text</label>#}
89-
{# </div>#}
90-
{# </div>#}
91-
{# <div class="col-md-6">#}
92-
{# <div class="form-label-group">#}
93-
{# <input type="search" class="form-control" placeholder="Search" id="example-search-input" required>#}
94-
{# <label for="example-search-input">Search</label>#}
95-
{# </div>#}
96-
{# </div>#}
97-
{# </div>#}
98-
{# </div>#}
99-
{# <div class="form-group">#}
100-
{# <div class="form-row">#}
101-
{# <div class="col-md-6">#}
102-
{# <div class="form-label-group">#}
103-
{# <input type="email" class="form-control" placeholder="Email" id="example-email-input" required>#}
104-
{# <label for="example-email-input">Email</label>#}
105-
{# </div>#}
106-
{# </div>#}
107-
{# <div class="col-md-6">#}
108-
{# <div class="form-label-group">#}
109-
110-
{# </div>#}
111-
{# </div>#}
112-
{# </div>#}
113-
{# </div>#}
114-
{# <button class="btn btn-primary btn-block" type="submit">Submit &nbsp;&nbsp;&nbsp;<span></span></button>#}
115-
{# </form>#}
116-
{# </div>#}
117-
{# </div>#}
118-
{# <div class="card mb-3">#}
119-
{# <div class="card-header">#}
120-
{# <i class="fas fa-table"></i>#}
121-
{# Ajax List#}
122-
{# </div>#}
123-
{# <div class="table">#}
124-
{# <table class="table table-bordered" id="myTable">#}
125-
{# <thead>#}
126-
{# <tr>#}
127-
{# <th>Text</th>#}
128-
{# <th>Search</th>#}
129-
{# <th>Email</th>#}
130-
{# <th>Mobile</th>#}
131-
{# <th>Created At</th>#}
132-
{# <th>Action</th>#}
133-
{# </tr>#}
134-
{# </thead>#}
135-
{# <tbody>#}
136-
{# {% for ajax in ajax_list %}#}
137-
{# <tr id="table-{{ ajax.id }}">#}
138-
{# <td>{{ ajax.text }}</td>#}
139-
{# <td>{{ ajax.search }}</td>#}
140-
{# <td>{{ ajax.email }}</td>#}
141-
{# <td>{{ ajax.telephone }}</td>#}
142-
{# <td>{{ ajax.created_at |date:"d-m-Y H:i:s" }}</td>#}
143-
{# <td><a class="btn btn-sm btn-warning"><span class="fa fa-edit"></span> Edit</a>#}
144-
{# <a class="btn btn-sm btn-danger delete" data-id="{{ ajax.id }}"><span#}
145-
{# class="fa fa-trash"></span> Delete</a></td>#}
146-
{# </tr>#}
147-
{# {% endfor %}#}
148-
{# </tbody>#}
149-
{# </table>#}
150-
{# </div>#}
151-
{# </div>#}
152-
{# </div>#}
153104
{% endblock %}
154105
{% block javascript %}
155-
<script>
156-
$(document).ready(function() {
157-
$('#example-form').submit(function(event) {
158-
var text = $('#example-text-input').val();
159-
var search = $('#example-search-input').val();
160-
var email = $('#example-email-input').val();
161-
var telephone = $('#example-tel-input').val();
162-
$.ajax({
163-
type : 'POST',
164-
url : 'ajax',
165-
data :{
166-
'csrfmiddlewaretoken': '{{csrf_token}}',
167-
'text': text,
168-
'search': search,
169-
'email': email,
170-
'telephone': telephone,
171-
},
172-
dataType : 'json',
173-
encode : true
174-
})
175-
.done(function(data) {
176-
$("#example-form").trigger("reset");
177-
$.get('getajax', function(response){
178-
179-
})
180-
.done(function(datas) {
181-
$("#myTable > tbody").prepend("<tr id='table-" +datas.id+ "'>\n\
182-
<td>"+ datas.text +"</td><td>"+ datas.search +"</td>\n\
183-
<td>"+ datas.email +"</td><td>"+ datas.telephone +"</td>\n\
184-
<td>" +datas.created_at+ "</td><td><a class='btn btn-sm btn-warning'><span class='fa fa-edit'></span>Edit</a>\n\
185-
<a class='btn btn-sm btn-danger delete' data-id='"+ datas.id + "'><span class='fa fa-trash'></span> Delete</a> </td></tr>");
106+
<script>
107+
$(document).ready(function () {
108+
$('#example-form').submit(function (event) {
109+
var text = $('#example-text-input').val();
110+
var search = $('#example-search-input').val();
111+
var email = $('#example-email-input').val();
112+
var telephone = $('#example-tel-input').val();
113+
$.ajax({
114+
type: 'POST',
115+
url: 'ajax',
116+
data: {
117+
'csrfmiddlewaretoken': '{{csrf_token}}',
118+
'text': text,
119+
'search': search,
120+
'email': email,
121+
'telephone': telephone,
122+
},
123+
dataType: 'json',
124+
encode: true
186125
})
187-
.fail(function() {
188-
$("#fails" ).show();
189-
})
190-
});
126+
.done(function (data) {
127+
$("#example-form").trigger("reset");
128+
$.get('getajax', function (response) {
191129

192-
event.preventDefault();
193-
});
194-
$(document).on('click','.delete',function(event) {
195-
console.log('deleted');
196-
var id = $(this).attr("data-id");
197-
$.get('delete', {id:id}, function(response){
198-
var tabrow = '#table-'+id;
199-
$(tabrow).remove();
130+
})
131+
.done(function (datas) {
132+
$("#myTable > tbody").prepend("<tr id='table-" + datas.id + "'>\n\
133+
<td>" + datas.id + "</td><td>" + datas.text + "</td><td>" + datas.search + "</td>\n\
134+
<td>" + datas.email + "</td><td>" + datas.telephone + "</td>\n\
135+
<td>" + datas.created_at + "</td><td><a class='btn btn-sm btn-warning'><span class='fa fa-edit'></span>Edit</a>\n\
136+
<a class='btn btn-sm btn-danger delete' data-id='" + datas.id + "'><span class='fa fa-trash'></span> Delete</a> </td></tr>");
137+
})
138+
.fail(function () {
139+
$("#fails").show();
140+
})
141+
});
142+
143+
event.preventDefault();
144+
});
145+
$(document).on('click', '.delete', function (event) {
146+
console.log('deleted');
147+
var id = $(this).attr("data-id");
148+
$.get('delete', {id: id}, function (response) {
149+
var tabrow = '#table-' + id;
150+
$(tabrow).remove();
151+
});
200152
});
201153
});
202-
});
203-
</script>
154+
</script>
204155
{% endblock %}

0 commit comments

Comments
 (0)