Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsAnimating elements that have AJAX requested data.
I've found that when I try to use the ".addClass" Jquery methord to a container that contains information that has been gotten via an AJAX request, it will not let me animate the container. Is there any way around this?
I've tried doing this
var container = $(".container");
if (container.hasChildNodes()){
container.addClass("animationtime")
;}
So if the container suddenly gets a child element (this being the element that is created via JS when the AJAX request has come through) it will then gain the class of "animationtime" which essentially transforms the element, moving it to a different spot.
I've found however this does not seem to work, is there any way around this?
5 Answers
Steven Parker
243,253 PointsAnother addClass would need to be performed when the child is added.
I'm assuming the snippet above is only run when the page loads. So you would need some additional code in the same place where the child is added later that would also add the class to the container.
If you have additional questions about this, please show the whole code, and if you are using a workspace, please make a snapshot of your workspace and post the link to it
UPDATE: I realized that "container" is a jQuery object, but "hasChildNodes" is a method of an HTML element (and not jQuery).
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsYeah I'm not sure I understand, sorry. Just trying to get it to animate and rotate into the page, but such a simple task is proving difficult due to the AJAX request. Here is my JS
$("form").submit(function (evt){
evt.preventDefault();
var $searchField = $("#search");
var pokemon = $searchField.val().toLowerCase();
var pokeAPI = "http://pokeapi.co/api/v2/pokemon/" + pokemon
function displayInfo(datas) {
var infoHTML = "<div class='pokeCard' >" + '<img class = "pokeimg" src="' +
datas.sprites.front_default + '"alt="Pokémon" height="200" width="200">' +
"<strong>Pokémon name:</strong> " + datas.name + "<br>" + "<strong>Average weight: </strong> " +
datas.weight/10 + " kg" + "<br>" + "<strong>Pokémon type:</strong> "; for(i = 0; i < datas.types.length; i++){
infoHTML += (i>0 ? ", " : "") + datas.types[i].type.name; }
infoHTML += "<br><strong>Pokémon moves:</strong> "; for(i = 0; i < datas.moves.length; i++){
infoHTML += (i>0 ? ", " : "") + datas.moves[i].move.name};
infoHTML += "</div>";
$(".container").html(infoHTML);
};
$.getJSON(pokeAPI,displayInfo);
});
var container = $("#pokecontainer");
var card = $(".pokeCard");
card.load = function(){
if (container.children.length > 1){
container.className = "container animationtime"
;}
else (container.className = "container")
};
here is the CSS for the animation
.container {height:90%;
width:40%;
margin:auto;
transform:rotate(45deg) scale(0.5) translate(500px, -300px);
transition: all 2000ms ease-in-out;
opacity:0;
}
.pokeCard {
height: 100%;
width:100%;
margin:auto;
background-image: url("pokemon.jpg");
background-repeat: no-repeat;
background-size: cover;
border: 6px solid #33ccff;
margin-bottom: .8em;
border-radius:7px;
box-shadow:5px 5px 5px #888888;
}
.animationtime{
opacity:1;
transform: rotate(0deg) scale(1);
}
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsOkay it's not working because the container before the search which constructs the html inside the container div says that it already has 2 children elements living inside it, even before the request has been put through and the html loading to the page.
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsOkay so I just made it super simple and added it to the submit event handler like this
var container = $("#pokecontainer");
container.addClass("animationtime")
Steven Parker
243,253 PointsI noticed this question was never marked as solved, Did your change to the submit handler resolve the issue?
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsHi Steven! Sorry yes the issue was resolved, apologise for not clicking a Best Answer.