1

Estoy utilizando Python3.5 Django 1.11 como backend para un servidor apache en red hat. Actualmente ya se puso en producción y funciona sin problemas.

Ahora estamos viendo la necesidad a futuro de utilizar FORMS en las páginas pero con la prioridad de ser interactivas.

EJ:

Al ingresar a una dirección 127.0.0.1:8000/app/page/ (probando ahora en runserver) se genera una página con un select y un botón en un div, y otro div con un tab-nav que tiene un html generado por otra aplicación y también, en el mismo div, una tabla con estilo brindado por datatable de Bootstrap.

Lo que se quiere es que al seleccionar una de las opciones del select y dar click en el botón, no se actualice la página completamente, sino que el tab-nav y el datatable se actualicen según las funciones en el view de Django (trabajo en backend).

¿Dónde puedo encontrar esta información o tutorial para realizar esto? ¿O acaso no es posible con los forms de Django y existe una mejor manera de dar interactividad con Django usando jQuery y Ajax?

2
  • Hola, ¿se supone que cada opción en el select llama a un formulario específico?
    – César
    el 8 mar. 2018 a las 16:05
  • Hola @César. No el select en el fondo debería de hacer un llamado a una función (que genera el html en una ubicacion especifica) y tb los datos que iran en la tabla. Por ejemplo si seleccion 14 en mi select y doy click en el boton, no quiero que se recarge la página, sino que solo en backend se realice la funcion y luego que se genere el html y los datos de la tabla actualizar las vistas de cada una. el 8 mar. 2018 a las 16:11

1 respuesta 1

1

Teniendo en cuenta que el procesamiento que haces en Python para el backend es una caja negra (bajo el contexto de tu pregunta no importa mucho lo que haga dicha función), te puedo dar una idea general de como hago yo para manejar Django con jQuery/AJAX.

Backend

A mí me gusta crear un archivo específico para manejar las funciones AJAX, por lo tanto, creo un archivo ajax.py dentro de la app:

# -*- coding: utf-8 -*-
from django.http import JsonResponse

from .models import Modelo # los modelos que necesites


def hacer_algo(request):
    opcion_seleccionada = request.GET.get('opcion')
    # Hacer algo con la información obtenida y retornar un response
    contenido = funcion_magica(opcion_seleccionada)
    response = {}
    response['contenido'] = contenido
    return JsonResponse(response)

def funcion_magica(opcion_seleccionada):
    # Magia por aquí
    return '<p>¡Prueba!</p>'

Lo más sencillo es usar JsonResponse para enviar JSON al frontend.

No olvides declarar la función en tus URLs:

# ...
from . import ajax

urlpatterns = [
    url(r'^ajax/hacer_algo', ajax.hacer_algo, name='ajax_hacer_algo'),
    # ...
]

Frontend

Ahora la parte de jQuery y AJAX.

Dentro de tu template tendrías que tener algo así (yo defino un bloque especial para los scripts adicionales):

<!-- HTML por aquí -->

{% block script %}
  <script type="text/javascript">
    $(document).ready(function() {
      // Cuando cambie tu select
      $("#id_select").on("change", hacerAlgo);
    });

    function hacerAlgo() {
      var opcionSeleccionada = $("#id_select").val();
      var request = $.ajax({
        type: "GET",
        url: "{% url 'ajax_hacer_algo' %}",
        data: {
            "opcion": opcionSeleccionada
        }
      });
      request.done(function(response) {
          // En el DIV que quieres poner el contenido
          $(".tab-nav").html(response.contenido);
      });
    }
  </script>
{% endblock %}

Claro que en este caso estoy retornando un simple HTML con '<p>¡Prueba!</p>' pero eso ya lo adaptas de acuerdo a tus necesidades.

4
  • 1
    Muchas gracias! lo voy a probar y paso respuesta! el 8 mar. 2018 a las 17:05
  • @EmmanuelMoran ¿te funcionó?
    – César
    el 9 mar. 2018 a las 17:02
  • Te comento que pude realizarlo guiandome en ajax con tus conocimientos mostrados arriba y aparte usando otros para concretar lo que necesitaba. En conclusión, fue de mucha ayuda tu respuesta! gracias! el 9 mar. 2018 a las 17:07
  • @EmmanuelMoran ¡perfecto! Si te sirvió no olvides marcarla como aceptada para que tu pregunta no quede como abierta o sin solución. Saludos.
    – César
    el 9 mar. 2018 a las 17:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.