Select the last element using id and class - javascript

I'm trying to develop a load-more function using jquery. With my current approach I only load more content after the last question-summay which appears in the last tab pan of my table. I want, when I click on my load-more button to load my content after the last question-summary of that question-col with the respective id.
My JS function:
$(document).ready(function () {
$(".loadMore").on('click', function () {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data), tab);
});
$(this).data('next-page', parseInt(next_page) + 1);
});
siteStats();
});
function addNewQuestions(objects, tab) {
$.each(objects, function (i, object) {
console.log(tab);
var lastItem = $(".question-summary:last");
console.dir(lastItem);
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-info');
updateTitleAndLink(newObject.find('.summary a'), object);
updateCreationDate(newObject.find('.question-updated-at'), object);
updateQuestionAnswers(newObject.find('.question-answers'), object);
updateAnswerCount(newObject.find('.answers-count'), object);
updateViewsCount(newObject.find('.views-count'), object);
updateVotesCount(newObject.find('.votes-count'), object);
updateSolvedStatus(newObject.find('.status'), object)
lastItem.after(newLine);
});
}
I believe the problem is on the line var lastItem = $("question-summary:last");. I tried a lot of different solutions, like .question-col#tab.question-summary to select the correct element with id tab but that did not work.
<div id="tabs" class="tab-content">
<ul>
<li>Recent Questions</li>
<li>Unanswered Questions</li>
<li>Top Scored Questions</li>
</ul>
<div id="recent_questions" class="question-col">
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "recent_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="unanswered_questions" class="question-col">
{foreach $unanswered_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "unanswered_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="top" class="question-col">
{foreach $top_scored_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "top_scored_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
</div>
Any idea what I'm doing wrong?
Kind regards

You forgot the class (dot) selector:
var lastItem = $("question-summary:last");
Try this:
var numQ = $('.question-summary').length;
var lastItem = $('.question-summary').eq(numQ-1);

To select last you can use .last() with class selector like
alert($('.myList').last().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="myList">One</li>
<li class="myList">Two</li>
<li class="myList">Three</li>
</ul>

Related

Display no results message for input filtering a list of cards

I have an input field which is filtering a list of cards.
I can't seem to figure out how to display a message when all the div's are assigned the class display-none. Is their a way to check if any of the div's inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
checkDisplay();
}
}
function checkDisplay() {
let noResults = document.getElementById("no-results-message");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("displaying")) {
console.log("something");
} else {
console.log("no cards are displaying");
}
}
}
}
.display-none {
display: none;
}
.displaying {
display: block;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>
Changing display only with .display-none in css works more clearly
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
const cards = document.querySelectorAll(".card");
[...cards].map((card) => {
const noResults = document.getElementById("no-results");
const title = card
.querySelector(".card-content div.card-title")
.innerText.toUpperCase();
title.includes(input)
? card.classList.remove("display-none")
: card.classList.add("display-none");
checkDisplay();
});
function checkDisplay() {
const noResults = document.getElementById("no-results");
const result = [...cards].filter((card) =>
card.classList.contains("display-none")
);
cards.length === result.length
? noResults.classList.remove("display-none")
: noResults.classList.add("display-none");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("display-none")) {
console.log("no cards are displaying");
} else {
console.log("something");
}
}
}
}
.display-none {
display: none;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

How to hide several classes but individually after click it with JS DOM. New on JS & having a hard time

By example I have a list of classes which the class "ld-certificate-link" will be called "brod" and it has an icon which it is represented with a white style color and what I wish to do is that when I click the icon the class disappears.
The problem is that when I select the query or it only affect one "brod" and the next ones doesn't change the color at all or the second case scenario is that only by clicking one it change the color of every "brod". Also notice that "brod" has an href which is dynamic and unique because it spawns after a quiz is submitted so what happens when you click "brod" is that the href which is a .pdf file automatically downloads. Also this has to work into every new brod that is generated. Any hints? I'm pretty new on JS and I'm doing my best but I'm having a hard time on this.
The most close code that I get is this one:
Html:
<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-complete ld-expanded" id="ld-course-list-item-42634">
<div class="ld-item-list-item-preview">
<a href="https://xxxxxxx.com/courses/prueba-ii/" class="ld-item-name">
<div class="ld-status-icon ld-status-complete ld-secondary-background"><span class="ld-icon-checkmark ld-icon"></span></div> <span class="ld-course-title">Prueba II</span>
</a> <!--/.ld-course-name-->
<div class="ld-item-details">
<a class="ld-certificate-link" target="_blank" href="https://xxxxxxx.com/certificates/35472/?course_id=42634&cert-nonce=9c8a79d8ae" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a>
<div class="ld-status ld-status-complete ld-secondary-background">Completo</div>
<div class="ld-expand-button ld-primary-background ld-compact ld-not-mobile ld-expanded" data-ld-expands="ld-course-list-item-42634">
<span class="ld-icon-arrow-down ld-icon"></span>
</div> <!--/.ld-expand-button-->
<div class="ld-expand-button ld-button-alternate ld-mobile-only ld-expanded" data-ld-expands="ld-course-list-item-42634" data-ld-expand-text="Desplegar" data-ld-collapse-text="Contraer">
<span class="ld-icon-arrow-down ld-icon"></span>
<span class="ld-text ld-primary-color">Contraer</span>
</div> <!--/.ld-expand-button-->
</div> <!--/.ld-course-details-->
</div> <!--/.ld-course-preview-->
<div class="ld-item-list-item-expanded" data-height="604" style="max-height: 604px;">
<div class="ld-progress" style="">
<div class="ld-progress-heading">
<div class="ld-progress-label">Proceso de Capacitación </div>
<div class="ld-progress-stats">
<div class="ld-progress-percentage ld-secondary-color">100% Completado </div> <!--/.ld-course-progress-percentage-->
<div class="ld-progress-steps"> 1/1 pasos </div>
</div> <!--/.ld-course-progress-stats-->
</div> <!--/.ld-course-progress-heading-->
<div class="ld-progress-bar">
<div class="ld-progress-bar-percentage ld-secondary-background" style="width: 100%;"></div>
</div> <!--/.ld-course-progress-bar-->
</div> <!--/.ld-course-progress-->
<div class="ld-item-contents">
<div class="ld-table-list ld-quiz-list">
<div class="ld-table-list-header ld-primary-background">
<div class="ld-table-list-title">
Evaluaciones </div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-column-certificate">
Certificado </div>
<div class="ld-table-list-column ld-column-scores">
Calificación </div>
<div class="ld-table-list-column ld-column-stats">
Estadísticas </div>
<div class="ld-table-list-column ld-column-date">
Fecha </div>
</div>
</div> <!--/.ld-table-list-header-->
<div class="ld-table-list-items">
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628218385" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="e13a3ca2a2" data-user-id="1" data-quiz-id="29" data-ref-id="306" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
05/08/2021 23:53 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266530" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="1fa17abf9e" data-user-id="1" data-quiz-id="29" data-ref-id="307" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:15 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266609" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="28dc605682" data-user-id="1" data-quiz-id="29" data-ref-id="308" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:16 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266639" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="5bdb484223" data-user-id="1" data-quiz-id="29" data-ref-id="309" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:17 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
</div> <!--/.ld-table-list-items-->
<div class="ld-table-list-footer"></div>
</div> <!--/.ld-quiz-list-->
</div> <!--/.ld-course-contents-->
</div> <!--/.ld-course-list-item-expanded-->
</div>
JavaScript:
document.querySelector('brod')
.addEventListener("click", handleClick );
function handleClick() {
alert("i got clicked!");
}
var doShow = localStorage.getItem('.brod');
if (doShow == null) {
doShow = true;
}
const anchor = document.querySelector('.brod');
if (doShow == "false") {
anchor.style.display = "none";
}
anchor.addEventListener('click', function() {
localStorage.setItem('.brod', "false");
});
I don't know if I can give a full correct answer without seeing all of your HTML.
I do think part of the issue is that you need to loop over all the instances of .brod and apply your code to all of them. Currently your are only querying one instance of .brod
For example:
let allBrods = document.querySelectorAll('.brod');
[].forEach.call(allBrods, function(brod) {
brod.addEventListener("click", handleClick );
});

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

Bootstrap Model is closed everytime after click on the cancel icon in AngularJS?

I have to remove the product from the list. My product is removed properly but after I click on the cancel icon, the model closes. I am using AngularJS.
/**
* #Summary: removeSelectedProductFromAlbum function, remove the productKey from the album
* #param: event, index, productObject
* #return: NA
* #Description:
*/
$scope.albumKey = [];
$scope.albumObject = [];
$scope.setAlbumObject = [];
$scope.removeSelectedProductFromAlbum = function(event, index, productObject) {
//GET THE ALBUM OBJECT FROM THE SCOPE
$scope.setAlbumObject = $scope.setAlbumObject;
//PROCESS TO REMOVE productKeyId IN ALBUM.
var productKeyId = productObject.keyId;
if(productKeyId != undefined) {
if($scope.productsKeyIdList != undefined && $scope.productsKeyIdList != null) {
var index = $scope.productsKeyIdList.indexOf(productKeyId);
$scope.productsKeyIdList.splice(index, 1);
updatedProductKeyArray = $scope.productsKeyIdList;
//Calling updateArray inner function for update sharedBuyerKeyIdList after remove the keyId
updateArray();
}
}
}
//CALLING THE updateArray FUNCTION FOR UPDATE THE PRODUCT AFTER DELETING THE DATA
function updateArray () {
var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
// Updating product key in album.
PRODUCT_DB_REF.child($scope.setAlbumObject.key).update({
productKey : updatedProductKeyArray
});
CMN.showNotification("top","center","info","Product is Successfully Removed");
//$(event.currentTarget).parents("#hideAfterRemove").hide("slow");
}
<div style="overflow:auto; max-height:300px;" >
<div class="dashboard-prod-wrap decorCardD2"
style="width:342px;" ng-repeat="sellerAlbum in sellerSelAlbumProducts" ng-if="sellerSelAlbumProducts.length > 0">
<i class="fa fa-remove" style="font-size:14px; cursor:pointer;" title="Remove"
ng-click="removeSelectedProductFromAlbum($event, $index, sellerAlbum)">
</i>
<div class="w3-row w3-padding-top ng-cloak">
<span class="pull-left color-d4 text-capitalize no-wrap dash-prod-name w3-small ng-cloak">
<span class="product-name" style='padding-right:3px;'>
{{sellerAlbum.categoriesDto.categoryName}}
</span>
<span class="w3-text-teal ng-cloak">
<b>{{sellerAlbum.sellerProductDesignsDtos[0].designsName}}</b>
</span>
<span class="w3-text-teal ng-cloak" ng-if="sellerAlbum.designNumber != 'undefined'">
-<b>{{sellerAlbum.designNumber}}</b>
</span>
<small class="text-muted w3-left w3-price-tag ng-cloak">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.fixedPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.fixedPrice}}</strike>
<span class="w3-text-green">
{{sellerAlbum.offerPrice}}
</span>
</span>
</small>
<small class="text-muted w3-left w3-price-tag ng-cloak" ng-if="sellerAlbum.fixedPrice == 0">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.maxPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.maxPrice}}</strike>
<strong class="w3-text-green">
{{sellerAlbum.offerPrice}}
</strong>
</span>
<small class="w3-small"> (<i class="fa fa-inr"></i>{{sellerAlbum.minPrice}}
- <i class="fa fa-inr"></i>{{sellerAlbum.maxPrice}})
</small>
</small>
</span>
<div class="pull-right ng-cloak" style="width:100%;margin-top:10px;">
<div class='owner-img'>
<img src="{{sellerAlbum.sellerDto.userTypeDto.imageURL != 'null' ? sellerAlbum.sellerDto.userTypeDto.imageURL : '/static/assets/img/image_placeholder.jpg'}}"
alt="Avatar" class="w3-right w3-circle w3-margin-left">
</div>
<small class="text-uppercase w3-tiny text-muted text-right ng-cloak">
<b>{{sellerAlbum.sellerDto.personName}}</b>
<span ng-repeat="address in sellerAlbum.sellerDto.userTypeDto.userTypeAddressDtos"
ng-if="address.keyId === sellerAlbum.sellerDto.userTypeDto.defaultAddressKeyId">
- <b>{{address.city}}</b>
</span><br>
</small>
</div>
</div>
<hr class="w3-clear margin0">
<div class="w3-row-padding w3-padding-top" style="margin: 0 -16px">
<!-- START:This will display Large Product Image -->
<div class="dashboard-prod-col-left w3-center">
<div class="text-center w3-padding-8"
ng-init="setImageURLList[sellerAlbum.keyId] = sellerAlbum.sellerProductSetDto[0].setImageURLList">
<div ng-repeat="image in setImageURLList[sellerAlbum.keyId]"
ng-click="sellerAlbum.defaultImageURL = image.imageURL"
onClick="imgShadowArr(this);"
ng-init="sellerAlbum.defaultImageURL = setImageURLList[sellerAlbum.keyId][0].imageURL"
class="dashboard-prod-img-wrap {{sellerAlbum.defaultImageURL == image.imageURL ? 'w3-border-teal-orange' : ''}}">
<img src="{{image.imageURL}}" class="prod-img-xs cursor-pointer">
</div>
<div class="dashboard-prod-img-wrap"
ng-if="productImgsList[sellerAlbum.keyId].length < 1">
<img src="/static/assets/img/product_default.jpg"
class="prod-img-xs">
</div>
</div>
</div>
<!-- END:This will display Large Product Image -->
<div class="dashboard-prod-col-right w3-center hover-div">
<img src="{{sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL != null ? sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL :'/static/assets/img/product_default.jpg'}}"
class="cursor-pointer" style="max-height:200px;border:1px solid black;">
<br>
</div>
</div>
<div class="">
<div class="text-center pull-left ng-cloak list-by-a list-by-color">
<div class='list-icon'>
<i class="fa fa-th-large" aria-hidden="true"></i>
</div>
<ul class='margin0'>
<li class="prodColorWrap" ng-repeat="productSet in sellerAlbum.sellerProductSetDto track by $index"
style="cursor:pointer; background-color:{{productSet.colorCode}}"
ng-click="setImageURLList[productSet.keyId] = sellerAlbum.setImageURLList;
productSet.defaultImageURL = setImageURLList[productSet.keyId][0].imageURL">
</li>
</ul>
</div>
<div class='w3-offer-tag' ng-if="sellerAlbum.inOffer">
<label>
<i class="fa fa-star w3-spin"></i>
Offer
</label>
</div>
</div>
<br>
</div>
function for remove icon , please sir how to fix this issue?

Template tag in HTML: querySelector just return null value

I am making a website for education purpose as well, but I got some error that I cant figure out by myself.
I wrote a template like:
<div class="row" style="height: 75%;" align="center" id="room-list">
<template id="room-template" class="slide">
<div class="col-md-4" id="left-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="center-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="right-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div>
<img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
</div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
</template>
</div>
And I use jquery to add that template to a append a lot of divs by using template.
var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i++) {
var room = roomEntities[i];
var price = priceEntities[i];
var type = room.type;
var thumbnail = room.thumbnail;
var sale = price.sale;
var original = price.original;
for (var i = 0; i < 3; i++) {
var slt = "#center-item";
if (i == 0) {
slt = "#left-item";
}
else
slt = "#right-item";
var tpl = document.getElementById('room-template');
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;
tpl.querySelector(slt + '.panel-body #thumbnail').attr('src') = thumbnail;
tpl.querySelector(slt + '.panel-body #sale').innerText = sale;
tpl.querySelector(slt +'.panel-body #original').innerText = original;
roomList.appendChild(tpl.content.cloneNode(true));
}
}
But it always returns error at tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; it said Cannot set property innerText of null, it mean cannot find the element in template.
Any advice or recommended. Please help. Many thanks
Change all Selectors in your Code
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText
tpl.querySelector(slt + ' .panel-default .panel-heading #room-type').innerText

Categories