Develop Reference

Appending data fetched by an AJAX call to an already existing list in UI & saving the data fetched to the already saved list in localstorage

I have a page in which I have to show list of data in UI through ajax & append the list data in html table save that list data into Local Storage with Jquery, My question is that I want to implement lazy load in UI such that user clicks a button (Click to view more list), and after clicking the button the ajax calls another list with limit & offset to show more list & append the new list below the existing list in UI and also save the data into local storage along with the existing data present.
My Ajax Call for List Data
var sendingData = {
limit: "50000",
offset: "0"
};
$.ajax({
type: 'POST',
url: "/Common/Item/getselleritems?SellerId=" + userid,
data: sendingData ,
crossDomain: true,
success: function (data)
{
localStorage.setItem("productCode", JSON.stringify(data));
},
error()
{
//Do something
}
});
``
My Html design Function
function showProducts()
{
var productsStorage = localStorage.getItem("productCode");
var products = JSON.parse(productsStorage);
var trHTML = '';
$("table tbody").html("");
$.each(products.Data, function (key, value)
{
trHTML += '<tr>'
+ '<td class="d-md-flex align-items-center">' + '<figure style="' + imgStyle + '"><a href="" title="Photo title" data-effect="mfp-zoom-in">' +
'<img src="' + imgSrc + '" alt="thumb" class="lazy"></a></figure>' +
'<div class="flex-md-column">' +
'<h4 class="package_name" id="itemdescription_' + value.Id + '" onclick = "packageDetails(\'' + value.Price + '\',\'' + value.Name + '\',\'' + value.Description
+ '\',\'' + itemTimeSlotType + '\',\'' + value.ServiceName + '\',\'' + value.PreparationTime + '\',\'' + value.Quantity + '\')" >' +
'<i class="icon_box-selected" style="' + style + '; margin-right:3px"></i>' +
value.Name + '</h4>' +
'<p>' + value.Description + '</p>' +
'<em>' + "Available In: " + itemTimeSlotType + '</em>' + '<br>' +
'<span class="stars_sellerItem" style="' + starStyle + '">' + value.FoodtestAvgRating + ' <i class="icon_star"> </i> ' +
'</span>' +
'</div>' +
'</td>' + '<td style="padding: 0.75rem 0 0.75rem 0;">' +
'<strong id="itemprice_' + value.Id + '">' +
'<i class="fa fa-inr" aria-hidden="true"></i>' + value.Price +
'</strong>' +
'</td>' +
'<td class="options">' +
'<div class="dropdown dropdown-options">' +
'<i class="icon_plus_alt2"></i>' +
'<div class="numbers-row number" id="item2_' + value.Id + '" data-id="' + value.Id + '">' +
'<input type="text" value="1" class="form-control" name="quantity" id="itemvalue_' + value.Id + '" onchange="getval(' + itemId + ');" readonly>' +
'<div class="inc button_inc plus">' + '+' + '</div><div class="dec button_inc minus">' + '-' + '</div>' + '</div>' +
'</td>' + '</tr>';
}
$("table tbody").append(trHTML);
}

How do I append an Image in the DOM from a list using EncodedAbsUrl

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"

bootstrap collapsible not collapsing after expanded

Collapsible did not collapse after being expanded. It is dynamically created in popover.
Here is my jsFiddle:
$('.tooltiphelp').tooltip();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
$('[data-toggle="collapse"]').collapse();
jQuery('document').ready(function() {
jQuery('#accordionRank').on('show hide', function() {
jQuery(this).css('height', 'auto');
});
jQuery('#accordionRank').collapse({ parent: true, toggle: true });
});
var popover = $("#noteListDiv").find('.positive').popover({
trigger: 'click',
placement: 'bottom',
content: function () {
return func_getRank($(this).closest('tr').prop('id'));
}
});
var func_getRank = function (ID) {
var Rankdata = {"Rank":[{"ID": "114077", "NL": "1 of 25", "OF": "1 of 30", "MLB": "1 of 240"}]};
var cshtml;
cshtml = '<div>'
+ '<div class="accordion" id="accordionRank">'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseNL">'
+ 'NL Rank: ' + Rankdata.Rank[0].NL
+ '</a>'
+ '</div>'
+ '<div id="collapseNL" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseOF">'
+ 'OF Rank: ' + Rankdata.Rank[0].OF
+ '</a>'
+ '</div>'
+ '<div id="collapseOF" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseMLB">'
+ 'MLB Rank: ' + Rankdata.Rank[0].MLB
+ '</a>'
+ '</div>'
+ '<div id="collapseMLB" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ '<table id="MiniLeaderboard">'
+ '<thead><tr>'
+ '<th>Rank</th>'
+ '<th>Hitter</th>'
+ '<th>BAVG</th>'
+ '<th>Hits/AB</th>'
+ '</tr></thead>'
+ '<tbody><tr>'
+ '<td>1</td>'
+ '<td>Christian Yelich</td>'
+ '<td>.470</td>'
+ '<td>39-for-83</td>'
+ '</tr>'
+ '<tr>'
+ '<td>2</td>'
+ '<td>Ryan Braun</td>'
+ '<td>.397</td>'
+ '<td>27-for-68</td>'
+ '</tr>'
+ '<tr>'
+ '<td>3</td>'
+ '<td>Adam Eaton</td>'
+ '<td>.370</td>'
+ '<td>37-for-100</td>'
+ '</tr>'
+ '<tr>'
+ '<td>4</td>'
+ '<td>Joey Votto</td>'
+ '<td>.369</td>'
+ '<td>31-for-84</td>'
+ '</tr>'
+ '<tr>'
+ '<td>5</td>'
+ '<td>Edwin Encarnation</td>'
+ '<td>.364</td>'
+ '<td>28-for-77</td>'
+ '</tr></tbody>'
+ '</table>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
;
return $(cshtml).html();
};
Data text should come from JSON.
Here is the issue, please watch this screen cast.
Please help! Thanks in forward for your help.

I've updated my jsFiddle and it's now working. Maybe not a good idea but looks good for now.
$(document).on('click', '.accordion-toggle', function(e) {
$(e.target).css('text-decoration','none');
var $_this = $(e.target).parent().next("div");
var $_inner = $_this.find('div:first-child');
if($_inner.hasClass('in')){
$_inner.removeClass("in");
$_this.removeClass("in");
}
else {
$_inner.addClass("in");
$_this.addClass("in");
}
func_accordionToggle(e.target);
});
var func_accordionToggle = function (e) {
var $_this = $(e).parent().parent();
var id = $(e).parent().next("div").attr('id');
switch(id) {
case 'collapseNL':
$('#collapseOF').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseOF':
$('#collapseNL').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseMLB':
$('#collapseNL').removeClass("in");
$('#collapseOF').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
break;
};
}
Thanks for all the help Guys.

Dynamically created button gets automatically fired

I am creating a dynamic unordered custom List view. In each element, there is one button. I am creating the list elements in the following way:
for (i = 0; i < arrayID.length; i++) {
var listElement = '<li class="has-form">' +
'<div class="row collapse">' +
'<div class="small-1 columns" style="margin: 5px">' +
'<img src="image/twitter.png">' +
'</div>' +
'<div class="small-6 columns small-only-text-center">' +
'<p>' +
'<i>' + arrayText[i] + '</i>' +
'</p>' +
'</div>' +
'<div class="small-3 columns">' +
'<button type="button" class="large-10" onclick="' + onClickViewButton() + '">view</button>' +
'</div>' +
'<div class="small-1 columns">' +
'<input id="checkbox1" type="checkbox">' +
'</div>' +
'</div>' +
'</li>';
$("#myList").append(listElement);
}
The code for button click is:
function onClickViewButton() {
alert('hello');
}
But unfortunately the when the page is loading, the button click is fired and not working on actual button click.
Please help.

Where you have:
onclick="'+onClickViewButton()+'"
you need to have:
onclick="onClickViewButton()"
instead.
Your current code calls the onClickViewButton function in your declaration, when what you really want to do is to just use it as a function reference so it gets called later on onclick.

Try with this snippet:
If you concat function name with parenthesis then it will be treated as function execution hence function will get called.
for (i = 0; i < arrayID.length; i++) {
var listElement = '<li class="has-form">' +
'<div class="row collapse">' +
'<div class="small-1 columns" style="margin: 5px">' +
'<img src="image/twitter.png">' +
'</div>' +
'<div class="small-6 columns small-only-text-center">' +
'<p>' +
'<i>' + arrayText[i] + '</i>' +
'</p>' +
'</div>' +
'<div class="small-3 columns">' +
'<button type="button" class="large-10" onclick="onClickViewButton()">view</button>' +
'</div>' +
'<div class="small-1 columns">' +
'<input id="checkbox1" type="checkbox">' +
'</div>' +
'</div>' +
'</li>';
$("#myList").append(listElement);
}

Unable to scroll after append

I am trying to fetch data from json file and then attach the data as listitem in a unordered list.
So its getting listed successfully, but I cannot scroll again through it.
Here is how my Javascript looks like:
function ListViewData(allpost) {
allposts = allpost;
$.each(allpost.posts, function (i, row) {
if (row.thumbnail_images) {
$(".list__container").append('<li class="list__item list__item--tappable list__item__line-height list-item-container">' +
'<div class="list-item-main">' +
'<div class="list-item-left">' +
'<img src="' + row.thumbnail_images['full'].url + '" class="thumbnail" width="80" height="80">' +
'</div>' +
'<div class="list-item-right">' +
'<div class="list-item-content">' +
'<span class="list-item-name">' + row.title + ' ' +
'<br/>' +
'<span class="lucent">' +
'<i class="fa fa-map-marker"></i> Paris, France' +
'</span>' +
'</span>' +
'<br/>' +
'<span class="list-item-text" style="margin-top:16px;">Eiffel Tower is the symbol of Paris and named by Gustave Eiffel.' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'<span class="list-item-action" >' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'</li>');
}
$(".list__container").listview();
});
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
}
and here is how my HTML code looks like:
<div class="list list-top">
<ul class="list__container">
//here append data comes in place
</ul>
</div>

Instead of
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
Try
$("html,body").animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);