I'm trying to create a todoapp when i search for a word it display the table without refreshing the whole page.
here's my index.html
<body>
<h2>My Personal TodoApp Project</h2>
<br>
<form action="/searchlist/" method="get">{%csrf_token%}
<input type="text" name="content" placeholder="Search a todolist" class="form-control">
<input class="button button2" type="submit" name="submit" value="Search"/>
</form>
# where i want my table diplay after searching a particular word
<div id="list"></div>
<script type="text/javascript">
$.ajax({
var url = '/templates/searchlistdiv/',
$('#list).show();
var div = $('#list');
div.load(url);
)}
</script>
</body>
and my views.py
def searchtodolist(request):
if request.method == 'GET':
query = request.GET.get('content', None)
if query:
results = Todoitem.objects.filter(content__contains=query)
return render(request, 'searchlistdiv.html', {"results": results})
return render(request, 'searchlistdiv.html')
and lastly my searchlistdiv.html
<table>
<tr>
<th colspan="2">List of Todos</th>
</tr>
{% for result in results %}
<tr>
<td>{{result.content}}</td>
<td><form action="/deleteTodo/{{todo_items.id}}/" style="display: inline; " method="post">
{%csrf_token%}
<input class="button button1" type="submit" value="Delete"/>
</form></td>
</tr>
{% endfor %}
</tr>
</table>
I'm 100% sure my js lacks something i just dont know what i dont really plan on learning js just yet still trying to focus on back-end dev part (maybe in the future i'll learn front-end)
You can do that with this:
<form id="form_id" action="" method="get">{%csrf_token%}
<input type="text" name="content" placeholder="Search a todolist" class="form-control">
<input class="button button2" type="submit" name="submit" value="Search"/>
</form>
<script>
$("#form_id").submit(function (e) {
e.preventDefault(); //this is what i use do prevent default action. [send request without refreshing the whole page]
var serializedData = $(this).serialize();
$.ajax({
type: 'GET',
url: "{% url '/searchlist/' %}", //url to your view.
data: serializedData,
success: function (response) {
$("#list").html(response.searchlistdiv); // Where $("#list") is the container of "searchlistdiv"
},
error: function (response) {
alert('Error');
}
})
})
</script>
in your views.py:
from django.template.loader import render_to_string
from django.http import JsonResponse
def searchtodolist(request):
if request.method == 'GET':
query = request.GET.get('content', None)
if query:
results = Todoitem.objects.filter(content__contains=query)
d_partner_html = render_to_string("searchlistdiv.html", {"results": results}, request)
return JsonResponse({'searchlistdiv': d_partner_html})
return render(request, 'searchlistdiv.html')