We Keep Coding

Using jQuery to find the next div and show/hide it

I'm working on an application that lists products/sub products. I'm trying to show the sub products when I click on the chevron. For some reason, I can't get this to work. I've been able to get the flipping of the chevron to work.
Here is my code:
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
function expand(event) {
if ($(event).hasClass("fa-chevron-down")){
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).closest('div').next().find("sub-item-list").css('display', 'inherit');
} else {
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).closest('div').next().find("sub-item-list").css('display', 'none');
}
};
Can someone tell me that the issue is?

You can use .closest('div.item') to get the closest div and then use .find(".sub-item-list") to find the div which you need to display .
Demo Code :
function expand(event) {
if ($(event).hasClass("fa-chevron-down")) {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');
} else {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>

As you are setting onclick event on <i> tag you can also call parent().next() method instead of closest() to get subitem/product.
Try this example:
function expand(event)
{
if ($(event).hasClass("fa-chevron-down"))
{
setTimeout(function()
{///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).parent().next().css("display", "block");
}
else
{
setTimeout(function ()
{///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).parent().next().css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;">
<i class="fas fa-fw fa-chevron-down" onclick="expand(this, event)">Toggle Chevron</i>
</div>
<div class="sub-item-list" style="display:none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>

How do I check if a div contains another div?

I need to show alert if my parent div has a child div using JavaScript only No jQuery.
I have tried using the contains() function to check my div and send alert but it's not working.
<script type="text/javascript">
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv.contains(childDiv)) {
alert("yes");
} else
{
alert("no");
}
</script>
<div class="row leftpad collapse" id="commentBox">
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>
There should be an alert box with message yes in it but it's not visible. I have also tried checking JavaScript using the alert() method only without any code.

Your code is running before the DOM is fully loaded. Move your script at the bottom of the page:
<div class="row leftpad collapse" id="commentBox" >
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>
<script type="text/javascript">
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv.contains(childDiv)) {
alert("yes");
}
else{
alert("no");
}
</script>
OR: Wrap the code with DOMContentLoaded which will ensure that code placed inside will be executed only after the DOM is fully loaded:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv.contains(childDiv)) {
alert("yes");
}
else{
alert("no");
}
});
</script>
<div class="row leftpad collapse" id="commentBox" >
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>

You can use querySelector . If the child is not present it will give a null value
var hasChildDiv = document.getElementById("commentBox").querySelector("#comment1");
if (hasChildDiv !== null) {
alert('yes')
}
<script type="text/javascript">
</script>
<div class="row leftpad collapse" id="commentBox">
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>

let table = document.getElementById("niceTable");
let tds = table.getElementsByTagName("td");
for (let i = 0; i < tds.length; i++) {
tds[i].onclick = function () {
checkInputElement(tds[i]);
};
}
function checkInputElement(element) {
let input = element.querySelector("input");
console.log(element.contains(input));
}

Make sure that the whole DOM is loaded before you execute javascript code.
You can do this by adding the event listener DOMContentLoaded to your code or placing your scripts at the end of the file
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv && parentDiv.contains(childDiv)) {
alert("yes");
}
else {
alert("no");
}
}, false);
</script>
<div class="row leftpad collapse" id="commentBox" >
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>
You won't get an alert because parentDiv will not exist yet and the value will be null. This results that it does not contain the contains() function and it will throw an error. To be safe you can add a null check inside the if statement.

How about using window.onload function?
<script>
window.onload = function() {
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv.contains(childDiv)) {
alert("yes");
} else {
alert("no");
}
}
</script>
This will execute the function until dom loads completely
<script>
window.onload = function() {
var parentDiv = document.getElementById("commentBox");
var childDiv = document.getElementById("comment1");
if (parentDiv.contains(childDiv)) {
alert("yes");
} else {
alert("no");
}
}
</script>
<div class="row leftpad collapse" id="commentBox">
<div id="comment1">
<div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
<h6>James </h6>
</div>
<div class="col-md-9 dir-rat-right">
<p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
</div>
</div>
</div>

how to change bootstrap carousel arrow class

I have this bootstrap carousel with arrows at the top right corner. I have set data-wrap="false" so that it stops when it reaches the end of the Carousel. Also, the left arrow becomes active when the first carousel starts.
Here's what I want to do: I want the class class-fade to change to class-active when the slide becomes active. And then change to class-fade when it becomes non-active again.
I hope this makes sense.
JSFIDDLE: https://jsfiddle.net/6kjnmbcb/
HTML:
<div class="container">
<p>When the carousel comes to an end, change the class <strong>"class-active"</strong> to <strong>"class-fade"</strong>.
<span class="pull-right">
<a class="" href="#CaseCarousel" data-slide="prev"><i class="class-fade"> << </i></a>
<a class="" href="#CaseCarousel" data-slide="next"><i class="class-active"> >> </i></a>
</span>
</p>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="CaseCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.class-fade {
color: grey;
}
.class-active {
color: red;
}

You need to use slide.bs.carousel event described in bootstrap
$('#CaseCarousel').on('slide.bs.carousel', function (e) {
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[0].className = 'controls class-active';
}
if (e.direction === 'right') {
controls[1].className = 'controls class-active'
}
var inner = document.querySelector('.carousel-inner');
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'controls class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'controls class-fade'
}
})
There is a full solution
https://jsfiddle.net/oeraa2kL/2/

You can handle the slide.bs.carousel event :
Take a look at this fiddle : https://jsfiddle.net/BaobabCoder/7756yuzb/1/
$(document).on('slide.bs.carousel', '.carousel', function(e) {
var slidesLength = $(this).find('.item').length;
var slideFrom = $(this).find('.active').index();
var slideTo = $(e.relatedTarget).index();
if(slideFrom === 0 || slideTo === 0) {
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-fade');
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-active');
}
else if(slideFrom === slidesLength || slideTo === slidesLength) {
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-fade')
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-active');
}
});

Search data on click event of button using smart table

I am very new to the smart table. I have gone through its documentation on Smart Table.
But the I haven't found how to bind data on click event in smart table?
Code is very big but I am trying to post it here.
<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
<div class="crawlhealthshowcontent">
<div class="crawlhealthshowcontent-right">
<input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
<a class="bluebtn">Search</a>
</div>
<div class="clearfix"></div>
</div>
<br />
<div class="table-header clearfix">
<div class="row">
<div class="col-sm-6_5">
<div st-sort="SourceUrl" st-skip-natural="true">
Page URL
</div>
</div>
<div class="col-sm-2">
<div st-sort="SourceAnchor" st-skip-natural="true">
Anchor Text
</div>
</div>
<div class="col-sm-1">
<div st-sort="ExternalLinksCount" st-skip-natural="true">
External<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="InternalLinksCount" st-skip-natural="true">
Internal<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="IsFollow" st-skip-natural="true">
Type
</div>
</div>
</div>
</div>
<div class="table-body clearfix">
<div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
<div class="col-sm-6_5">
<div class="pos-rel">
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
</div>
</div>
<div class="col-sm-2">
<div class="pos-rel">
{{ backlink.SourceAnchor }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.ExternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.InternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div ng-if="!backlink.IsFollow">
No Follow
</div>
</div>
</div>
<div class="row" ng-if="backlinks.length == 0">
No backlinks exists for selected location.
</div>
</div>
<div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>
and my js code is here.
module.controller('backlinksController', [
'$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {
$scope.dataExistsValues = globalVariables.dataExistsValues;
var initialize = function () {
$scope.backlinks = undefined;
$scope.sortOrderAsc = true;
$scope.sortColumnIndex = 0;
};
initialize();
$scope.itemsByPage = 5;
var updateTableStartPage = function () {
// clear table before loading
$scope.backlinks = [];
// end clear table before loading
updateTableData();
};
var updateTableData = function () {
var property = mcatSharedDataService.PropertyDetails();
if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
return;
}
var params = {
PropertyId: property.Primary.PropertyId
};
var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);
$scope.Loading = backLinksDataPromise;
};
mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
}
]);
module.filter('myStrictFilter', function ($filter) {
return function (input, predicate) {
return $filter('filter')(input, predicate, true);
}
});
But It is working fine with the direct search on textbox.
but according to the requirement I have to perform it on button click.
Your suggestions and help would be appreciated.
Thanks in advance.

You can search for a specific row by making some simple tweaks.
add a filter to the ng-repeat, and filter it by a model that you will insert on the button click, like so: <tr ng-repeat="row in rowCollection | filter: searchQuery">
in your view, add that model (using ng-model) to an input tag and define it in your controller
then pass the value to the filter when you click the search button
here's a plunk that demonstrates this
you can use filter:searchQuery:true for strict search
EDIT:
OK, so OP's big problem was that the filtered values wouldn't show properly when paginated, the filter query is taken from an input box rather then using the de-facto st-search plug-in, So I referred to an already existing issue in github (similar), I've pulled out this plunk and modified it slightly to fit the questioned use case.

Conditional innerhtml change

Let's say I have an HTML structure like this:
<li id="jkl">
<div class="aa">
<div class="bb">
<div class="cc">
<div class="dd">
<a ...><strong>
<!-- google_ad_section_start(weight=ignore) -->Test
<!-- google_ad_section_end --></strong></a>
</div>
</div>
</div>
<div class="ee">
<div class="ff">
<div class="gg">
<div class="excludethis">
<a...>Peter</a>
</div>
</div>
</div>
</div>
</div>
</li>
My goal is to set the content(innerhtml) of <li id="jkl"> to '' if inside of <li id="jkl"> there is any word of a list of words(In the example below, Wortliste) except when they are in <div class="excludethis">.
In other words, ignore <div class="excludethis"> in the checking process and show the html even if within <div class="excludethis"> there are one or more words of the word list.
What to change?
My current approach(that does not check for <div class="excludethis">)
Wortliste=['Test','Whatever'];
TagListe=document.selectNodes("//li[starts-with(#id,'jk')]");
for (var Durchgehen=TagListe.length-1; Durchgehen>=0; Durchgehen--)
{
if (IstVorhanden(TagListe[Durchgehen].innerHTML, Wortliste))
{
TagListe[Durchgehen].innerHTML = '';
}
}
with
function IstVorhanden(TagListeElement, Wortliste)
{
for(var Durchgehen = Wortliste.length - 1; Durchgehen>=0; Durchgehen--)
{
if(TagListeElement.indexOf(Wortliste[Durchgehen]) != -1)
return true;
}
return false;
}
Only has to work in opera as it's an userscript.