We Keep Coding

Getting img urls and put it on for loop

**I can get the values of grade and iconPath(url pic). The problem is on for loop, all the picture(url picture) print on 1 card, Anyone can help me how to print images in different card. Thank you **
document.getElementById('cardinfo').innerHTML +=
`<div class="card">
<div class="card-front">
<div class="image-container">
<img class="img-flip" src="image/class-arbalist.png"/></br>
</div>
</div>
<div class="card-back">
<div class="image-container" id="img-link">
`
for (var i = 0; i < grad.length; i++) {
var grade = data.data.inven[i].grade;
var grade1;
if (grade == 4 ){
var iconPath = data.data.inven[i].iconPath;
document.getElementById('img-link').innerHTML +=`
<img class="img-skill2" src="${iconPath}"/>`
}else if(grade == 5){
var iconPath = data.data.inven[i].iconPath;
document.getElementById('img-link').innerHTML +=`
<img class="img-skill3" src="${iconPath}"/>`
}else{
}
}
`
</div>
</div>
</div>`
;
Card. Only first card got all the images not the second card
**Anyone can help me how to put output images(urlpic) in different cards. Thank you **

Repeating Popup IDs

I am pulling data from MySQL database and displaying user posted content on the page. A UserPost consists of data from 2 tables, UserTable and PostTable.
When querying from both tables I have the correct information displayed until I click the edit button. Then the queried data inside the popup always matches the first element of the query. I believe this is because the popup has an ID. I tried using PHP data to have multiple buttons with different IDs but I am still getting the same popup content correlating with the first queried data. I have highlighted the lines in question with "<-- PROBLEM HERE**********************************"
Thank you.
PHP Function Calling All User Posts
function homePosts($conn) {
$UserID = $_SESSION['UserID'];
$userPostSQL = "SELECT * FROM PostTable WHERE UserID = ? AND SectionID = 1 ORDER BY Date DESC";
$userPostSTMT = $conn->prepare($userPostSQL);
$userPostSTMT->bind_param("s", $UserID);
$userPostSTMT->execute();
$userPostRESULT = $userPostSTMT->get_result();
if (mysqli_num_rows($userPostRESULT) != 0) {
// User Posts Exist
while ($userPostROW = $userPostRESULT->fetch_assoc()) {
$userInfoSQL = "SELECT UserName, ProfilePicture FROM UserTable WHERE UserID = ?";
$userInfoSTMT = $conn->prepare($userInfoSQL);
$userInfoSTMT->bind_param("s", $UserID);
$userInfoSTMT->execute();
$userInfoRESULT = $userInfoSTMT->get_result();
if (mysqli_num_rows($userInfoRESULT) != 0) {
// User Info Exists
while ($userInfoROW = $userInfoRESULT->fetch_assoc()) {
$Date = $userPostROW['Date'];
$Text = $userPostROW['Text'];
$PostID = $userPostROW['PostID'];
$UserName = $userInfoROW['UserName'];
$ProfilePicture = $userInfoROW['ProfilePicture'];
echo '
<div class="popup" id="popup-'.$PostID.'"> <-- PROBLEM HERE $PostID remains the same throughout the loop**********************************
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Edit Post</h1>
<p>'.$Text.'</p>
<p>This Post ID keeps the value of the first loop iteration'.$PostID.'</p>
</div>
</div>
<div class="postBox">
<img class="postprofilepicture" src="../profilepictures/'.$ProfilePicture.'">
<p class="postusername">'.$UserName.'<p>
<p class="posttime">'.date('M jS, Y h:ia',strtotime($Date)).'<p>
<p>'.$Text.'</p>
<p>This Post ID Changes through for every new row'.$PostID.'<p>
<br>
<div class="dropdown">
<button onclick="myFunction(this)" class="dropbtn">···</button>
<div Id="myDropdown" class="dropdown-content">
View
Like
Save
Edit
<button onclick="togglePopup()">Popup</button>
</div>
</div>
</div>
<br>
<script>
function togglePopup(){
document.getElementById("popup-'.$PostID.'").classList.toggle("active"); <-- PROBLEM HERE $PostID remains the same throughout the loop**********************************
}
function myFunction(e) {
e.parentNode.querySelector(".dropdown-content").classList.toggle("show")
}
window.onclick = function(event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
}
</script>
';
}
}
}
}
$userPostSTMT->free_result();
$userPostSTMT->close();
$userInfoSTMT->free_result();
$userInfoSTMT->close();
}

I needed to create a $Count variable that would assign a number for each post instead of using a random postid. I could then call element by classname using the count number to call an array of all the divs with a specific class name.
$Count = 0;
<div class="popup" class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('.$PopCount.')">×</div>
<h1>Edit Post</h1>
<p>'.$Text.'</p>
<p>This Post ID keeps the value of the first loop iteration'.$PostID.'</p>
</div>
</div>
<div class="postBox">
<img class="postprofilepicture" src="../profilepictures/'.$ProfilePicture.'">
<p class="postusername">'.$UserName.'<p>
<p class="posttime">'.date('M jS, Y h:ia',strtotime($Date)).'<p>
<p>'.$Text.'</p>
<p>This Post ID Changes through for every new row'.$PostID.'<p>
<br>
<div class="dropdown">
<button onclick="myFunction(this)" class="dropbtn">···</button>
<div Id="myDropdown" class="dropdown-content">
View
Like
Show
Edit
<button onclick="togglePopup('.$PopCount.')">Popup</button>
</div>
</div>
</div>
<br>
<script>
function togglePopup(PopCount){
document.getElementsByClassName("popup")[PopCount].classList.toggle("active");
}
function myFunction(e) {
e.parentNode.querySelector(".dropdown-content").classList.toggle("show")
}
window.onclick = function(event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
}
</script>
';
$PopCount++;

Pagination will show first page, but not second or third

I'm trying to set up pagination for some blog posts. It works with the first page, and I check my tests to see if the loop is actually populating the "postsToDisplay" array (which it does), but when I click the second-page button, nothing shows up. I can click the first-page button and it brings the first page of posts back up. For some reason, it won't push the new arrays to the page though.
I've tried adding and taking away tests to see what is working. The array is definitely being populated, and the loop is going through the correct "i" values just fine.
Here's some edited code to reproduce my problem:
//Use this as "scripts.js"
$(document).ready(function() {
var realBlog = document.getElementsByClassName("realBlog");
var postsPerPage = 2;
var $pagination = $(".pagination")
function showPage(page) {
$(realBlog).hide();
let postsToDisplay = [];
for (let i = 0; i < realBlog.length; i += 1) {
if (i >= page * postsPerPage && i <= page * postsPerPage + postsPerPage - 1) {
postsToDisplay.push(realBlog[i]);
console.log(i); //Test to see if the loop is running the correct numbers
$(postsToDisplay[i]).show();
}
}
console.log(postsToDisplay); //Test to see if the array is full
return postsToDisplay;
}
showPage(0);
function createPageNumbers() {
let createUl = document.createElement("ul");
createUl.className = "pageNumbers";
for (let i = 1; i <= Math.ceil(realBlog.length/2); i += 1) {
let createLi = document.createElement("li");
let createA = document.createElement("a");
createA.href = "#" + i;
createA.textContent = i;
createLi.className = "pageButton";
createLi.append(createA);
createUl.append(createLi);
$(".pagination").append(createUl);
createA.addEventListener("click", () => {
showPage(i-1);
});
}
}
createPageNumbers();
});
//Use this as index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="pagination"></div>
</body>
</html>
Page 1 should show posts 1 and 2, page 2 should show post 3.

Alright, I found the answer, and of course, it's a silly mistake. I have this little snippet: $(postsToDisplay[i]).show();
I'm not sure why I'm trying to show each 'i' when I can just show the whole array... So the fix is $(postsToDisplay).show();

Ajax for slideshow not working

I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.
PHP/HTML
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div class='pic'>
<img src= " . $dir . $pic_array[$index] . " />
</div>
<div class='caption'>
<p id='title'>$titles[$index]</p>
<p id='des'>$descriptions[$index]</p>
</div>
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</html>";
$conn->close();
?>
Javascript
$(function () {
var arrPix = $('#json_pics').val();
var arrPix = $.parseJSON( arrPix );
var index = 0;
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $next = $slides.find('.next');
var $previous = $slides.find('.previous');
var $caption = $slides.find('.caption');
var slide_length = $slide.length;
$slider.hover(function() {
$caption.css('opacity', '1');
$next.css('opacity', '1');
$previous.css('opacity', '1');
}, function() {
$caption.css('opacity', '0');
$next.css('opacity', '0');
$previous.css('opacity', '0');
}
);
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
});
EDIT: Should I be using load instead?

In an endeavor to get you a solution that
Uses AJAX
and uses PHP,
I would suggest something like the following.
'getpic.php'
Summary: (A new file... used to simplify the process of getting a new picture.)
Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.
$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;
function priWrap($index) {
/*
This handles the actual generating of the <img> tag as well as
the caption and such.
$index refers to a specific picture in $pix_array.
*/
global $pix_array, $dir, $titles, $descriptions;
$arr_len = count($pix_array);
if ($index < 0) {
$index = $arr_len-1;
}
else if { $index >= $arr_len) {
$index = 0;
}
echo "<div class='pic'>
<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
</div>
<div class='caption'>
<p id='title'>" . $titles[$index] . "</p>
<p id='des'>" . $descriptions[$index] . "</p>
</div>";
}
#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
$index = intval($_GET['index']);
priWrap($index);
}
Changes to 'gallery_.php'
The code you posted should now look like this:
require_once('getpic.php');
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div id='picWrapper'>";
echo priWrap($index) . "
</div><!--End #picWrapper-->
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</body>
</html>";
$conn->close();
?>
Your javascript needs changed, too.
var index = 0;
should be
var index = parseInt($(".pic img").attr("data-ind"));
and
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
should be
$next.click(function() {
index++;
$("#picWrapper").load("getpic.php?index=" + index,
/*Add callback so that index is updated properly.*/
function () {
//update our index
index = parseInt($(".pic img").attr("data-ind"));
//show our caption stuff...
$(".caption").css('opacity', '1');
}
);
});

Javascript and XML innerHTML naming

I'm trying to get my a tags to display the name from a xml file, I currently have the link changing color and text when it is triggered, but I would like it to get its original state name from a xml file.
I am only interested in the Input links here.
Here is the html side of things:
<div id="status">
<div id="loading" style="display:none">Error:<br />Connection to EMACSYS board was lost.</div>
<div id="display">
<p></span></p>
<p>Inputs:<br /><span style="font-size:20pt"></p>
<a id="btn0">• Input 1</a><br>
<a id="btn1">• Input 2</a><br>
<a id="btn2">• Input 3</a><br>
<a id="btn3">• Input 4</a><br>
<a id="btn4">• Input 5</a><br>
<a id="btn5">• Input 6</a><br>
<a id="btn6">• Input 7</a><br>
<a id="btn7">• Input 8</a><br>
<a id="btn8">• Input 9</a><br>
<a id="btn9">• Input 10</a><br>
<a id="btn10">• Input 11</a><br>
<a id="btn11">• Input 12</a><br>
<a id="btn12">• Input 13</a><br>
<a id="btn13">• Input 14</a><br>
<a id="btn14">• Input 15</a><br>
<a id="btn15">• Input 16</a><br>
</span> </p>
<p>Canopy Temperature: <a id="analogue0">?</a>
<br /><span style="font-size:20pt">
<a id="pot0">›</a>
<a id="pot1">›</a>
<a id="pot2">›</a>
<a id="pot3">›</a>
<a id="pot4">›</a>
<a id="pot5">›</a>
<a id="pot6">›</a>
<a id="pot7">›</a>
<a id="pot8">›</a>
<a id="pot9">›</a>
</span></p>
<p>Engine Heater Temperature: <a id="analogue1">?</a> (30-90 normal)
<br /><span style="font-size:20pt">
<a id="1pot0">›</a>
<a id="1pot1">›</a>
<a id="1pot2">›</a>
<a id="1pot3">›</a>
<a id="1pot4">›</a>
<a id="1pot5">›</a>
<a id="1pot6">›</a>
<a id="1pot7">›</a>
<a id="1pot8">›</a>
<a id="1pot9">›</a>
</span></p>
</div>
Which all seems ok and works fine when an input is triggered, but where it says Input 1, Input 2, etc. i would like it to load from this xml file the inputname tags
<response>
<input0>~Inputs(1)~</input0>
<inputname0>Mains OK</inputname0>
<input1>~Inputs(2)~</input1>
<inputname1>Water Heater</inputname1>
<input2>~Inputs(3)~</input2>
<inputname2>Genset Standby</inputname2>
<input3>~Inputs(4)~</input3>
<inputname3>Genset Running</inputname3>
<input4>~Inputs(5)~</input4>
<inputname4>Common Alarm</inputname4>
<input5>~Inputs(6)~</input5>
<inputname5>Genset Shutdown Alarm</inputname5>
<input6>~Inputs(7)~</input6>
<inputname6>Genset Fuel Tank 1/2</inputname6>
<input7>~Inputs(8)~</input7>
<inputname7>Genset Fuel Tank 1/4</inputname7>
<input8>~Inputs(9)~</input8>
<inputname8>Genset Fuel Tank Low</inputname8>
<input9>~Inputs(10)~</input9>
<inputname9>option</inputname9>
<input10>~Inputs(11)~</input10>
<inputname10>option</inputname10>
<input11>~Inputs(12)~</input11>
<inputname11>Bulk Fuel Full</inputname11>
<input12>~Inputs(13)~</input12>
<inputname12>Bulk Fuel 3/4</inputname12>
<input13>~Inputs(14)~</input13>
<inputname13>Bulk Fuel 1/2</inputname13>
<input14>~Inputs(15)~</input14>
<inputname14>Bulk Fuel 1/4</inputname14>
<input15>~Inputs(16)~</input15>
<inputname15>Bulk Fuel Low</inputname15>
<output0>~Outputs(1)~</output0>
<output1>~Outputs(2)~</output1>
<output2>~Outputs(3)~</output2>
<output3>~Outputs(4)~</output3>
<output4>~Outputs(5)~</output4>
<output5>~Outputs(6)~</output5>
<output6>~Outputs(7)~</output6>
<output7>~Outputs(8)~</output7>
<output8>~Outputs(9)~</output8>
<output9>~Outputs(10)~</output9>
<output10>~Outputs(11)~</output10>
<output11>~Outputs(12)~</output11>
<output12>~Outputs(13)~</output12>
<output13>~Outputs(14)~</output13>
<output14>~Outputs(15)~</output14>
<output15>~Outputs(16)~</output15>
<analogue0>~Analogs(1,T,2,3977)~</analogue0>
<analogue1>~Analogs(2)~</analogue1>
<analogue2>~Analogs(3)~</analogue2>
<analogue3>~Analogs(4)~</analogue3>
<analogue4>~Analogs(5)~</analogue4>
<analogue5>~Analogs(6)~</analogue5>
<analogue6>~Analogs(7)~</analogue6>
<analogue7>~Analogs(8)~</analogue7>
</response>
So for Input 1 it would show Mains OK, then when it was triggered it would show Alert, then back to Mains OK when it was back to normal.
I've tried a few things in the javascript:
<script type="text/javascript">
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
// Check if a timeout occurred
if(!xmlData)
{
document.getElementById('display').style.display = 'none';
document.getElementById('loading').style.display = 'inline';
return;
}
// Make sure we're displaying the status display
document.getElementById('loading').style.display = 'none';
document.getElementById('display').style.display = 'inline';
// Loop over all the LEDs
for(i = 0; i < 16; i++) {
if(getXMLValue(xmlData, 'input'+i) == '1') {
document.getElementById('btn' + i).style.color = '#d00';
document.getElementById('btn' + i).innerHTML = '• ALERT';
}
else {
document.getElementById('btn' + i).style.color = '#090';
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
}
}
// Loop over all the buttons
// Update the POT value
document.getElementById('analogue0').innerHTML =getXMLValue(xmlData,'analogue0');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue0') >val)
document.getElementById('pot' + i).style.color = '#090';
else
document.getElementById('pot' + i).style.color = '#fff';
}
// Update the POT value 2
document.getElementById('analogue1').innerHTML =getXMLValue(xmlData,'analogue1');
val=0;
for(i = 0; i < 10; i++) {
val=val+10;
if(getXMLValue(xmlData, 'analogue1') >val)
document.getElementById('1pot' + i).style.color = '#090';
else
document.getElementById('1pot' + i).style.color = '#fff';
}
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
</script>
but not to any luck. I am pretty sure its to do with the javascript part of it because this is my weakest area.

I believe that you have a syntax error on the following line of code:
document.getElementById('btn' + i).innerHTML = ('• )getXMLValue(xmlData, 'inputname'+i);
On the right-hand side of the equals sign, you have an unterminated string: '•...
I'm not certain of exactly what you're trying to do, but I'm guessing that you want to have a bullet point, followed by the result of getXMLValue(xmlData, 'inputname'+1)
I would suggest that you try replacing this line with the following:
document.getElementById('btn' + i).innerHTML = '•' + getXMLValue(xmlData, 'inputname'+i);
Please let me know how this works for you.