Callbacks y efecto spinner

Clase 12 de 61 • Curso de JavaScript y jQuery 2015

Christian David Ospina Caicedo

student•

Para que funcione el efecto que Sacha le quería poner a los artículos cuando los va trayendo, el código tiene que ser este:

$tvShowsContainer.append($article);
$article.show(3000);

victor manuel palomo yama Palomo

student•

yo creo que con un fadeIn(2000) se veria mejor

Diego Castillo

student•

en la segunda linea si pones:
$article.show( "fold", 1000 );
SHOW es para que aparezca.
FOLD es el efecto
1000 en el intervalo de tiempo en mls
en jquery http://jqueryui.com/show/
puedes probar los diferentes efectos...

Daniel Morales

student•

Soy novato en este tema de jQuery y de la programacion. Me gusta en general Platzi como plataforma, sin embargo se me dificulta aprender cuando el profesor no tiene una estructura clara de enseñanza. No se si asi se trabaja en la programacion, pero cada vez que escribe una linea, luego la borra, luego la cambia de posicion, luego la agrega como variable. luego la borra del todo, luego explica algo diferente, luego vuelve y cambia, lo deja a uno medio loco (o por lo menos a mi) y se dificulta el aprendizaje, y no se entiende a la final la estructura de lo que quiere explicar. Como consejo, creeria que es mejor tener muy claro los ejercicios que quiere exponer y luego pasar a explicarlos paso a paso sin tantas vueltas al codigo, sin tantos cambios, sin tantas variaciones. Por lo menos creo que asi aprenderia mas facil. No se si es problema mio o es algo que le pasa a los demas, solo expongo esto a manera de feedback.

Saludos

Kath Sánchez

teacher•

Hola Daniel. Entiendo tu preocupación respecto al ritmo de la clase, especialmente si eres nuevo en el tema de la programación, yo también lo soy. Pienso que la forma en la que Platzi ha estructurado su modo de enseñanza es bastante cómoda y eficiente, no me parece en lo personal que no haya estructura del tema particularmente en esta clase, sin embargo no dudo que tomen en cuenta este feed para mejorar la experiencia de educación que nos dan. Yo te recomendaría, basado en propia experiencia, que busques complementar también este aprendizaje que nos ofrecen con otros medios, que te acerques al profesor y a los compañeros que ya están avanzados en este tema y que podrían orientarte en cualquier duda que te vaya surgiendo. La comunidad está para que crezcamos juntos :) ¡Saludos!

David Camacho

student•

Me di cuenta que en este curso es un poco mas confuso, sin embargo creo que este era el primer curso que dictaba sacha en platzi, porque el Curso definitivo de JavaScript lo dicta el tambien y es mucho mas claro y no hay tantas correcciones como tu dices. Solo es cuestion de confianza!

COGNOX S.A.S

student•

Se puede usar fadeIn() para que tenga la entrada que se buscaba.

Juanes Sandoval

student•

Una mejor manera de cargar el efecto spinner es asi: $(".loader").remove();

Ángela Pulido

student•

Callbacks -> llamo a una función y le envío por parámetro otra función (un callback)
esperando que la función que llamé se encargue de ejecutar esa función callback.

Stefany Zapata Naranjo

student•

efecto-spinner: efecto de carga

Team Nur Nur

student•

//Para la animacion  
$tvShowContainer.append($article);  
$artice.hide();  
$article.slideDown();

Sergio Blanco Moreno

student•

Tengo un problema con la búsqueda (minuto 18 en adelante), al parecer realiza el success del ajax pero al iniciarse la búsqueda la consola me devuelve:

index.js:36 Uncaught TypeError: Cannot read property 'medium' of null
Alguien sabe por qué puede estar pasando? tengo el mismo código que aparece en el urso, mismo orden, pero algo raro para con el objeto en cuestión que devuelve el elemento (':img:', show.image.medium). Lo más raro es que al iniciar el index me muestra todos los shows con sus respectivas imagenes, el prblema está cuando realiza la búsqueda. ¡alguien pro que me ayude por favor!

Este es todo mi código:

$(function(){  
    var $tvcontainer = $('#app-body').find('.tv-shows');  
    function renderShow(shows){  
        shows.forEach(function(show){  
            var article = template  
            .replace(':name:', show.name)  
            .replace(':summary:', show.summary)  
            .replace(':img:', show.image.medium)  
            .replace(':img alt:', show.name +' img');  
            var $article = $(article);  
            $tvcontainer.append($article);  
            $article.hide();  
            $article.fadeTo(1500, 1, "linear");  
        });  
    }  
//submit searchform  
    $('#app-body').find('form').submit(function (ev){  
        alert('se hizo click');  
        ev.preventDefault();  
        var busqueda = $(this).find('input[type="text"]').val();  
        $tvcontainer.find('.tv-shows').remove();  
        var $loader = $('<div class="loader">')  
        $loader.append($tvcontainer)  
        //alert('se hizo submit con el valor' + );  
        $.ajax({  
            url:'http://api.tvmaze.com/search/shows',  
            data: {q: busqueda},  
            success: function (respuesta, textStatus, xhr){  
                alert('comienza la busqueda');  
                $loader.remove();  
                var shows = respuesta.map(function (elemento){  
                    return elemento.show;  
                })  
                renderShow(shows);  
            }  
        })  
    });  
    var template =  
                '<article class="tv-show">' +  
                    '<div class="left">'+  
                        '<img src=":img:" alt=":img alt:">' +  
                    '</div>' +  
                    '<div class="right info">' +  
                        '<h1>:name:</h1>' +  
                        "<p>:summary:</p>"  
                    '</div>'+  
                '</article>';  
    $.ajax('http://api.tvmaze.com/shows', {  
        success: function(shows, textStatus, xhr) {  
        $('.loader').remove();  
        renderShow(shows);  
        }  
    })  
});

Gracias!

Octavio Francisco García Robles

student•

Yo también tuve ese error, aparece cuando la API no recupera las imágenes, en la propiedad de image en lugar de ser un objeto que tiene la imagen original o la de tamaño medio nos regresa un "null". Para solucionarlo hay que comprobar que no sea null en cada uno de los resultados devueltos por el API, tendríamos algo similar a esto:

shows.forEach(function(show){  
    //Asignamos el url que tiene ese show a una variable  
    //o dejamos la variable imagen como cadena vacia  
    var imagen = (show.image != null) ? show.image.medium : '';  
    //Ahora en el replace de :img: en lugar de la propiedad   
    //usamos la variable imagen  
    var article = template  
        .replace(':name:', show.name)  
        .replace(':summary:', show.summary)  
        .replace(':img:', imagen)  
        .replace(':img alt:', show.name +' img');  
        var $article = $(article);  
    //El resto del codigo seguiria igual ...

Espero les sirva.

Saludos

Emilio Escobar Pérez

student•

No vi tu comentario a tiempo y minutos después encontré el error, también hice algo parecido. Gracias por los aportes!!

Manuel Galindez

student•

El metodo map() lo que hace es modificar al array que esta llamand, y recibe un funcion para así recibir elementos.

Javier Salvador Ruiz Sámano

student•

por que en algunas partes del codigo no pone el "punto y coma ;"

Ernesto A. Pestaña

student•

JavaScript es un lenguaje que nos permite obviar el punto y coma, sin embargo es una buena practica colocarlos siempre que terminemos de escribir una sentencia, yo pienso que Sacha simplemente ha olvidado ponerlo en algunas partes, sin embargo todo el código funciona de forma correcta a pesar de no tener punto y coma en algunas partes.

Diego Castillo

student•

uso del show:
$article.show( "fold", 1000 );

Jose Yasbet Alvarez Godinez

student•

Asi lo deje y se ve bien la parte que no le salio como esperaba al profesor:  
  
var $article = $(article);  
                $article.hide();  
                $tvShowsContainer.append($article);  
                $article.show(3000);

Sergio Blanco Moreno

student•

Para añadir la animación que sea notoria:

var $article = $(article);  
                $tvcontainer.append($article);  
                $article.hide();  
                $article.fadeTo(1500, 1, "linear");

Almudena Guerras

student•

Efecto fundido al mostrar los items, utilizando .fadeTo(), en lugar de .show()

var $article = $(article);
v$article.hide();
$tvShowsContainer.append($article.fadeTo(1000, 1, "linear"));

Almudena Guerras

student•

OJO! Me confundí al pegar:

var $article = $(article);  
$article.hide();  
$tvShowsContainer.append($article.fadeTo(1000, 1, "linear")

José Manuel Cornelio

student•

La selección $tvShowsContainer tiene símbolo de dolar ($) por algo en especial o puedo poner cualquier nombre?

Alejandro Sanabria

Team Platzi•

Solo para saber que es un selector de jquery nada mas. Lo puedes llamar como quieras pero es una muy buena practica.

Ruben Vazquez Almanza

student•

En la busqueda de “Breaking” al final no deberian aparecer tres resultados?

Aparatología

student•

Hola, me gusto mucho la funcion de request, mi duda es si quiero buscar algo dentro de mi propio sitio, hice una pagina de productos me gustaria meter el buscador, lo puedo aplicar parecido pero tengo que hacer una base de datos en mi servidor de dichos productos?

Kennedy ${{7*7}} Sanchez ${7*7}

student•

Hola Amig@s!
@slifszyc

Tengo varias preguntas relacionadas al tema de las APIs.

Puedo utilizar varios proveedores de peliculas (diferentes web sites) y alimentar mi app con cada una de las APIs haciendo una especie de Merge de mis contenidos?
Como haria para no duplicar el contenido de varias fuentes (APIs).
Como pudiera hacer para que este listado que obtuve de la API, almacenarla en una Base de Datos local.

Saludos

Alejandro Sanabria

Team Platzi•

Hola @ksanchez_cld

1. Si puedes y hay varias maneras de realizar de hacer el merge.
1. tendrías primero que darle el mismo formato a todas las apis para que luego puedas usar un método de lodash como _.extend o Object.assign que es nativo en las ultimas versiones de los navegadores o nodejs.
1. igualmente hay varias maneras depende de la base de datos si es relacional como mysql o no relacional como mongo… eso depende de tu arquitectura de backend pero no es para nada complejo.

Iván Andrés López Gómez

student•

que mas perdido que la mami del chavo del 8 😦

Kike Vanegas

student•

Hola todos.

¿Por qué se le agrega el símbolo de $ a algunos métodos, si se les puede llamar así, sin el punto?

E.g

$tvShow

incluso, tengo una pregunta sobre el video anterior, cuando el hizo el append para hacer el request de la API de tvmaze, el código fue

$(replace).append($(items))

El segundo llevaba parentesis dentro.

Gracias a quien pueda explicarme como si yo tuviese 5 años.

Alejandro Sanabria

Team Platzi•

Jay porque $ es un objeto ósea básicamente append sería algo como esto.

var $ = {
 append: function() {
	document.appendChild(this);
   	return this;
  }
}

nota: esto es pseudo código no es la implementación real.

Diego Forero

Team Platzi•

$tvShow es un variable que le asignas algo, por convención cuando usas jquery y se asigna un contenedor a esa variable se usa el $

En el segundo caso $(replace) hace referencia a un container que estas trayendo directamente con Jquery, no encontré ese código, encontré este
$('#app').find('.tv-shows').append($(article))
Lo que hace es traer el contenedor con id app, luego busca todos los contenedores que tenga la clase tv-shows y por último le agrega el contenido de article pero convertido en un Objeto de Jquery.

Son conceptos un poco complejos, lo que te puedo recomendar es volver a ver el anterior video hasta que asimiles todos los conceptos, puedes verlo un par de veces más y de seguro te quedara todo claro.