am a newbie and am stuck with this for a week now, when I click the button to save the book information in session storage and post the book information in an other div, I get this result:the div is written twice, once with the css and the other without it, this my code:( for the whole code git#github.com:yaminecy/html.git)
`
//icons buttons
let bookmark = '<a id="' + items[i].id + '" data-id="' + items[i].id + '" data-title="' + items[i].volumeInfo.title + '" data-description="' + items[i].volumeInfo.description + '" data-author ="' + items[i].volumeInfo.authors + '" data-image ="' + items[i].volumeInfo.imageLinks.smallThumbnail + '"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
let trashicon = '<a class="trash" id="' + items[i].id + '" onclick="return this.parentNode.remove();"><i id="icon2" class="fas fa-trash fa-3x"></i></a>';
//add elements to the book.
const livre = document.createElement("div");
livre.innerHTML = '<div id= "livre">' + bookmark + title + id + author + selectdescription + image + '</div>';
capture.appendChild(livre);
let bookmarkbutton = document.getElementById(items[i].id);
//click bookmark button
bookmarkbutton.addEventListener('click', function () {
var book = '{"id": "' + this.dataset.id + '", "name": "' + this.dataset.title + '", "description" : "' + this.dataset.description + '", "author" : "' + this.dataset.author + '", "image": "' + this.dataset.image + '"}';
favori(book);
});
//create a function for the action click on the button "bookmark"
function favori(item) {
console.log(item);
let pochList = [];
if (sessionStorage.getItem("maPochList") !== null) {
pochList = JSON.parse(sessionStorage.getItem("maPochList"));
}
if (pochList.includes(item)) {
alert("Vous ne pouvez pas ajouter deux fois le même livre!")
}
else {
pochList.push(item);
sessionStorage.setItem("maPochList", JSON.stringify(pochList));
item = JSON.parse(item);
favorite_books.append(setFavori(item));
}
}
// create a function that returns a div with information of favorite books
let bookdiv = document.createElement("div");
favorite_books.appendChild(bookdiv);
function setFavori() {
return bookdiv.innerHTML= '<div id= "livre">' + trashicon + title + id + author + selectdescription + image + '</div>';;
}
}
}
}
))
}
//Show Favorites
let pochList = [];
if (sessionStorage.getItem("maPochList") !== null) {
pochList = JSON.parse(sessionStorage.getItem("maPochList"));
}
for (var k in pochList) {
var item = JSON.parse(pochList[k]);
bookdiv.append(setFavori(item));
}
} `
Related
i want output in product details column. I want get all variant of product in dynamic way, but variant show only in static not dynamic. I want get all variant of product in dynamic way, but variant show only in static not dynamic.
I want to set dynamic data in this div:
const productTitle = '<div id="product-description" name="id"> </div>'
JS code:
function fetchCart() {
$.ajax({
type: 'GET',
url: '/cart.js',
dataType: 'json',
success: function(cart) {
if (cart.item_count === 0) {
console.log("cart empty");
// document.getElementById("cart-empty-message").innerHTML = ("Your cart Is Empty!");
}
else {
renderCart(cart);
console.log(cart.total_price)
document.getElementById("maintotal").innerHTML = cart.total_price
}
},
});
}
var selectCallback = function(variant, selector) {
console.log(selector.product.variants)
}
new Shopify.OptionSelectors('product-description', {
product: {
{
product | json
}
},
onVariantSelected: selectCallback,
enableHistoryState: true
});
function renderCart(cart) {
clearCartDrawer();
cart.items.forEach(function(item, index, selectCallback) {
let a = item;
const productImage = '<img class="ajax-cart-item__image" src="' + item.image + '" >';
const productTitle = '<div id="product-description" name="id"> </div>';
const productQuantity = '<div class="ajax-cart-item__quantity"> <div class="counter"><button class="down" data-id=' + item.id + ' onClick="decreaseCount(event, this)">-</button><input type="text" class="vln" value="' + item.quantity + '" min="0" /><button class="up" data-id=' + item.id + ' onClick="increaseCount(event, this)">+</button></div></div>'
const productIcon = '<i data-id="' + item.variant_id + '" class="fa-solid fa-trash"></i>'
const productPrice = '<div class="ajax-cart-item__price">' + item.line_price + '</div>'
const tbodyAppend = $('.mainpartclass').append('<tr> <td>' + productImage + '</td> <td>' + productTitle + '</td> <td>' + productQuantity + '</td><td>' + productIcon + '</td> <td>' + productPrice + '</td><tr>')
tbodyEle = tbodyEle + tbodyAppend;
});
}
I have 2 lists with 5 columns; one has Title, Question, Attorneys, ID, and attorneyPic. This last one is looking into an image list. I created a webpart for this so the the actual webpart looks like this.
<script type="text/javascript">
apiUrl = "/Legal/Attorneys/_api/web/lists/GetByTitle('attorneysBio')/items$select=*,EncodedAbsUrl,attorneysPic/Title&$expand=attorneysPic/Id";
topicsTitle = '';
title = 'TITLE HERE';
</script>
The javascript code looks like this
var buildCards = function () {
if (filterTopic.length !== 0) {
for (i = 0; i < filterTopic.length; i++) {
var accID2 = accID.replace(/\s/g, '');
var faqItems = filterTopic[i]
var headerID = "heading" + faqItems.ID
var cardBodyID = "collapse" + faqItems.ID
var cardTitle = faqItems.Title
var cardBody = faqItems.Question
var attorneyPics = faqItems.attorneysPic.EncodedAbsUrl
console.log(attorneyPics)
var cardBuild = '<div class="card">' +
'<div class="card-header pb-1 pl-0" role="tab" id="' + headerID + '">' +
'<a class="collapsed" data-toggle="collapse" data-parent="#' + accID2 + '" href="#' + cardBodyID + '" aria-expanded="false" aria-controls="' + cardBodyID + '">' +
'<h5 class="mb-0 font-thin">' + cardTitle + '<span class="rotate"></span></h5>' +
'</a>' +
'</div>' +
'<div id="' + cardBodyID + '" class="collapse" role="tabpanel" aria-labelledby="' + headerID + '" data-parent="#' + accID + '">' +
'<div class="row"><div class="col-md-3"><img src="'+attorneyPics+'" class="img-responsive"></div>' +
'<div class="col-md-9"><div class="card-body py-1 pl-0"><p>' + cardBody + '</p></div></div></div>' +
'</div>' +
'</div>'
$(".accordion").append(cardBuild);
};
} else {
var cardBuild = '<h4>There are no results matching your search.</div>'
$(".accordion").append(cardBuild);
}
What is happening is that the url given is the one from the actual list and not from the list items "https://browardauthor/Legal/Attorneys/Lists/attorneysBio/1_.000"
I have six static html questions and then 3-4 questions being generated by JSON dynamically based upon a form choice made on a page before. What I'm trying to do is generate the questions, then create a progress bar based on the final number of questions created. Where I'm having trouble is using the jQuery when done method after my each loop. It is firing after the first iteration instead of the last. I have tried populating an array "Qs" and passing the array, after reading some other posts, but what I have hasn't worked. I would really like to segment my code and clean it up as much as possible, so I'm trying to stay away from nesting it.
var Qs = [];
var generateQs = function (){
var $dept = sessionStorage.getItem("sFGeneralDepartment1");
var $qWrapper = $("#assessmentTool");
$.getJSON("js/dept-questions.json", function(data) {
var key = $dept;
var vals = [];
switch(key) {
case 'Information technology':
vals = data.IT;
break;
case 'Finance':
vals = data.FIN;
break;
case 'Human resources':
vals = data.HR;
break;
case 'Marketing':
vals = data.MKT;
break;
default:
vals = data.OT;
break;
}
$.each(vals, function(index, value) {
var $cleanID = (value.qID).replace(/q/g, '');
$qWrapper.append('<div class="question-container rangeIcon disabled" id="' + value.qID + '"><p>Question ' + $cleanID +'</p> <h4>' + value.questionText + '</h4><ul class="answer-container"></ul></div>');
$.each(value.answers, function(i, answer) {
var $aID = answer.aID;
var $radioBtn = '<div class="radioBtn"><span class="radioBtnInner"></span></div>';
$('.question-container#' + value.qID + ' .answer-container').append('<li class="survey-item"><div class="icon-holder" id="' + $aID + '"><img src="img/' + answer.iconFileName + '" width="' + answer.iconWidth +'" height="'+ answer.iconHeight + '"/></div><input type="radio" id="'+ $aID + '" value="' + answer.pointValue + '"><label for="' + $aID + '" class="radio" data-popover="'+ answer.popoverText + '">' + $radioBtn + '<span class="labelTopText">' + answer.labelTopText + '<span class="divider">/</span></span><span class="labelBottomText">' + answer.labelBottomText + '</span></label></li>');
});
Qs.push($cleanID);
});
console.log('done');
console.log(Qs);
});
};
$.when(generateQs($,Qs)).done(function() {
//create progress bar
console.log('starting');
var qCount = ($('.question-container').length + 1);
var qList = $('#progressBar');
for (var i = 0; i < qCount; i++){
qList.append('<li class="progress-bar-steps" data-item="q' + (i+1) + '">' + '<span class="step-text">' + (i+1) + '</span>' + '</li>');
$('.question-container').each(function (i, value){
var qId = $(this).attr('id');
if ($(this).hasClass("active")) {
$(this).css('opacity','1.0');
$('#progressBar').find("[data-item='" + qId + "']").addClass('active').html('<span class="step-text">' + (i+1) + '</span>');
$('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next disabled-next').html('<span class="step-text">' + (i+2) + '</span>');
} else {
$(this).addClass('disabled');
}
});
}
});
I have issues when trying to display a YouTube file using the fancybox iframe. It displays a small frame with a scroller. I have attached a link to the code. I am using the YouTube API to extract the content.
https://jsfiddle.net/Le98zx1s/
jQuery displaying to html
function getOutput (item)
{
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
var output = '<li>' +
'<div class = "list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class ="list-right">' +
'<h3><a class="fancybox fancybox.iframe"' + 'href="http://youtube.com/embed/' + videoId + '">' + title + '</a></h3>' +
'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description+'</p>' +
'</div>' +
'</li>' +
'<div class ="clearfix"></div>' + ' ';
return output;
}
Annoyingly, the FlickrAPI provides the title and description of a photo in two separate methods. I'm having trouble getting the description of an image from Flickr and was wondering if you could highlight the error in my script.
for (var i = 0; i < photos.photo.length; i++) {
var descPhoto = "https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key="+API_KEY+"&photo_id="+photos.photo[i].id+"&format=json&nojsoncallback=1";
var descArr = [];
$.getJSON(descPhoto, function(data) {
var value = data.photo.description._content;
descArr.push(value);
});
link = 'https://farm' + photos.photo[i].farm + '.static.flickr.com/' + photos.photo[i].server + '/' + photos.photo[i].id + '_' + photos.photo[i].secret + '_';
title = this._htmlEscape( photos.photo[i].title );
var lightbox = "lightbox";
listItems +=
'<li ' + 'class="' + liClassNoDots + '">' +
'<a href="' + link + self.options.imageSize + '.jpg" title="' + title + '" class="' + aClassNoDots + '" target="_blank" data-lightbox="' + lightbox + '">' +
<img alt="' + title + '" src="' + link + self.options.thumbnailSize +'.jpg"/>' +
'<div class="hover-box">' +
'<p>' + descArr[i] + '</p>' +
'<button class="box-button view">View larger</button>' +
'<button class="box-button request">Request</button>' +
'</div>';
'</a>' +
'</li>';
}
Getting the title is fine and I've checked by API string calls and they work in the address bar of my browser.
I've used console.log() and the array is printed out correctly and I'm getting the descriptions. However, in each <p> tag the script is returning undefined in each instance.
However, if I run the script through the debugger the parapgraph tags are populated with the descriptions. Can somebody help?!
i think the problem is in following code::
..
$.getJSON(description, function(desc) {
value = desc.photo[ i ].description._content;
});
the service url returns photo object whereas you are using photo array, change to:
..
$.getJSON(description, function(desc) {
value = desc.photo.description._content;
console.log( value );
});