Question

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.

Answer 1

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).