Develop Reference

fix variable increment in javascript

I'm coding a wordpress theme and I want to increment a load more button.
I'm not using wordpress always and this is the first time I've this problem with a javascript variable. The variable pull_page in fact will not increment and every time the script will run it will fetch only two pages. Is there any error in the code, and how I can fix it?
$('#load-more').on('click', function(e){
e.preventDefault();
var pull_page = 1;
var jsonFlag = true;
if(jsonFlag){
pull_page++;
$.getJSON("/beta/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
if(data.length){
$.each(data, function(i, item){
var html = '<div class="card">';
html += '<a href="'+ item.permalink +'">';
html += '<img class="card-img-top w-100" src="'+ item.featured_img_src +'" id="case-studies" />';
html += '<div class="overlay"><h4 class="text-center" id="client-name">'+ item.title +'</h4></div>';
html += '</a>';
html += '</div>';
$('body').find('.card-columns')
.append(html);
});
}
else{
jsonFlag = false;
}
}).done(function(data){
if(data.length >= 4){
jsonFlag = true;
}
else{
jsonFlag = false;
}
});
}
}); // end load more

You're resetting pull_page to 1 each and every time the load more button is clicked.
Move it outside.
var pull_page = 1;
$('#load-more').on('click', function(e) {
...

Slick Lightbox not loading images fetched after an AJAX call

I am currently using the slick-lightbox plugin https://github.com/jongacnik/slick-lightbox. I am trying to load content into it dynamically after an AJAX call.But the carousel does not get updated .
$('.slider-lightbox').on('click', function (e) {
var pageKey = 2;
var itemId = '562A4B65A09A4215927346F8ECF67759';
var url = '/api/threesixtyviewapi/GetAllCommunityGalleryAjax';
$.post(url, { page: pageKey, itemId: itemId }, function (data, status) {
var pageNumber = data.page;
var newsItems = data.items;
if (data.length > 0) {
var imgGalleryBlock = '';
for (i = 0; i < data.length; i++) {
var imageUrl = data[i].ImageUrl;
var videoUrl = data[i].VideoUrl;
var thumbnail = data[i].VideoThumbnailUrl;
var isVideo = data[i].Is360View;
var pendingCount = data[i].pendingCount;
if (isVideo == true) {
imgGalleryBlock += '<li class="video active"><a href=';
imgGalleryBlock += videoUrl;
imgGalleryBlock += ' width="400px" target="_blank"><img src=';
imgGalleryBlock += thumbnail;
imgGalleryBlock += ' alt=""/><img class="play-btn" src="/images/video-icon.svg"></a></li>';
}
else {
imgGalleryBlock += '<li class="image active"><a href=';
imgGalleryBlock += imageUrl;
imgGalleryBlock += ' width="400px" target="_blank"><img src=';
imgGalleryBlock += imageUrl;
imgGalleryBlock += ' alt=""/></a></li>';
}
}
$('ul.slider-lightbox').append(imgGalleryBlock);
window.onload = timedRefresh(000);
pageKey++;
$('.img-gallery-main-btn').attr('data-key', pageKey);
if (pendingCount <= 6) {
$('.img-gallery-main-btn').hide();
}
}
else {
$('.img-gallery-main-btn').hide();
}
});
});
The problem with the plugin is that there is not a 'refresh' method so though I am able to load the content in the DOM,it does not reflect in the carousel.
Please help.

I think you should dispose and after initialize slick with your selector when your ajax done.
$('WhateverYourSelector').slickLightbox({
itemSelector: 'ExampleIdOrClassOrNameOrBlaBla'
});
Or
$('WhateverYourSelector').slick();

How to retrieve a image thumbnail post only using Blogger API?

I was Trying to Retrieve the first image only using Blogger API for my blog Chanakya Niti In Hindi. But My callback script didn't return any image thumbnail. here's my code:
<div id='content'></div>
<script>
function handleResponse(response) {
var post_number = Object.keys(response.items).length; //number of posts
for (i=0; i<post_number; i++) {
document.getElementById("content").innerHTML += "<div class='posts'><h1>" + response.items[i].title + "</h1>" + response.items[i].content + '</div>';
}
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels=Guides&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA"></script>
I Tried code below to retrive image but it didn't work:
response.items[i].img.url.replace('s1600/','s1600/');

Here's the Answer of my question:
<div id='content'></div>
<script>
function handleResponse(response) {
const parser = new DOMParser();
response.items.forEach(item => {
const html = parser.parseFromString(item.content, 'text/html');
const img = html.querySelector('img');
const url = img ? img.src : '';
document.getElementById("content").innerHTML += `<div class='posts'><h1>${item.title}</h1><img src="${url}"><br/></div><a href='${item.url}'>Continue Reading</a>`;
})
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels=Guides&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA"></script>

Increment javascript variable function onclick

This the page I'm working on:
http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html
When you click on a shaded area the chart associated with the area pops up. What I'm trying to figure out is how to get the "Next PSA" link at the bottom to advance the chart in the popup to the next PSA every time you click it. I've figured out how to get it to advance by one PSA, but can't get it past that one. You'll see if you click on the link.
I have a function (called replace) that replaces the image source for the chart with a link to the next PSA number up. However, I can't figure out how to get it to increment. I tried PSA++ and PSA=PSA1 but neither of them work.
Here's my code:
<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function overlay(a) {
PSA = a.id;
var numeric = a.id.replace('GB', '');
PSAnum = Number(numeric)
PSA1 = PSAnum + 1;
nextPSA = ('0' + PSA1).slice(-2);
var overlayContent = '';
overlayContent += '<div id="overlay">';
overlayContent += '<div>';
var imgsrce = '';
imgsrce += 'Charts/WebCharts/GB';
imgsrce += numeric;
imgsrce += '/ERCGraph.PNG';
overlayContent += '<img id="chartimage" src="';
overlayContent += imgsrce;
overlayContent += '" />';
overlayContent += '<br /><b><h1> Close</b></h1>';
overlayContent += '<b><h1> Next PSA</b></h1>';
overlayContent += '</div>';
overlayContent += '</div>';
$("#overlay").replaceWith(overlayContent);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (el.style.visibility == "visible") {
//el.style.visibility="hidden";
}
} //end of overlay function
function replace(a) {
image = document.getElementById('chartimage');
console.log(image.src);
console.log(PSA);
image.src = 'Charts/WebCharts/GB';
image.src += nextPSA;
image.src += '/ERCGraph.PNG';
PSA++;
console.log(PSA);
} //end of replace function
$('.overlay-bg').click(function() {
closePopup();
});
function closePopup() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
}
$(function() {
$.get("getDate.php", function(data) {
document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
});
});
var file;
file = 'GB_PSAdata_Real.js';
$.getJSON(file, function(events) {
var gbname = Object.keys(events);
var divContent = '';
divContent += '<div id="map">';
divContent += '<map name="mapmap">';
for (i = 0; i < gbname.length; i++) {
var PSA = (gbname[i]);
JSONcoords = events[PSA][0].Coords;
JSONcoordString = JSONcoords.toString();
divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
divContent += JSONcoordString;
divContent += '" onclick="overlay(this)">';
// console.log(divContent)
}
divContent += '</map>';
divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
divContent += '</div>';
$("#map").replaceWith(divContent);
//$("#overlay").replaceWith(overlayContent);
;
})
</script>
</head>
<div id="overlay">
</div>
<body>
<div id="header">
<img src="PSlogo.png" style="height:75px">
<img src="GBlogo.png" style="height:75px">
<span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
</div>
<div id="main">
<div id="map"></div>
<div id="timestamp">RAWS Observations Updated</div>
<div id="legend">
<img src="LegendFull2.png" id="legendIMG">
</div>
</div>
</body>
</html>

You need to move the code that increments the number into the replace() function, so it gets executed each time replace() is called. Currently it is executed only once when the overlay() function is called.
First, explicitly declare a global variable (outside of any function):
var currentPSANum = null;
Place this line inside the overlay() function:
currentPSANum = Number(a.id.replace('GB',''));
Then use the following for the replace() function:
function replace(a) {
currentPSANum++;
var image = document.getElementById('chartimage');
image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}

jQuery read from text file in my web folder and append to div

I'm trying to read values ("img1.jpg", etc.) from a text file on my server and append to a div to create a slide show.
The only catch is I need the first "slide" to have a class of .active applied.
Here's how my text file reads:
Here's the div I want to append to looks like:
<div class="carousel-inner">
<!-- slide -->
<div class="active item slide3 animated fadeInUpBig">
<img src="img1.jpg" />
</div>
<!-- slide -->
<div class="item slide3 animated fadeInUpBig">
<img src="img2.jpg" />
</div>
</div>
Here's what I tried:
$(function () {
var file = "gallery.txt"; // gallery.txt PATH
$('<div />'.load(file, function(data){ // dummy DIV to hold data
var line = data.split('\n');
var NofImages = line.length -1;
for( i=0; i < NofImages; i++ ){
image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
$(".carousel-inner").append("<div class='active item slide3 animated fadeInUpBig'><img src='+ image +' /></div>");
}
}
});

$(function () {
var file = "gallery.txt"; // gallery.txt PATH
$('<div />').load(file, function(data){ // dummy DIV to hold data
var line = data.split('\n'),
NofImages = line.length -1,
imageURL = '';
for( i=0; i < NofImages; i++ ){
imageURL = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
$(".carousel-inner").append("<div class='item slide3 animated fadeInUpBig'><img src='"+ imageURL +"' /></div>");
}
// NOW ADD THE .active TO FIRST ONE
$('.carousel-inner').find('.item').eq(0).addClass('active');
});
});
Difference between $.ajax() and $.get() and $.load()

so add a class if you are at zero
var activeClass = i==0 ? "active " : "";
$(".carousel-inner").append("<div class='" + activeClass + "item...

Try this:
$.get("gallery.txt").done(function(response) {
var lines = response.split("\n");
for (var i = 0; i < lines.length; i++) {
var fragments = lines[i].split("|");
var html = "<div class='item animated fadeInUpBig slide3'><img src='" + fragments[2] + "' /></div>";
$(".carousel-inner").append(html);
}
$(".carousel-inner .item").eq(0).addClass("active");
});