Django forms interactive

Question

Django forms interactive

Navigation

#1 by (1 votes)

1

I am using Python3.5 Django 1.11 as a backend for an apache server in red hat. Currently it has been put into production and works without problems.

We are now seeing the need for future use of FORMS in the pages but with the priority of being interactive.

EJ:

Entering an address 127.0.0.1:8000/app/page/ (testing now in runserver) generates a page with select and a button in div , and another div with a tab-nav that has a html generated by another application and also, in the same div , a table with style provided by datatable of Bootstrap.

What you want is that when you select one of the options of select and click on the button, the page will not be completely updated, but the tab-nav and the datatable will be updated according to the functions in the view of Django (work on backend).

Where can I find this information or tutorial to do this? Or is it not possible with the Django forms and is there a better way to interact with Django using jQuery and Ajax?

jquery python ajax django responsive

asked by Emmanuel Moran 08.03.2018 в 15:20

source

1 answer

Method to filter Java figures Empty list of PDO + MVC + PHP records

score 1 · Accepted Answer

Bearing in mind that the processing you do in Python for the backend is a black box (under the context of your question it does not matter much what the function does), I can give you a general idea of how I do to manage Django with jQuery / AJAX.

Backend

I like to create a specific file to handle AJAX functions, therefore, I create a ajax.py file within the 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>'

The easiest way is to use JsonResponse to send JSON to the frontend.

Do not forget to declare the function in your URLs:

# ...
from . import ajax

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

Frontend

Now the part of jQuery and AJAX.

Inside your template you should have something like that (I define a special block for additional scripts):

<!-- 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 %}

Of course, in this case I am returning a simple HTML with '<p>¡Prueba!</p>' but that you adapt it according to your needs.