Hi there guys,
I have som problem with appending data to clicked div hehre is the code:
$('#users').on( 'click', '.userPanel', function ( user ) {
let login = $( this ).find( 'div.col-md-9 span.login' ).text();
$.ajax({
url:'https://api.github.com/users/'+login+'/repos'+auth
}).done(function ( repos ) {
$.each(repos,function ( index, repo ) {
$('.repositories').append(`
<h5 class="page-header">${repo.name}</h5>
`)
});
});
});
now I getting correct data but appending them to all divs with class name repositories but I want to add only to this specific one
There are JQuery selectors that will allow you to select individual elements with a certain class, for example:
https://api.jquery.com/eq-selector/
But if you want to treat that class differently, why not give it an additional class or even a unique ID?
Because does divs with class repositories are created dynamically after other fetch
But if one of them is meant to be treated differently, can’t you have an if statement in there to have the “special” div get an additional class or an id?
Or, as long as you are absolutely sure that the divs will always have the same layout, or that you can concoct a formula to identify which div or that class you want to append, then you can use the selector (or another) that I mentioned. I’m just always wary of doing that in case you need to go back later and change the layout and suddenly all of your data is getting sent to the wrong place.
for more understanding here is whole code
$(document).ready( function() {
let contributorsArr =[];
let url = 'https://api.github.com/repos/angular/angular/contributors';
let usersArr = [];
fetch( url ).then( response => response.json())
.then( data => {
let auth = '';
contributorsArr = data.map(item=>{
let contributions = item.contributions;
let id = item.id;
return {id, contributions};
});
const userUrls = data.map( item => item.url + auth );
const users = userUrls.map( userUrl => fetch( userUrl ));
return Promise.all( users );
}).then( responses => {
return Promise.all( responses.map( user => user.json()));
}).then( users => {
contributorsArr.forEach( function( obj1 ) {
users.forEach( function( obj ) {
if ( obj1.id === obj.id ) {
Object.assign( obj, obj1 );
}
});
return users;
});
usersArr.push(users);
/*building the html for users*/
$.each( users, function ( index, user ) {
$('#users').append(`
<div class="panel panel-default userPanel">
<div class="panel-heading">
<h1 class="panel-title"><strong>${user.name ? user.name : user.login}</strong></h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 ">
<img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar">
<a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a>
</div>
<div class="col-md-9">
<span class="label label-default first">Public Repos:<span class="repos"> ${user.public_repos}</span> </span>
<span class="label label-primary">Public Gists:<span class="gists"> ${user.public_gists}</span></span>
<span class="label label-success">Contributions:<span class="contributions"> ${user.contributions}</span></span>
<span class="label label-info">Followers:<span class="followers"> ${user.followers}</span></span>
<br><br>
<ul class="list-group">
<li class="list-group-item">Login: <span class="login">${ user.login }</span></li>
<li class="list-group-item">Company:<span> ${ user.company ? user.company : 'freelancer' }</span></li>
<li class="list-group-item">Location:<span> ${ user.location ? user.location : 'location not available' }</span></li>
<li class="list-group-item">Member Since:<span> ${ user.created_at }</span></li>
</ul>
<h4 class="page-header">Click to see latest Repos </h4>
</div>
</div>
</div>
</div>
<div class="repositories"></div>
`);
});
});
/*sorting methods*/
function sortByGists( x, y ){
let a = $( x ).find('div.col-md-9 span span.gists').text();
let b = $( y ).find('div.col-md-9 span span.gists').text();
return parseInt( b ) - parseInt( a );
}
function sortByRepos( x, y ){
let a = $( x ).find('div.col-md-9 span span.repos').text();
let b = $( y ).find('div.col-md-9 span span.repos').text();
return parseInt( b ) - parseInt( a );
}
function sortByContributions( x, y ){
let a = $( x ).find('div.col-md-9 span span.contributions').text();
let b = $( y ).find('div.col-md-9 span span.contributions').text();
return parseInt( b ) - parseInt( a );
}
function sortByFollowers( x, y ){
let a = $( x ).find('div.col-md-9 span span.followers').text();
let b = $( y ).find('div.col-md-9 span span.followers').text();
return parseInt( b ) - parseInt( a );
}
function reorderEl( el ){
let container = $( '#users' );
container.html('');
el.each( function(){
$( this ).appendTo( container );
});
}
$('#gists').click(function(){
reorderEl($('.userPanel').sort( sortByGists ));
});
$('#repos').click(function(){
reorderEl($('.userPanel').sort( sortByRepos ));
});
$('#contributions').click( function(){
reorderEl($('.userPanel').sort( sortByContributions ));
});
$('#followers').click(function(){
reorderEl($('.userPanel').sort( sortByFollowers ));
});
$('#users').on( 'click', '.userPanel', function ( user ) {
let login = $( this ).find( 'div.col-md-9 span.login' ).text();
let auth = '';
$.ajax({
url:'https://api.github.com/users/'+login+'/repos'+auth
}).done(function ( repos ) {
$.each(repos,function ( index, repo ) {
$('.repositories').append(`
<h5 class="page-header">${repo.name}</h5>
`)
});
console.log(repos);
});
console.log(login);
});
});
maybe I was not precise . Yhe div is not special, click event make him special , I want add data only to clicked one
Hey,
Sorry, I don’t have the energy to go through your code tonight.
But if you want to select the div that has been clicked, then that’s easy - you need to use this to refer to the selected div. Here’s a quick little example.
Javascript:
$(document).ready( function() {
$(".anyDiv").on("click", function() {
$(this).html(Date());
setTimeout(function (){$(this).empty();}.bind(this), 1000);
});
});
CSS:
.anyDiv {
width: 450px;
height: 100px;
font-size: 30px;
color: white;
text-align: center;
padding-top: 5px;
}
.violet {
background-color: #9400D3;
}
.indigo{
background-color: #191970;
}
.blue{
background-color: #0000FF;
}
.green{
background-color: #00FF00;
}
.yellow{
background-color: #FFFF00;
color: black;
}
.orange {
background-color: #FF7F00;
}
.red {
background-color: #FF0000;
}
HTML:
<div class = "anyDiv red"></div>
<div class = "anyDiv orange"></div>
<div class = "anyDiv yellow"></div>
<div class = "anyDiv green"></div>
<div class = "anyDiv blue"></div>
<div class = "anyDiv indigo"></div>
<div class = "anyDiv violet"></div>
If you want to use the append() function, then just switch it out for the html() function.
JQuery assigns a click event to all the class .anyDiv and then puts the current date/time into that specific div using the $(this) selector. (And then for fun I remove it after 1 second.)