entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Actualizar contenido con Ajax en Django.

Les saludo, mis colegas de entredesarrolladores.com.
Necesito me expliquen cómo puedo hacer para que solo una zona de mi template se actualice.

Me explico:

Tengo un div para control de tabs, así:

<div class="tab-control" data-role="tab-control" data-effect="fade">
<ul class="tabs">
    <li class="active"><a href="#_page_1"> CONTENIDO-1 </a></li>
    <li><a href="#_page_2"> CONTENIDO-2 </a></li>
    <li> <a href="#_page_3"> CONTENIDO-3 </a>
    <li> <a href="#_page_4"> CONTENIDO-4 </a>
    </li>
</ul>
etc... etc... etc...

Qué debo hacer para que al momento de trabajar con el tab CONTENIDO-2, por ejemplo, se actualice el contenido de ese tab al momento de hacer cualquier cosa: grabar, borrar... lo que sea; y no que se actualice toda la página, ya que, (como se nota en el código) se me actualiza todo el template y vuelve a mostrarme el tab CONTENIDO-1, porque es el que tiene la clase active.
He leido que la única forma es con AJAX, pero la verdad es que nunca lo he empleado, no sé cómo se hace. Aunque puedo equivocarme y quizás AJAX no es lo que necesito. No sé. Pero si es así, agradezco me expliquen.
Gracias de antemano por la explicación. Muchas gracias en verdad.

1 Respuesta

1voto

GusGarsaky Puntos5480

La forma de trabajar con AJAX es sencilla para lo que necesitas.

Te dejo un 'template':

$("element").on("event", function(e) {
    // aquí obtienes los datos si es que deseas
    // enviar esos datos al servidor para que
    // trabaje con ellos, por ejemplo:
    var dataToSend = $("#txt-search").val();

    /**
     * @description Llamada AJAX al servidor.
     * url: ruta al archivo del lado del servidor que procesará los datos y/o la acción.
     * dataType: tipo de datos con los que se trabajará. Esto implica que si se envía por
     * ejemplo un objeto JSON, se debe retornar también un objeto JSON. De lo contrario, 
     * aunque del lado del servidor todo esté correcto, jQuery al no poder identificar
     * la respuesta en formato JSON, lanzará un error 'parse error' y se ejecutará el
     * método fail en lugar del done().
     * data: Datos a enviar. Puede ser JSON, texto plano, html, etc. (ver doc.).
     * type: Tipo de petición: POST o GET.
     */
    $.ajax(
    {
        url: "accion.py",
        dataType: "tipo",
        data: dataToSend,
        type: "POST o GET"
    })
    .done(function (data) {
        // proceso
    })
    /**
     * jqXHR: Representa a la respuesta enviada del servidor.
     * textStatus: Texto donde se muestra el mensaje de error enviado del servidor.
     * errorThrown: Objeto que representa el error lanzado desde el servidor (Exception).
     */
    .fail(function (jqXHR, textStatus, errorThrown) {
        // proceso
    })
    /**
     * jqXHR/data: si no hay error en vez del objeto jqXHR recibe la data enviada del servidor.
     * textStatus: Siempre será éste parámetro.
     * erorThrown/jqXHR: Si no hay error recibe el objeto jqXHR. Si hay error recibe errorThrown.
     * @description Este método se ejecuta haya o no haya error. Puede ser útil a veces.
     */
    .always(function (jqXHR, textStatus, errorThrown) {
        // proceso
    });

});

En la primera línea se sobre-entiende que esa llamada AJAX, se disparará cuando se detecte un evento tipo "X" (event) en un elemento tipo "Y" (element).

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta