Estoy tratando de crear una aplicación de tareas cuando busco una palabra, muestra la tabla sin actualizar toda la página.
aquí está mi 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>y mis vistas.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')y por último mi 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>Estoy 100% seguro de que a mi js le falta algo, simplemente no sé lo que realmente no planeo aprender js todavía tratando de concentrarme en la parte de desarrollo de back-end (tal vez en el futuro aprenderé front-end)
Puedes hacer eso con esto:
<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>en tus vistas.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')