Change Nearest Class when checkbox is selected - javascript

I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});


Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>


$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});

Related

if the class is active, reinstate the other with jquery

I want to update the comments of a post. Let's say the user has 2 comments, when he clicks edit I want to close the window of the other comment. In short, how can I keep one as "textarea" and the other as "span"?
$(document).on('click','.update-comment',function(e){
$('.active').removeClass('active');
let obj = $(this).closest('.comments');
let text = obj.find('.comment-text').attr('data-text');
obj.find('.ms-3').addClass('active');
if($('.ms-3').hasClass('active')){
$(obj.find('.comment-text')).replaceWith('<textarea id="updateComment">'+text+'</textarea>');
}else {
$(obj.find('.comment-text')).replaceWith('<span class="comment-text" data-text='+text+'>'+text+'</span>');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex py-2 comments" data-id="1">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/50" alt="..."/>
</div>
<div class="ms-3">
<div class="fw-bold">Name-1
<button type="submit" class="update-comment" data-id="1">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 1" data-id="1">Comment Example - 1</span>
</div>
</div>
<hr>
<div class="d-flex py-2 comments" data-id="2">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/100" alt="..."/>
</div>
<div class="ms-3">
<div class="fw-bold">Name-2
<button type="submit" class="update-comment" data-id="2">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 2" data-id="2">Comment Example - 2</span>
</div>
</div>
<hr>

Not trivial
I changed the button to type=button
I then removed the duplicate IDs and instead gave both span and textarea the class of comment-text
Then I changed the data-attr to just the .text() OR .val() depending on the element being a textarea or a span
I also cached several objects
$(document).on('click', '.update-comment', function(e) {
$allMS3 = $('.ms-3').removeClass('active');
let $thisMS3 = $(this).closest('.ms-3')
.addClass('active');
$allMS3.each(function() {
const $commentText = $(this).find('.comment-text')
let text = $commentText.is("span") ? $commentText.text() : $commentText.val();
if ($(this).hasClass('active')) {
$commentText.replaceWith('<textarea class="comment-text">' + text + '</textarea>');
} else {
$commentText.replaceWith('<span class="comment-text">' + text + '</span>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex py-2 comments" data-id="1">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/50" alt="..." />
</div>
<div class="ms-3">
<div class="fw-bold">Name-1
<button type="button" class="update-comment" data-id="1">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 1" data-id="1">Comment Example - 1</span>
</div>
</div>
<hr>
<div class="d-flex py-2 comments" data-id="2">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/100" alt="..." />
</div>
<div class="ms-3">
<div class="fw-bold">Name-2
<button type="button" class="update-comment" data-id="2">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 2" data-id="2">Comment Example - 2</span>
</div>
</div>
<hr>

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 );
});

What is the correct way to use PARENT and FIND?

I try to get the value of input type=text by finding it in the parent DIV with class "half_weight". But I get the result NaN and it should be 0.8.
This is HTML:
<div class="add_controller amt no_space half_weight">
<div class="col s2 adds">
<a id="" href="#" class="button-minus product_quantity_down">
<i class="material-icons">remove</i>
</a>
</div>
<div class="col s2 adds">
<a href="#" class="button-plus product_quantity_up">
<i class="material-icons">add</i>
</a>
</div>
<div class="col s5 qty">
<div class="row">
<span class="col s6 qty_value">
<input type="text" name="" id="" stepquan="0.8" rtype="2" value="0.8" class="text" />
</span>
</div>
</div>
This is my jQuery:
$('.button-plus').on('click', function() {
valTemp = parseFloat($(this).parent('.half_weight').find('.qty_value').siblings('input[type=text]').val());
alert(valTemp);
});

You don't need siblings() (it refers to neighbors and you have got parent-child relationship). I put just
$(this).parents(".half_weight").find('.qty_value input[type=text]').val();
and it shows 0.8.
$('.button-plus').on('click', function() {
var valTemp = parseFloat($(this).parents(".half_weight").find('.qty_value input[type=text]').val());
alert(valTemp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_controller amt no_space half_weight">
<div class="col s2 adds">
<a id="" href="#" class="button-minus product_quantity_down">
<i class="material-icons">remove</i>
</a>
</div>
<div class="col s2 adds">
<a href="#" class="button-plus product_quantity_up">
<i class="material-icons">add</i>
</a>
</div>
<div class="col s5 qty">
<div class="row">
<span class="col s6 qty_value">
<input type="text" name="" id="" stepquan="0.8" rtype="2" value="0.8" class="text" />
</span>
</div>
</div>

Select the last element using id and class

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>

Call Action method from jquery popup modal

OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance

Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.

Categories