How to approach an if conditional for bulma CSS dropdown HTML - javascript

I am trying to create an if conditional based on what city a user selects off the dropdown menu. It has presented itself a challenge because it's bulmas CSS dropdown which does not use <selector> and <option> but all <div>s.
// The Dropdown for Cities
const root = document.querySelector(".cities");
root.innerHTML = `
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' id="myCity" value="oak" class='dropdown-item'>
Oakland, CA
</a>
<a href='#' id="myCity" value="san" class='dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
I tried value as you can see, but that will not work.
const myCity = document.getElementById("myCity");
myCity.addEventListener("mousedown", (event) => {
if (
<HTMLInputElement>(
document.getElementById("dropdown-menu").value.includes("san")
)
) {
console.log("this will show us San Francisco");
} else if (
<HTMLInputElement>document.getElementById("dropdown-menu").value === "oak"
) {
console.log("this will show us Oakland");
} else {
return null;
}
});

Change the dropdown <a> ids to class instead to prevent duplicate ids. Also use a data- attribute since <a> does not have value.
Then check the target of the event
const dropdown = document.querySelector('#dropdown-menu')
document.querySelector('.dropdown-trigger button').addEventListener('click', (e)=>{
dropdown.classList.toggle('active');
});
dropdown.addEventListener('click', (e)=>{
e.preventDefault()
if(e.target.matches('.dropdown-item.city')){
const cityName = e.target.dataset.value;
console.log('City =', cityName);
dropdown.classList.toggle('active');
}
})
#dropdown-menu { display:none}
#dropdown-menu.active{display:block}
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' data-value="oak" class='city dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='city dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>

Related

create a const for each item of an array in jquery

I'm trying to create a const or a var for each array item using jQuery, below is my HTML
<div class="taxonomy-list">
<input type="hidden" id="filters-category">
<ul class="category-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="uncategorized" data-taxtype="category"
data-id="1">
Category </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
<input type="hidden" id="filters-post_tag">
<ul class="post_tag-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="tag-1" data-taxtype="post_tag"
data-id="3">
Tag 1 </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
</div>
and below is the js I'm trying to use
$('.taxonomy-list input').each(function(index, value) {
const tax_name = [jQuery('.taxonomy-list input')]
for (let i = 0; i < tax_name.length; i++) {
console.log(`tax-${index}: ${this.id}`);
}
});
What I'm willing to get is in below format
const tax_0 = jQuery('#filters-category').val().split(',');
const tax_1 = jQuery('#filters-post_tag').val().split(',');
there will be more tax-i coming up, so I need to create a new const for each of them

select the next class with the previous class containing a text I gave

<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileDoc.doc">fileDoc.doc</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
...
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileJpeg.jpeg">fileJpeg.jpeg</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
This is my case, i want to select the " .ant-upload-list-item-card-actions > a" when the class "ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" contains fileDoc.doc
I made this
candidateUploadFileButton = '#filesUpload';
candidateUploadRemoveButton = '.ant-upload-list-item-card-actions > a';
cy.get(this.candidateUploadFileButton, {force: true}).contains(fileName);
cy.get(this.candidateUploadRemoveButton).click();
It works for a single input only for a single div class, if there two classes like in the previously example , it doesn't work beacuse it says there are multiple values
I added this picture, maybe it will help what i want to do, i want to press Remove button for the file named "fileDoc.doc"
https://i.stack.imgur.com/voQqp.png
Refer here:
As per your markup, you can use this:
cy.contains(fileName).next().find('> a').click()

insertAdjacentHTML is not a function in todolist

I was making my first pure Js project of todolist. I want when user adds an item in the list it gets it placed at the list. I was using this code I saw in a tutorial but it gives an error.
It gives an error: jeep.insertAdjacentHTML is not a function
Here is the markup:
<section class="listContent">
<div class="container">
<ul class="list" id="deep">
<li style="text-align: center" id="itemList">
<!-- < i class="fa fa-circle-o pull-left" id = "circle" aria - hidden="true" > </i>
<p class="text" > DRINK COFFEE < /p>
<i class="fa fa-trash pull-right" id = "delete" aria - hidden="true" > </i> -->
</li>
</ul>
</div>
</section>
Here is the JS
const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
function addToDo(todo) {
const item =
`<i class="fa fa-circle-o pull-left" job="complete" id="circle" aria-hidden="true"></i>
<p class="text"> ${todo}</p>
<i class="fa fa-trash pull-right" id="delete" job="delete" aria-hidden="true"></i>
` ;
const position = "beforeend";
console.log(item);
console.log(position);
jeep.insertAdjacentHTMl(position, item);
}
addToDo("drink coffe");
first try .insertAdjacentHTML - the L should be capitalized. Also it looks like in the HTML markup that element lives inside of the <li> no adjacent to it. It looks like you might want to use .appendChild() on the <ul id="deep"></ul>

How to expand/collapse nested div with jQuery

I have an expand/collapse using jQuery which works fine on the first level:
This is my razor file:
#model IntDashMakeRecAssgnmntsPoRespMngrVM
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (#Model.Audits.Count())</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
#foreach (var audit in Model.Audits)
{
<div>
<i id="expandRecommendations#(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations#(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>#audit.AuditAcnCd</b></span>
<div id="RecommendationDiv#(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
#foreach(var finding in audit.Findings)
{
foreach(var rec in finding.Recommendations)
{
<div style="display:none;">
<a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="#rec.RecommendationId"
title="Make assignment for #audit.AuditAcnCd">
<b>#audit.AuditAcnCd/#finding.FindingCd/#rec.RecCd</b>
</a>
</div>
}
}
</div>
</div>
}
</div>
</div>
This is my jQuery:
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
$("#MakeRecommendationAssignmentsDiv").toggle();
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
});
This is very simple to make the first level expand and collapse.
But now I need the nested 3 newly shown divs in the expanded div to each expand.
This is the jQuery I am writing to try and expand the inner divs.
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
console.log(this.id);
console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
expandNodeDivId = "RecommendationDiv" + expandNodeId;
console.log("#" + expandNodeDivId)
$("#" + expandNodeDivId).click(function (e) {
$("#" + expandNodeDivId).toggle();
});
});
In this line:
var expandNodes = $('i[id^="expandRecommendations"]');
I am getting all of my i tags that have a font awesome class (+ sign in a circle) acting as an expand button.
Now I roll through each of the "+ in a circle" buttons in the expandNodes collection and get the unique id I assigned to each of them with razor building on the server side (
<div id="RecommendationDiv#(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
and try to add a click event to each one to toggle itself which should show itself and the anchor divs nested inside of itself:
But it just won't won't expand.
Here are the console.logs showing I'm getting the right id's to call the element to expand:
These console.log lines show I am getting the write information to try to wire this up but I just can't get them to expand:
expandRecommendations279938 // the div I clicked on
279938 // able to parse the audit id from the id of the element I clicked on.
#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.
Anyone see the problem here? Any help would be greatly appreciated.
UPDATE 1
Here is the HTML source produced from the server side.
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOIGFinding1</b></span>
<div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
<b>testOIGFinding1/4/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
<b>testOIGFinding1/4/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
<b>testOIGFinding1/7/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
<b>testOIGFinding1/7/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
<b>testOIGFinding1/7/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
<b>testOIGFinding1/7/4</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
<b>testOIGFinding1/7/5</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
<b>testOIGFinding1/7/6</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOCFOFinding1</b></span>
<div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
<b>testOCFOFinding1/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
<b>testOCFOFinding1/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
<b>testOCFOFinding1/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
<b>testOCFOFinding1/1/4</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
<div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
<b>TestOigAllRecommendations/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
<b>TestOigAllRecommendations/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
<b>TestOigAllRecommendations/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
<b>TestOigAllRecommendations/2/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
<b>TestOigAllRecommendations/2/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
<b>TestOigAllRecommendations/2/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
<b>TestOigAllRecommendations/3/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
<b>TestOigAllRecommendations/3/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
<b>TestOigAllRecommendations/3/3</b>
</a>
</div>
</div>
</div>
</div>
</div>
I figured it out.
Here is the revised JavaScript:
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
create_expand_toggle(expandNodeId);
});
function create_expand_toggle(nodeId) {
$("#" + "expandRecommendations" + nodeId).click(function (e) {
console.log("Clicking");
$("#" + "RecommendationDiv" + nodeId).toggle();
});
}
I was referencing the same div I wanted to expand in the button click. I needed to make a second reference to the i tag with the font awesome + class acting as the button to hook up the click event.
Once tip. I tried to make a var for the two node id references and use them so it would be more readable. But then the click event for all three plus signs on that level show the same div. The last div. So I have to concatenate the ids in the create_expand_toggle function.

toggle only one specific panel within a ngFor loop

Hello I want to toggle one specific panel but if I click on the button the panels of other objects will be opened. How can I just open the clicked panel?
toggle.component.ts
opened:Boolean=false;
toggle () {
this.opened = !this.opened;
}
HTML
<div class="main" *ngFor="let x of data; let i=index;">
<footer>
<div class="icons">
<span id="{{item.id}}" (click)="toggle()">6<i class="fa fa-users {{i}}" ></i></span>
<span >6<i class="glyphicon glyphicon-picture"></i></span>
<span >6<i class="glyphicon glyphicon-tag"></i></span>
<div class="iconsRight pull-right">
<span >EXIF<i class="glyphicon glyphicon-info-sign"></i></span>
<span ><i class="fa fa-map-marker"></i></span>
<span ><i class="fa fa-share-alt-square"></i></span>
</div>
</div>
</footer>
<div class="togglePanel{{item.id}}" *ngIf="opened" >
<hr/>
<ul class="toggleWrapper">
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
</ul>
</div>
</div>
You need to save state of individual panel. Currently you just set one variable which toggles all the panels.
In your toggle.component.ts, add a variable to store every item's state:
togglePanel: any = {};
Then, change your html to following:
<div class="main" *ngFor="let x of data; let i=index;">
<footer>
<div class="commentAgent">Text des Bewerters, der die Bearbeitung dieses Bildes vorgenommen hat</div>
<div class="icons">
<span id="{{item.id}}" (click)="togglePanel[i] = !togglePanel[i]">6<i class="fa fa-users {{i}}" ></i></span>
<span>6<i class="glyphicon glyphicon-picture"></i></span>
<span>6<i class="glyphicon glyphicon-tag"></i></span>
<div class="iconsRight pull-right">
<span>EXIF<i class="glyphicon glyphicon-info-sign"></i>/span>
<span><i class="fa fa-map-marker"></i></span>
<span><i class="fa fa-share-alt-square"></i></span>
</div>
</div>
</footer>
<div class="togglePanel{{item.id}}" *ngIf="togglePanel[i]">
<hr/>
<ul class="toggleWrapper">
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
</ul>
</div>
</div>
Also, you don't need the toggle() method and the variable opened in this approach.
If you need only one panel opened, then this method will work. Instead on setting your 'flag' property boolean, use number. It will keep the panel id. Set it to the panel id and you don't need an additional property on your data:
Typescript:
opened = -1;
toggle (index) {
this.opened = index;
}
HTML:
....
<span id="{{item.id}}" (click)="toggle(item.id)">6<i class="fa fa-users {{i}}" ></i>
...
<div class="togglePanel{{item.id}}" *ngIf="opened===item.id" >

Categories