I have some content being added to a page via an AJAX call, and all of my styles are working, except one:
.bld-txt {
font-weight: bold;
}
The call itself looks like this:
$('#quick-search').submit(function(evt) {
evt.preventDefault();
$('.quick-search-info').empty();
var artistName = $(this).serialize();
$.post('/', artistName, function(data) {
var parsedInfo = $.parseJSON(data);
var tourDetails = '';
$.each(parsedInfo, function(i, val) {
tourDetails += '<li class="tour-date">';
tourDetails += '<ul class="show-details">';
tourDetails += '<li class="show-date"><span class="bld-txt">Date: </span>' + parsedInfo[i].formatted_datetime + '</li>';
tourDetails += '<li class="show-venue"><span class="bld-txt">Venue: </span>' + parsedInfo[i].venue.name + '</li>';
tourDetails += '<li class="show-location"><span class="bld-txt">Location: </span>' + parsedInfo[i].venue.city + ", " + parsedInfo[i].venue.region + '</li>';
tourDetails += '<li class="show-tickets"><span class="bld-txt">Tickets: </span>' + parsedInfo[i].ticket_status + '</li>';
tourDetails += '</ul>';
tourDetails += '</li>';
});
$('.quick-search-info').append(tourDetails);
});
});
All other classes that have styles assigned to them thus far are working, but for some reason "bld-txt" will not take effect.
I'm using a reset (normalize.css), but there's nothing in it that should be causing this.
Any guidance is greatly appreciated.
Related
How's it going?
I have been trying to put some upvotes functionalities on this web app I have been developing but I am stuck. Please help. The error that it is shown on Chrome's console is:
Uncaught TypeError: Cannot read property 'length' of undefined
at createUpvotesSection ((index):41)
at XMLHttpRequest.ajax.onreadystatechange ((index):343)
But could it be? I have already stated the "createUpvotesSection" and tried to use it in Index.ejs as you can see below:
Index.ejs:
function showNewsfeed() {
var ajax = new XMLHttpRequest();
ajax.open("POST", "/getNewsfeed", true);
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var html = "";
for (var a = 0; a < response.data.length; a++) {
var data = response.data[a];
html += '<div class="central-meta item">';
html += '<div class="user-post">';
html += '<div class="friend-info">';
html += '<figure>';
html += '<img src="' + mainURL + "/" + data.user.profileImage + '" style="width: 45px; height: 45px; object-fit: cover;">';
html += '</figure>';
html += '<div class="friend-name">';
html += '<ins>';
if (data.type == "post")
{
html += '<a href="/user/' + data.user.username + '">';
html += data.user.username;
html += '</a>';
}
else
{
html += data.user.name;
}
html += '</ins>';
var createdAt = new Date(data.createdAt);
var date = createdAt.getDate() + "";
date = date.padStart(2, "0") + " de " + months[createdAt.getMonth()] + ", " + createdAt.getFullYear();
html += '<span>Publicado em: ' + date + '</span>';
html += '</div>';
html += '<div class="post-meta">';
html += '<div class="description">';
html += '<p>';
html += data.caption;
html += '</p>';
html += '</div>';
if (data.image != "") {
html += '<img src="' + mainURL + "/" + data.image + '">';
}
if (data.video != "") {
html += '<video style="height: 359px; width: 100%;" controls src="' + mainURL + "/" + data.video + '"></video>';
}
html += createUpvotesSection(data);
html += '</div>';
html += '</div>'
html += '</div>';
html += '</div>';
}
document.getElementById("newsfeed").innerHTML = html;
}
};
Header.ejs (shorter version):
function createUpvotesSection(data) {
var isUpvoted = false;
for (var b = 0; b < data.upvoters.length; b++) {
var upvoter = data.upvoter[b];
if (upvoter._id == window.user._id) {
isUpvoted = true;
break;
}
}
var html = "";
html += '<div class="we-video-info">';
html += '<ul>';
html += '<li>';
var className = "";
if (isUpvoted) {
className = 'upvote';
} else {
className = "none";
}
html += '<span class="' + className +'" onclick="toggleUpvotePost(this);" data-id="' + data._id +'">';
html += '<i class="ti-thumb-up"></i>';
html += '<ins>' + data.upvoters.length + '</ins>';
html += '</span>';
html += '</li>';
html += '<li>';
html += '<span class="comment" title="Comments">';
html += '<i class = "fa fa-comments-o"></i>';
html += '<ins>' + data.comments.length + '</ins>';
html += '</span>';
html += '</li>';
html += '<li>';
html += '<span class="share" onclick="sharePost(this);" data-id="' + data._id +'">';
html += '<i class="ti-share"></i>';
html += '<ins>' + data.shares.length + '</ins>';
html += '</span>';
html += '</li>';
html += '</ul>';
html += '</div>';
return html;
}
According to the error that Cannot read property 'length' of undefined on node.js that means the variable that you try to get length of it is undefined variable. try to define that first before you take the length
I am trying to create an ID to use as a selector for a modal that I will then be able to access the display properties.
$.ajax({
url: 'https://randomuser.me/api/?results=12',
dataType: 'json',
success: function(data) {
console.log(data);
employees = data.results;
$.each(employees, function (i, employee) {
newHTML += '<div id="' + i + '" class="container">';
newHTML += '<div class="employee-img-container">';
newHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
newHTML += '</div>';
newHTML += '<div class="employee-info-container">';
newHTML += '<h3 class="employee-name">' + employee.name.first + ' ' + employee.name.last + '</h3>';
newHTML += '<p class="employee-email">' + employee.email + '</p>';
newHTML += '<p class="employee-location">' + employee.location.city + ', ' + employee.location.state + '</p>';
newHTML += '</div></div></div></div>';
employeeArr.push(employee);
modalHTML += '<div id="modal' + i + '" class="modal">';
modalHTML += '<div class="modal-content">';
modalHTML += '<div class="modal-header">';
modalHTML += '<span class="close">×</span>';
modalHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
modalHTML += '<h2 class= emp-modal-name>' + employee.name.first + ' ' + employee.name.last + '</h2>';
modalHTML += '</div';
modalHTML += '<div class="modal-body">';
modalHTML += '<p>Employee Info</p>';
modalHTML += '</div></div></div>';
modalArr.push(employee);
});
$('.grid-container').html(newHTML);
$('.modal-container').html(modalHTML);
$('.container').on('click', function (event) {
console.log(event.currentTarget.id);
let newId = '#modal' + event.currentTarget.id;
let displayModal = $(newId)
let display = document.querySelector(newId);
//displayModal.style.display = 'block';
console.log(displayModal);
console.log(display);
console.log(newId);
});
}
});
When I log the event.currentTarget.id I get a number, and I can also create a string that I want to use as a selector. I can't figure out how to use it as the actual sector though. Not sure if I need to use an if statement to compare it to the id of the modal class that i want to display. Thanks!
Try like this
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
I am working on my codepen rss feed for my website. I am having small issue limiting the results.
Currently displays over 10 results in the rss feed. But I would like to know the best way to limit results to 5
Question: How could I limit the results of my rss feed to 5 only.
Codepen Example
<script type="text/javascript">
$(document).ready(function(){
url = 'http://codepen.io/riwakawebsitedesigns/public/feed/';
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
error: function(){
alert('Unable to load feed, Incorrect path or invalid feed');
},
success: function(xml){
var postlist = xml.responseData.feed.entries;
var html = '<ul class="list-unstyled">';
$.each(postlist, function(idx, data) {
html += '<li>';
html += '<h3 class="codepen_feed_title">' + data.title + '</h3>';
html += '<a href="' + data.link + '" target="_blank">';
html += '<span class="codepen_feed_content">Click Here To View It!</div>';
html += '</a>';
html += '</li>';
});
html += '</ul>';
$(".codepen_feed").append(html);
}
});
});
</script>
Use a return value for your each loop
$.each(postlist, function(idx, data) {
var title = data.title;
html += '<li>';
html += '<h3 class="codepen_feed_title">' + data.title + '</h3>';
html += '<a href="' + data.link + '" target="_blank">';
html += '<span class="codepen_feed_content">Click Here To View It!</div>';
html += '</a>';
html += '</li>';
return idx < 4;
});
This is my jquery code to read "test.xml".
var htmldata = 0;
$.get('test.xml', function(data) {
xml_data = $(data);
xml_data.find("order").find("customer").each(function(k, v) {
divClass = inactiveClass;
spanClass = inactiveIcon;
htmldata += '<div class="' + divClass + '"><span class="' + inactiveIcon + '"></span>' + $(this).text() + '</div>';
});
});
alert(htmldata);
In this code I tried to parse test.xml and creating one htmldata. But I am not getting that data out side. If I tried to alert its showing null. How can I take that value outside. Please help me.
function parseXMLdata(data, callback)
{
$.get('test.xml', function(data) {
xml_data = $(data);
xml_data.find("order").find("customer").each(function(k, v) {
divClass = inactiveClass;
spanClass = inactiveIcon;
var htmldata += '<div class="' + divClass + '"><span class="' + inactiveIcon + '"></span>' + $(this).text() + '</div>';
callback(htmldata);
});
});
}
parseXMLdata(data, window.alert);
Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David
Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.