Quiero filtrar los resultados de una búsqueda usando 3 casillas de verificación. Los resultados se presentan en el div con id=posts_results
<div class="checkbox"> <label><input type="checkbox" id="id1" class="typePost" value="En groupe"> val1 </label> </div> <div class="checkbox"> <label><input type="checkbox" id="id2" class="typePost" value="En groupe"> val2 </label> </div> <div class="checkbox"> <label><input type="checkbox" id="id3" class="typePost" value="A domicile"> val3</label> </div> <div class="checkbox"> <label><input type="checkbox" id="id4" class="typePost" value="Par webcam"> val4</label> </div> <div id="posts_results"> {% include 'posts/posts_results.html' %} </div> <script> $('.typePost').change(function (request, response) { var v1=$('#id1').is(":checked")? 1:0; var V2=$('#id2').is(":checked")? 1:0; var V3=$('#id3').is(":checked")? 1:0; var v4=$('#id4').is(":checked")? 1:0; $.ajax({ url: '/posts/type_lesson/', dataType: 'json', type: "GET", data: { group: groupChecked, webcam: webcamChecked, home: homeChecked, move: moveChecked, distance: distance, }, success: function (object_list) { $('#posts_results').load("my_page.html", object_list); alert('after') } }); }); <script>esta es mi url:
url(r'^filter/$', views.filter, name='filter_type_lesson'),y esta es mi vista:
def filter(request): if request.method=='GET': #as an exemple I'll send all posts data= PostFullSerializer(Post.objects.all(), many=True) return JsonResponse(data.data, safe=False)La función de filtro ejecuta algunos filtros de acuerdo con los datos enviados por json, serializa las publicaciones filtradas y las envía de vuelta (en este caso, envío todas las publicaciones como ejemplo).
Los resultados se muestran usando un forloop en el div con id "posts_results" y el html está en el archivo posts_results.html.
Se envían los datos json pero la función de éxito de ajax no actualiza ni carga el div
y también es posible quedarse
Me gusta mantenerme alejado de los datos POST sin procesar tanto como sea posible y dejar que la API de formularios haga el trabajo pesado. Puede hacer lo que ya ha hecho con mucho menos código de una manera mucho más segura.
Cree un formulario con cuatro BooleanFields con el nombre de los BooleanFields en su modelo. Puede anular cómo se muestran en el HTML con la variable de etiqueta.
class TheForm(forms.Form): my_field = forms.BooleanField(required=False, label="What I want it to say") my_field2 = forms.BooleanField(required=False, label="What I want it to say 2", help_text="Something else") my_field3 = forms.BooleanField(required=False, label="What I want it to say 3", help_text="Something else") Salida como <form class="my_form">{% csrf_token %}{{form.as_table}}</form>
Envíelo con JS así:
$('.my_form input[type=checkbox]').change(function(e){ e.preventDefault() $.post('module/filer/', $('.my_form').serialize(), function(data) { // Handle data }); });Cuando el formulario se envíe y valide, tome el atributo clean_data y filtre sus modelos de esta manera
models = Post.objets.filter(**form.cleaned_data) Esto funcionará porque los campos del formulario tienen el mismo nombre que los campos de su modelo. Lo mismo que hacer Post.objects.filter(my_field=True, my_field2=True, my_field3=False) . Entonces puedes hacer lo que quieras con él. Usaría un FormView para hacer todo esto:
class MyView(FormView): form_class = TheForm def form_valid(self, form): models = Post.objets.filter(**form.cleaned_data) data= PostFullSerializer(data, many=True) return JsonResponse(data.data, safe=False)Ahora nada va a actualizar el div por sí mismo. Solo se crea cuando se solicita inicialmente el HTML. En su función de éxito, deberá agregar sus elementos manualmente de esta manera:
$('.my_form input[type=checkbox]').change(function(e){ e.preventDefault() $.post('module/filer/', $('.my_form').serialize(), function(data) { var post_results = $('#post_results').html(''); // Clear out old html $.each(data, function(item) { // Create new divs from ajax data and append it to main div var div = $('<div>'); div.append($('<div>').html(item.my_field)); div.append($('<div>').html(item.my_field2).addClass('something')); div.appendTo(post_results); }); }); }); También puede simplemente pasar HTML renderizado a través de ajax y hacer $('#post_results').html(data); . En lugar de llamar a la respuesta json, llamarías a self.render_to_response en FormView.
tal vez podría intentar renderizar la plantilla en su vista y luego cargar los datos renderizados en su div.
Suponiendo que tus posts/posts_results.html sean algunos como:
<ul> {% for post in posts %} <li> Post: {{post.name }} / Author: {{post.author}} / Date: {{post.created_at}}</li> {% endid %} <ul>En su opinión, en el momento en que realiza las acciones respectivas, puede representar la plantilla y agregar el contenido html a la respuesta, es decir (según su código actual):
def filter(request): if request.method=='GET': json_data = { "success": False, "message": "Some message", "result": "some result", } posts = Post.object.all() template = "posts/posts_results.html" things_to_render_in_your_template = { "posts": posts, # you can add other objects that you need to render in your template } my_html = get_template(template) html_content = my_html.render(things_to_render_in_your_template) # here the html content rendered is added to your response json_data["html_content"] = html_content json_data["success"] = True return JsonResponse(json_data)Luego, en su JS, en el momento de verificar la respuesta de ajsx, puede agregar el contenido renderizado en su div
$.ajax({ url: '/posts/type_lesson/', dataType: 'json', type: "GET", data: { group: groupChecked, webcam: webcamChecked, home: homeChecked, move: moveChecked, distance: distance, }, success: function (response) { # response is the json returned from the view, each key defined in your json_data dict in the view, is a key here too # now insert the rendered content in the div $('#posts_results').html(response["html_content"]); alert('after'); } }); Le sugiero que en lugar de crear datos uno por uno para su solicitud ajax, use el método de serialize de jquery o cree un objeto FormData , también en lugar de GET, use POST para hacer su solicitud más segura