Let me first state that I am not having any issues with my foreach loop, sending the data with json or my ajax function.
The issue I am having is getting all of the populated .projectCont to show properly.
Background: The user clicks on one of the list items to display images for the category they just selected. I am running a query to pull all of the images from that category. Then, obviously, I want all of the images to appear on the screen.
Issue: There are two scenarios that I am currently facing.
1.
BAD - If I change the following in the each function ( $('#projectsWrap').prepend(this.html); ) to ( $('#projectsWrap').html(this.html); ) - then only one of the images shows (however my console log statements still outputs all of the queried items...more than one.
GOOD - Whenever I click on a new list item, the existing list items go away and the new clicked on list item appears.
2.
BAD - This is basically the exact opposite of the one above. With the code in its current state (using prepend), if I click on a new category list item, the existing queried images are not removed. I tried adding in the following code to take care of this, but it seems to only remove one image. $('#projectsWrap').find('.projectCont').prev().siblings().remove();
GOOD - All of the queried images show.
Does anyone know how I can change my JS to get all of the queried images to show per category and then remove the existing category images when another list item is selected and only show those category images?
HTML
<ul>
<li class="categoryList" data-category="Linear Motion">Linear Motion</li>
<li class="categoryList" data-category="Structures">Structures</li>
<li class="categoryList" data-category="Guarding">Guarding</li>
<li class="categoryList" data-category="Enclosures">Enclosures</li>
<li class="categoryList" data-category="Material Handling">Material Handling</li>
<li class="categoryList" data-category="Workstations">Workstations</li>
</ul>
<div id="projectsWrap"></div>
JS
var displayProjects = JSON.parse(data);
$(displayProjects).each(function() {
$('#projectsWrap').find('.projectCont').prev().siblings().remove();
$('#projectsWrap').prepend(this.html);
console.log(this.html);
});
PHP
if ($projects_stmt = $con->prepare($projects_sql)) {
$projects_stmt->execute();
$project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
$proj_arr = array();
foreach ($project_rows as $project_row) {
$project_img = $project_row['p_img'];
$project_alt = $project_row['p_alt'];
$project_display_img = '<img src="'.$project_img.'" alt="'. $project_alt .'">';
$project_title = $project_row['p_name'];
$html = '';
$html .= '<div class="projectCont">';
$html .= $project_display_img;
$html .= '<div class="projectInfo">';
$html .= '<span class="projectTitle">' . $project_title . '</span>';
$html .= '</div>';
$html .= '</div>';
$data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
$proj_arr[] = $data;
}
}
echo json_encode($proj_arr);
You can empty the projectWraps div before the loop:
var displayProjects = JSON.parse(data),
$wrapper = $('#projectsWrap'); // I would put this in a var for better performance if using it multiple times
$wrapper.empty(); // empty the wrapper
$(displayProjects).each(function() {
$wrapper.prepend(this.html);
console.log(this.html);
});