Pregunta:

Fecha: 20-07-2017 15:25:20 (En Español)

jQuery AJAX - iniciar una función cuando termine otra función[No resuelta]

Hola a todos

En esta ocasión les solicito una ayuda con respecto jQuery con un codigo que estoy creando que utiliza bootstrap, jquery, php, plug in TimeCircles (contador de tiempo regresivo utiliza bootstrap y jquery)

Hay una tabla donde cada fila son generadas dinámicamente por cada petición via AJAX con la función armarTablaDeHost(cantidadDeHost)

Inicialmente la tabla un mensaje de Cargando id="alertMensaje" aparecen invisibles.

En el codigo se hacen 2 peticiones AJAX utilizando $.getJSON()
La primera la hace desde una función javascript cantHost () que un script de PHP devuelve en formato JSON de la siguiente forma {"cantidad":"15"} dicho número representa la cantidad de datos que tiene que solicitar con otra petición AJAX una función llamada armarTablaDeHost(cantidadDeHost) cuyo parámetro es el numero de cantidad que se obtuvo de la primer función cantHost ()

armarTablaDeHost(cantidadDeHost) esta función tiene un ciclo for que itera del 1 a cantidadDeHost {"cantidad":"15"} en este caso de 1 a 15 que serían IDs, dentro del ciclo está la función getHostById(i)
esta última función solicita vía AJAX datos sobre tal id, obtiene como resultado un JSON ejemplo {"id":"1","nombre":"Walter","estado":"Offline"} en la próxima petición del ciclo for {"id":"2","nombre":"Fernando","estado":"Online"} y así sucesivamente hasta llegar a cantidadDeHost {"cantidad":"15"} y va generando una fila en la tabla.

Una vez que haya terminado de armar la tabla debe iniciar la función iniciarContadorRegresivo() que es un contador de tiempo regresivo id="timer" y cuando este llegue a cero vuelve a iniciar nuevamente todo el ciclo desde el principio.

El problema está en que la petición AJAX getHostById(hostID) puede tardar tiempo en dar una respuesta y iniciarContadorRegresivo() inicia sin esperar que haya terminado getHostById(hostID) en generar todas las filas.

Aquí es donde estoy perdido.

En cantHost () utilizo $.when( armarTablaDeHost(cantidadDeHost)).then( iniciarContadorRegresivo());
donde intentó decirle a jQuery que inicie armarTablaDeHost(cantidadDeHost) y cuando haya terminado de generar todas las filas ejecute iniciarContadorRegresivo(), pero hace todo al mismo tiempo.

jQuery es más rápido que las respuesta AJAX del servidor.

Por lo que lei, entendi el concepto de que se trata pero no como se utiliza ni como lo hace que es posible hacerlo utilizando deferred.promise() de jQuery.

Aqui el codigo comentado y con los respectivos CDN de Bootstrap, jQuery, y plugin timecircles (contador de tiempo regresivo) para que puedan probarlo, claro está que no esta el codigo de php que devuelven las respuestas ya que no es necesario ya que este funcionando correctamente.

<!DOCTYPE HTML>
<html lang="es">
<html>
<head>
    <meta charset="UTF-8">
<title>AJAX</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.css" />
    <style>
        .table tbody tr.success td {
            background-color: #dff0d8;
        }
        .table tbody tr.error td {
            background-color: #ef9a9a;
        }
        .table tbody tr.error td:hover {
            background-color: #ff8a80;
        }
        .table tbody tr.info td {
            background-color: #d9edf7;
        }
        .table tbody tr.warning td {
            background-color: lightgoldenrodyellow;
        }

        #timer, #tabla, #alertMensaje{
            display: none;
        }
        .badge-personalizado {
            background-color: white;
            color: #2d6987;
        }
        .badge-personalizado:hover {
            background-color: #004A7E;
            color: white;
        }
        .glyphicon-size{
            font-size: 1.5em !important;
        }
        .label-size{
            font-size: 1em !important;
        }
    </style>

    <script>

        //contador regresivo
        $( document ).ready(function() {
            $("#CountDownTimer").TimeCircles({count_past_zero: false, start: false, time: { Days: { show: false }, Hours: { show: false } }}).addListener(function(unit, value, total) {
                if(total <= 0) { // cuando el contador regresivo llega acero
                    $("#tabla").fadeOut('slow'); // esconde la tabla de datos
                    $("#CountDownTimer").TimeCircles().stop(); // detiene el contador
                    $("#timer").fadeOut('slow', function() {
                        $("#alertMensaje").fadeIn('slow'); //muestra el mensaje de Cargando
                        $("#tabla").find("tr:gt(0)").remove(); // elimina todos los tr de la tabla, filas con datos obtenidos previamente por AJAX
                        cantHost ();
                    });
                }
            });
            // cantidadDeHost=0;
            function cantHost (){

                // se obtien la cantidad de elementos con el cual se armara las filas de las tablas
                $("#tabla").fadeIn('slow'); // muestra la tabla de datos
                $("#alertMensaje").fadeIn('slow'); // muestra el mensaje de cargando
                $.getJSON( "test_ajax.php", {cantidad: "cantidad"},function( data ) {
                    $("#canidadDetHost").text( data.cantidad ); // imprimr la cantidad en el badge den el titulo
                    cantidadDeHost = data.cantidad; // cantidad de datos a ser peticionados
                    $.when(  armarTablaDeHost(cantidadDeHost)).then( iniciarContadorRegresivo());
                });
            }


            function armarTablaDeHost(cantidadDeHost){
                //Arma las filas de la tabla dinamicamente solicitando con AJAX los datos por ID
                for (i = 1; i <= cantidadDeHost; i++) {
                    getHostById(i);
                }
            }

            function getHostById(hostID) {
                // obtiene el dato por AJAX con el ID solicitado y genera la fila de la tabla
                $.getJSON( "test_ajax.php", {getHostById :hostID},function( data ) {
                    // agrega una fila a la tabla con el dato obteido por AJAX
                    $('#tabla > tbody:last').append('<tr id="filaID_'+ data.id+'"><td>'+ data.id +'- '+ data.nombre +'</td><td><span id="labelestado_'+ data.id+'" class="label label-size"></span></td><td><span class="glyphicon glyphicon-info-sign text-info glyphicon-size"></span></td></tr>')
                    //Compara el estado para darle un estilo al label del estado
                    if(data.estado=='Online'){
                        // $('#filaID_'+ data.id).addClass('bg-success');
                        $('#labelestado_'+ data.id).addClass('label-success');
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-ok-sign"></span>');
                    }

                    if(data.estado=='Offline'){
                        $('#filaID_'+ data.id).addClass('error');
                        $('#labelestado_'+ data.id).addClass('label-danger')
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-remove-sign"></span>');
                    }

                    if(data.estado=='No Existe'){
                        $('#filaID_'+ data.id).addClass('warning');
                        $('#labelestado_'+ data.id).addClass('label-warning');
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-alert"></span>');
                    }

                });
            }


            function iniciarContadorRegresivo(){

                $("#alertMensaje").fadeOut('slow', function() {
                    $("#timer").fadeIn('slow');
                    $("#CountDownTimer").TimeCircles().restart().end(); // incia el conteo

                })};

            cantHost(); // inicia al cargar la pagina por primera vez

        }); //jQuery
    </script>

</head>
<body>
<div class="container">
    <div class="well well-sm text-primary"><h4><span class="glyphicon glyphicon-link" aria-hidden="true"></span>&nbsp;&nbsp;Chequeo de estados Online de Hosts</h4></div>
    <div class="container" id="timer">

        <div class="center-block"id="CountDownTimer" data-timer="10" style="width: 200px"></div>

    </div>

    <div class="alert alert-info" id="alertMensaje" role="alert"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Chequeando...</div>


    <table id="tabla" class="table table-bordered table-hover">
        <thead class="bg-primary">
        <tr>
            <th class="col-md-10"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>&nbsp;Host&nbsp;&nbsp;<span class="badge badge-personalizado" id="canidadDetHost"></span></th>
            <th class="col-md-1">Estado</th>
            <th class="col-md-1"><span class="glyphicon glyphicon-info-sign glyphicon-size"></span></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div> <!-- container principal-->
</body>
</html>

test_ajax.php obtiene los datos de una base de datos y hace cierta comprobaciones las cuales pueden tardar en responder.

Para que puedan probarlo, hice un script emulandolo. La lista tiene los nombres de algunos usuarios de la comunidad.

Si el estado es Offline retengo el envío de la respuesta por algunos segundos, esto emula la tardanza en el tiempo de respuesta del servidor mediante la linea sleep(5); // espera 5 segundos
El codigo esta comentado con la explicación.

 <?php
// Colección de datos.
// El número representa al ID el cual tiene asociado un arreglo de datos son nombre y estado
// ej ID= 1 tiene: nombre: walter,  estado: Online
 $lista = array(
        1 =>
         array(
             'nombre'=>'Walter',
             'estado'=>'Online'
         ),
         2 =>array(
             'nombre'=>'Fernando',
             'estado'=>'Online'
         ),
         3 =>array(
             'nombre'=>'Carlos',
             'estado'=>'Offline'
         ),
         4 =>array(
             'nombre'=>'Ernesto',
             'estado'=>'Online'
         ),
         5 =>array(
             'nombre'=>'Ernesto',
             'estado'=>'Offline'
         ),
         6 =>array(
             'nombre'=>'Txema',
             'estado'=>'Online'
         ),
         7 =>array(
             'nombre'=>'Antuan',
             'estado'=>'Online'
         ),
         8 =>array(
             'nombre'=>'Juan',
             'estado'=>'Offline'
         ),
         9 =>array(
             'nombre'=>'CorpLan',
             'estado'=>'Offline'
         ),
         10 =>array(
             'nombre'=>'Chrismart',
             'estado'=>'Online'
         ),
         11 =>array(
             'nombre'=>'Gustavo',
             'estado'=>'Online'
         ),
         12 =>array(
             'nombre'=>'Karen',
             'estado'=>'Online'
         ),
         13 =>array(
             'nombre'=>'Gonzalo',
             'estado'=>'Online'
         ),
         14 =>array(
             'nombre'=>'Edwin',
             'estado'=>'Online'
         ),
         15 =>array(
             'nombre'=>'Bryan',
             'estado'=>'Offline'
         ),
                );

 if(isset($_GET)){ // Si esta definido GET
    if(isset($_GET["cantidad"])){ // Si solicita la cantidad de elementos de la lista
        echo get_cantidad($lista);
    }
    if(isset($_GET["getHostById"])){ // si solicita datos de un elemento de la lista por medio del ID
        echo  $datos=get_datosById($_GET["getHostById"],$lista);
    }
}

// Funcion que devuelve los datos sobre un ID
function get_datosById($id=0,$arrayDatos){
    $rta = array("id"=>0,"nombre"=>'',"estado"=>''); // respuesta por defecto si el ID no existe
    if($id>0){
        if ( array_key_exists($id, $arrayDatos))
        {
            // El ID se encontrado en la lista, devuelve los datos asociados al ID
            $rta = array("id"=>$id,"nombre"=>$arrayDatos [$id]['nombre'],"estado"=>$arrayDatos [$id]['estado']);
            // si el estado es Offline retengo el envio de la respuesta por algunos segundos
            if ($arrayDatos [$id]['estado']=='Offline'){
                sleep(5); // espera 5 segundos
            }
        }
    }
    return json_encode($rta);
}

// Funcion que devuelve la cantidad de datos de la lista
function get_cantidad($arrayDatos){
    $rta = array("cantidad"=>count($arrayDatos)); //  devuelve la cantidad de elementos del Array de la Lista
    return json_encode($rta);
}

Explicando un poco la respuesta del servidor, el codigo test_ajax.php

La solicitud por GET: ajax.php?cantidad devuelve como respuesta: {"cantidad":15}

La solicitud por GET: ajax.php?getHostById=1 devuelve como respuesta: {"id":"1","nombre":"Walter","estado":"Online"}

La solicitud por GET: ajax.php?getHostById=1 devuelve como respuesta: {"id":"3","nombre":"Carlos","estado":"Offline"}

Por ejemplo la última solicitud tardaria mas en responder

Se veria algo como lo siguiente.

Como se puede ver en la captura de pantalla anterior, sucede lo siguiente
Aparece el <DIV>

Chequeando...

el .cual deberia ocultarse cuando se haya mostrado todas las filas de las tablas.

El contador regresivo de tiempo deberia aparecer y comenzar en 10 cuando se haya ocultado el DIV anterior o bien se haya mostrado todas las filas de las tablas.

Cuando el contador llegue a 0 comenzar todo elciclo nuevamnete con las peticiones de AJAX

Espero que me haya sido explicado bien ya que es un poco complicado hacerlo por las funcionalidades del codigo.

Desde ya muchas gracias.

Que tengan un buen dia.

Saludos :) Etiquetas: AJAX - JQuery - JSON - PHP - Pregunta Votos: 1 - Respuestas: 9 - Vistas: 24 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

1

Black Soldier Karma: 2600
Fecha: 20-07-2017 17:43:53
Yo probaria cambiar esto así:

Esta linea: $.when( armarTablaDeHost(cantidadDeHost)).then( iniciarContadorRegresivo()); por:
```
if(armarTablaDeHost(cantidadDeHost)){
	Si retorna true inicio la cuenta
	iniciarContadorRegresivo();
	}else{
		//Aqui codigo en caso de error en la funcion anterior
	}
```
y modificaria esta funcion de esta manera:
```
function armarTablaDeHost(cantidadDeHost){
    //Arma las filas de la tabla dinamicamente solicitando con AJAX los datos por ID
    for (i = 1; i <= cantidadDeHost; i++) {
        getHostById(i);
    }
    //Aqui retorno true, aunque seria bueno que contaras cuantas filas hay creadas antes de retornar la respuesta
    var canti = $("#tabla tr").length;
    return (canti == cantidadDeHost) ? true : false
}
```
alli lo que hago es crear un par de condiciones, por ejemplo, en la primera si la funcion iniciarContadorRegresivo() me regresa true inicio el contador si no emito el error.

En el la funcion el cambio seria realizar una cuenta de las lineas generadas en la tabla para ver si se cumplio el for, de ser asi retorno un true si no un false.

Prueba y adapta a tu codigo.

Saludos
Votos: 1 - Link respuesta
1

Ernesto Peimbert Karma: 5332

Fecha: 21-07-2017 08:00:41 Hola Walter,
Hay varias cosas que hay que entender primero.
Las llamadas AJAX en el proceso principal siempre serán asíncronas.
En tu caso parace que una llamada depende de la otra.
Puedes manejar un promise como bien mencionas pero creo que sería más sencillo utilizar un worker que te permita hacer las llamadas síncronas.
La ventaja del worker es que encapsulas ambas llamadas en una sola y podría simplificar la inicialización del contador. Votos: 1 - Link respuesta
1

Walter Sánchez Karma: 6600

Fecha: 21-07-2017 16:05:13 Hola
Muchas gracias a ambos por interesarse en mi problemática.
He probado con la sugerencia de Carlos.
Cuando cuenta la cantidad de filas con canti = $("#tabla tr").length; me devuelve 1 y son 15.

Ernesto vere si me es posible implementar Web Workers

Aun no consigo solucionarlo.
Estoy tratando de entender Deferred objects en jQuery

Saludos Votos: 1 - Link respuesta
0

Black Soldier Karma: 2600
Fecha: 22-07-2017 04:19:26
Raro, ve esta muestra que te hice MUESTRA y ve si lo hiciste bien, recuerda que la tabla debe estar debidamente estructurada, algo así:
```
<table>
  <thead>
    <tr>
      <th>Numero</th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody id="lista">
    <tr><td>1</td><td>Carlos</td></tr>
    <tr><td>2</td><td>Manuel</td></tr>
    <tr><td>3</td><td>José</td></tr>
    <tr><td>4</td><td>María</td></tr>
  </tbody>
</table>
```
Respetando los head y body para así realizar correctamente la segmentación. Saludos
Votos: 0 - Link respuesta
0

Walter Sánchez Karma: 6600

Fecha: 22-07-2017 12:33:10 He editado la pregunta agregando el código correspondiente a test_ajax.php que emula la respuesta cuando es solicitada mediante ajax con el método $.getJSON()
A fin que puedan probarlo.
Saludos Votos: 0 - Link respuesta

Walter Sánchez Karma: 6600

Fecha: 22-07-2017 15:11:27 Carlos: No encuentro el error me sigue dando 0

<!DOCTYPE HTML>
<html lang="es">
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Favicons   -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.css" />
    <style>
        .table tbody tr.success td {
            background-color: #dff0d8;
        }
        .table tbody tr.error td {
            background-color: #ef9a9a;
        }
        .table tbody tr.error td:hover {
            background-color: #ff8a80;
        }
        .table tbody tr.info td {
            background-color: #d9edf7;
        }
        .table tbody tr.warning td {
            background-color: lightgoldenrodyellow;
        }

        #timer, #tabla, #alertMensaje{
            display: none;
        }
        .badge-personalizado {
            background-color: white;
            color: #2d6987;
        }
        .badge-personalizado:hover {
            background-color: #004A7E;
            color: white;
        }
        .glyphicon-size{
            font-size: 1.5em !important;
        }
        .label-size{
            font-size: 1em !important;
        }
    </style>

    <script>

        //contador regresivo
        $( document ).ready(function() {
            $("#CountDownTimer").TimeCircles({count_past_zero: false, start: false, time: { Days: { show: false }, Hours: { show: false } }}).addListener(function(unit, value, total) {
                if(total <= 0) { // cuando el contador regresivo llega acero
                    $("#tabla").fadeOut('slow'); // esconde la tabla de datos
                    $("#CountDownTimer").TimeCircles().stop(); // detiene el contador
                    $("#timer").fadeOut('slow', function() {
                        $("#alertMensaje").fadeIn('slow'); //muestra el mensaje de Cargando
                        $("#tabla").find("tr:gt(0)").remove(); // elimina todos los tr de la tabla, filas con datos obtenidos previamente por AJAX
                        cantHost ();
                    });
                }
            });
            // cantidadDeHost=0;
            function cantHost (){

                // se obtien la cantidad de elementos con el cual se armara las filas de las tablas
                $("#tabla").fadeIn('slow'); // muestra la tabla de datos
                $("#alertMensaje").fadeIn('slow'); // muestra el mensaje de cargando
                $.getJSON( "ajax.php", {cantidad: "cantidad"},function( data ) {
                    $("#canidadDetHost").text( data.cantidad ); // imprimr la cantidad en el badge den el titulo
                    cantidadDeHost = data.cantidad; // cantidad de datos a ser peticionados
                    if(armarTablaDeHost(cantidadDeHost)){
                        //Si retorna true inicio la cuenta

                        iniciarContadorRegresivo();
                    }else{
                        //Aqui codigo en caso de error en la funcion anterior
                        // alert('error')

                    }
                });
            }


            function armarTablaDeHost(cantidadDeHost){
                //Arma las filas de la tabla dinamicamente solicitando con AJAX los datos por ID
                for (i = 1; i <= cantidadDeHost; i++) {
                    getHostById(i);
                }
                //Aqui retorno true, aunque seria bueno que contaras cuantas filas hay creadas antes de retornar la respuesta
                var canti = $("#lista  tr").length;

                $("#alertMensaje").text(canti);
                return (canti == cantidadDeHost) ? true : false;
            }

            function getHostById(hostID) {
                // obtiene el dato por AJAX con el ID solicitado y genera la fila de la tabla
                $.getJSON( "ajax.php", {getHostById :hostID},function( data ) {
                    // agrega una fila a la tabla con el dato obteido por AJAX
                    $('#tabla  tbody:last').append('<tr id="filaID_'+ data.id+'"><td>'+ data.id +'- '+ data.nombre +'</td><td><span id="labelestado_'+ data.id+'" class="label label-size"></span></td><td><span title="'+ data.id +'" class="glyphicon glyphicon-info-sign text-info glyphicon-size"></span></td></tr>')
                    //Compara el estado para darle un estilo al label del estado
                    if(data.estado=='Online'){
                        // $('#filaID_'+ data.id).addClass('bg-success');
                        $('#labelestado_'+ data.id).addClass('label-success');
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-ok-sign"></span>');
                    }

                    if(data.estado=='Offline'){
                        $('#filaID_'+ data.id).addClass('error');
                        $('#labelestado_'+ data.id).addClass('label-danger')
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-remove-sign"></span>');
                    }

                    if(data.estado=='No Existe'){
                        $('#filaID_'+ data.id).addClass('warning');
                        $('#labelestado_'+ data.id).addClass('label-warning');
                        $('#labelestado_'+ data.id).html(data.estado+' <span class="glyphicon glyphicon-alert"></span>');
                    }

                });
            }


            function iniciarContadorRegresivo(){
                $("#alertMensaje").fadeOut('slow', function() {
                    $("#timer").fadeIn('slow');
                    $("#CountDownTimer").TimeCircles().restart().end(); // incia el conteo

                })};

            cantHost(); // inicia al cargar la pagina por primera vez

        }); //jQuery
    </script>

</head>
<body>
<div class="container">
    <div class="well well-sm text-primary"><h4><span class="glyphicon glyphicon-link" aria-hidden="true"></span>&nbsp;&nbsp;Chequeo de estados Online de Hosts</h4></div>
    <div class="container" id="timer">

        <div class="center-block"id="CountDownTimer" data-timer="10" style="width: 200px"></div>

    </div>

    <div class="alert alert-info" id="alertMensaje" role="alert"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Chequeando...</div>


    <table id="tabla" class="table table-bordered table-hover">
        <thead class="bg-primary">
        <tr>
            <th class="col-md-10"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>&nbsp;Host&nbsp;&nbsp;<span class="badge badge-personalizado" id="canidadDetHost"></span></th>
            <th class="col-md-1">Estado</th>
            <th class="col-md-1"><span class="glyphicon glyphicon-info-sign glyphicon-size"></span></th>
        </tr>
        </thead>
        <tbody id="lista">

        </tbody>
    </table>

</div> <!-- container principal-->
</body>
</html>

Votos: 0 - Link respuesta

0

Michael Mayorga Karma: 25

Fecha: 25-07-2017 13:50:25 Hola, yo he tenido el mismo inconveniente de utilizar una función que al terminar procese otra, sin embargo he utilizado la función pipe este es un ejemplo:

var name = $.post('/echo/json/', {json:JSON.stringify({'name':"Mike"})});
var lastUpdate = $.post('/echo/json/', {json:JSON.stringify({'lastUpdate':"Hello Mike"})});

name.done(function (nameData) {
var name = nameData.name;
lastUpdate.done(function (lastUpdateData) {
var lastUpdate = lastUpdateData.lastUpdate;
$("#render-me").html(name+"'s last update was: "+lastUpdate);
})
.fail(function () {
$("#error").html("an error occured").show();
});
})
.fail(function () {
$("#error").html("an error occured").show();
});

O este:

//We're going to create a new deferred with pipe, then register our callbacks on
// that new deferred.
var myXhrDeferred = $.post('/echo/json/', {json:JSON.stringify({'error':true})})
.pipe(
//done filter
function (response) {
if (response.error) {
//If our response indicates an error
//we'll return a rejected deferred with the response data
return $.Deferred().reject(response);
}
return response;
},
//fail filter
function () {
//If the request failed (failing http status code)
//we'll call this an error too — we pass back a
//deferred that's rejected here as well.
return $.Deferred().reject({error:true});
}
);

//Now our done and fail callbacks will run based on whether the JSON response returns error:true
myXhrDeferred
.done(function (response) {
$("#status").html("Success!");
})
.fail(function (response) {
$("#status").html("An error occurred");
});

Saludos Mike. Votos: 0 - Link respuesta
0

Walter Sánchez Karma: 6600

Fecha: 25-07-2017 15:59:39 Michael Muchas gracias por participar
Probare tus dos códigos de ejemplos.
Los he encontrado online
El primero.
El segundo.

Saludos Votos: 0 - Link respuesta

Esteban Santillan Karma: 103

Fecha: 07-10-2017 18:24:07 Hola walter, antes que nada quería aclarar que soy estudiante y que JS no es lo mío precisamente.
Quería decirte que creo que te conviene realizar algunas modificaciones en cuanto a como lo trabajas:

1. Intenta reducir la cantidad de llamadas por ajax. Esto lo puedes hacer codificando toda la información que necesites en un sólo arreglo -aunque deberías paginar el resultado para reducir el tiempo de respuesta y no consumir recursos excesivos en el cliente, ej: Puede ser posible que un "cliente de escritorio" (pc dual core, al menos 4 GB de ram, conexion por banda ancha) no tenga problemas en manejar 1000 registros, pero ¿Que tal un equipo con menos recursos?¿y un celular?
2.Intenta quitar el código CSS y JS del archivo HTML y ubicarlo en archivos externos (incluidos con etiquetas <link> y <script>) ya que los navegadores pueden "cachear" los archivos externos (y así reducir considerablemente el tiempo de carga, al cargar los archivos externos en cache en vez de solicitarlos al servidor -esto te puede traer problemas con el desarrollo por parte del front-end, al no "aplicarse" estilos nuevos que ayas definido o modificaciones en los archivos JS, aunque lo subsanas actualizando la página con CTRL + F5 o CTRL + LEFT_SHIFT + R si utilizas linux y tienes XFCE)
3.si pones tu código JS al final de tu código HTML evitarás tener que utilizar $(document).ready y podrás utilizar

window.onload = function () {...};

evitando así la indirección de llamar a un método de JQuery
4.en cuanto a las tablas yo utilizo un plugin JQuery llamado DataTables
con la opción server-side y paginacion (si bien puede que te lleve un tiempo aprender a manejarlo y adaptarlo a tus necesidades, realmente vale la pena), el mismo al realizar las peticiones AJAX envía al servidor por post el siguiente arreglo (puedes encontrar la documentacion sobre los parámetros que envía aquí):

Array
(
    [draw] => 99
    [columns] => Array
        (
            [0] => Array
                (
                    [data] => nombre
                    [name] => nombre
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [1] => Array
                (
                    [data] => departamento
                    [name] => departamento
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => luja
                            [regex] => false
                        )

                )

            [2] => Array
                (
                    [data] => departamento_id
                    [name] => departamento_id
                    [searchable] => false
                    [orderable] => false
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )/*...*/

        )

    [order] => Array
        (
            [0] => Array
                (
                    [column] => 0
                    [dir] => desc
                )

        )

    [start] => 10
    [length] => 10
    [search] => Array
        (
            [value] => 
            [regex] => false
        )

)

y la información de respuesta es el siguiente arreglo:

pero antes lo codifico a JSON invocando a json_encode(), por lo que finalmente la respuesta es:

{"draw":100,"recordsTotal":203,"recordsFiltered":14,"data":[{"id":"104","nombre":"Ugarteche","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_104\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_104\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"97","nombre":"Industrial","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_97\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_97\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"99","nombre":"Las Compuertas","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_99\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_99\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"92","nombre":"Agrelo","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_92\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_92\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"101","nombre":"Mayor Drummond","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_101\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_101\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"94","nombre":"Carrodilla","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_94\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_94\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"103","nombre":"Potrerillos","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_103\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_103\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"96","nombre":"El Carrizal","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_96\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_96\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"105","nombre":"Vistalba","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_105\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_105\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"},{"id":"98","nombre":"La Puntilla","departamento":"Luj\u00e1n de Cuyo - Mendoza","departamento_id":"9","fecha_alta":"22\/09\/2017 22:54:31","operador_alta":"admin","fecha_modificacion":"","operador_modificacion":null,"baja":"alta","acciones":"<span id=\"editar_98\" class=\"editar w3-ripple\"><i title=\"Editar\" class=\"fa fa-pencil\"><\/i><\/span><span id=\"eliminar_98\" class=\"eliminar w3-ripple\"><i title=\"Eliminar\" class=\"fa fa-minus\"><\/i><\/span>"}]}

También quería agregar que prefiero utilizar el método $.ajax() de JQuery ya que es más flexible, por ejemplo, podrías querer mostrar un overlay y/o un spinner (el "circulito que da vueltas" XD) antes de enviar la petición, manejar si ocurrió algún error e independientemente de si hubo o no un error, realizar otra acción (como ocultar el spinner). También te permite configurar el método utilizado (post o get) e incluso establecer si la llamada será asíncrona o no (aquí te dejo un enlace a la documentación oficial).

Un ejemplo sería:

$.ajax({
        type: "POST",
        /*async: "false",*/
        url: BASE_URL + CONTROLLER + '/delete/',
        data: {"id": e_id},
        dataType: "json",
        beforeSend: function () {
            document.getElementById('modal').style.display = 'block';
        },
        success: function (respuesta) {
            if (respuesta.state) {
                reload_table(false);
                show_success(respuesta.msg);
            } else {
                show_error(respuesta.msg);
            }
        }
        , error: function (e) {
            window.location = BASE_URL + 'error/error_500/Se_ha_producido_un_error_al_intentar_eliminar_el_registro';
        },
        complete: function () {
            document.getElementById('modal').style.display = 'none';
        }
    });

Espero que te sirva de ayuda.

Saludos!

PD: No me expreso bien por lo que pido perdón si al leer esto notas un tono "altanero" o algo por el estilo Votos: 1 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

jQuery AJAX - iniciar una función cuando termine otra función[No resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta