Making a dropdown button turn (and stay) green in JavaScript - javascript

So, I'm new to coding, and I have been struggling to make a dropdown button turn green when you click the main button "Pronto". I've followed some steps from similar questions here, but they didn't work for me. No effects at all. Can you give me some insights?
HTML:
<div class="btn-group">
<button class="btn btn-default">Pronto</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" role="menu" style="">
<a class="dropdown-item" href="#">Pronto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item Não Disponível</a>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
keyboard: false
})
registerAccountButton.addEventListener('click', function () {
registerAccountModal.toggle();
})
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
CSS:
.green {
background-color: greenyellow;
}
You can even see I tried creating a class and calling it, but didn't work.
What am I missing?

Your problem is the following code
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
You have created your buttons using the <button> in html, but in js you are referencing them using <input type="button"> which is not present & hence is ignored by jQuery.
Your code should be something like follows, to make the dropdown button green, when the Pronto button is clicked:
$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});

Related

Not able to parse HTMLCollection list

I am trying to scrape out some links from a site using javascript. In the below HTML I have some links in the 'a' tag. And I am using the following JS.
The problem is that I am not able to get the links from the myChildList.
When I console.log myDownloadDiv, it shows me the output as object HTMLElement. When I console.log the myChildList (i.e the children of the HTMLElement) I get something like a HTMLCollection [a.dropdown-item.disabled] in which the length is 2 and with both the anchor tags and with all their properties in it with the links.
When I want to console.log all the elements using a loop, it shows only one element and the output is like this:
<a class="dropdown-item disabled"></a>
I don't understand if I am doing something wrong while parsing out the HTMLCollection List.
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
EDIT:
I tried the solutions. They work perfectly in the snippets but they are not working on the site which I am trying to scrape.
Your loop seems to work.
Perhaps you meant this
const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href);
console.log(links);
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
Here is a bookmarklet
javascript:(function() { const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href); console.log(links))()
your code is correct and works properly on my machine, I think there's an issue with your console object.
Please try to remove this import https://static.lalaping.com/online.js?ver=2.0.0:formatted
I suspect the console object is overwritten there.
You can verify this on you site, just running in the browser console the following commands:
// Restore console object:
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;
// Run your code:
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}

Toggle class with JS - Only change the actual position

I have a problem with my code... I want to show a specific FA icon when I press a button and different when I press it again. (Attach pic.):
But when I press the button, the changes are made to all the buttons... I think that the problem is in the for, but I don't have an idea how to solve it.
<script>
function MostrarObra(){
var Icon = document.getElementsByTagName('i');
for (i = 0; i < Icon.length; i++) {
Icon[i].classList.toggle('fa-angle-double-down');
Icon[i].classList.toggle('fa-angle-double-up');
}
};
</script>
<div class="card-header p-0" id="headingTwo">
<button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
</button>
</div>
When you call document.getElementsByTagName('i') you get all elements i in the document. That's why all buttons change.
You could pass the button that is triggering the event to your function and start looking for the i element from it.
<script>
function MostrarObra(element) {
const icon = element.querySelector('i');
icon.classList.toggle('fa-angle-double-down');
icon.classList.toggle('fa-angle-double-up');
}
</script>
[...]
<button onclick="MostrarObra(this)">[...]</button>

Inserting script for bootstrap popover

I have a bootstrap 4 popover with list inside which comes from a viewcomponent element (asp net core 3.1 project).
This popover is inside layout navigation bar (not sure if that's relevant) and after hovering over it the list should appear.
Now every list element appears correctly but after I click any of the list elements I want to send ajax post request but I cannot make my javascript work. I am not sure what is the problem. Is it because my script is only loaded when I hover on popover? Am I using events incorrectly? I tried a lot of variations to test if JS is working and seems like everything failed.
ViewComponent:
#model mymodel;
<div class='list-group'>
#foreach (var item in Model.Item)
{
<a href='#item.Url' class='btn list-group-item list-group-item-action mb-1'>You have been invited to join event: <b>#item.Name</b></a>
}
#foreach (var item in Model.AnotherItem)
{
<a id='lmao' href='#' onclick='doSomething(#item.Id);' class='list-group-item list-group-item-action mb-1'>You have been invited to join team: <b>#item.Name</b></a>
}
</div>
<script>
$('#lmao').click(function () { MyFunction(); return false; });
function MyFunction() {
alert('hello');
console.log(data);
console.log(this);
}
</script>
_Layout Page with popover:
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">
Settings
</a>
...
<a tabindex="0" class="dropdown-item pop" data-container="body" data-html="true" title="Your invitations" data-toggle="popover" data-placement="left" data-content="#await Component.InvokeAsync("InvitationList")" style="cursor: pointer;">Invitations (number coming from another viewcomponent)</a>
...
</div>
</li>
...
Popover JS in Layout:
<script>
$('.pop').popover({
trigger: 'manual',
html: true
})
.on('mouseenter', function () {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function () {
$(_this).popover('hide');
});
}).on('mouseleave', function () {
var _this = this;
setTimeout(function () {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 300);
});
</script>
My popover works correctly, I see the items loaded from viewcomponent, I can press on each of them and go to preset href.
What doesn't work is javascript coming from viewcomponent or atleast I am failing to test it. My end goal is to make a post call if any of the items in the popover are clicked.
I tested your codes and found if you directly call viewcomponent in data-content, the jacascripts in ViewComponent will be recongnized as html, so it will never be called. Instead, you can define an area for viewcomponent separately
<a id="invitations" tabindex="0" class="dropdown-item pop" data-container="body" data-html="true" title="Your invitations" data-toggle="popover" data-placement="left" style="cursor: pointer;" data-content="">invitations</a>
<div id="vc" style="display:none">
#await Component.InvokeAsync("InvitationList")
</div>
Use js to append it to data-content
$("#invitations").attr("data-content", $("#vc").html())
Since it is a new element from other page, the handler won't be bound on that new element, your click function should be like this:
<script>
$('body').on('click', '#lmao', function () { MyFunction(); return false; });
function MyFunction() {
alert('hello');
console.log(data);
console.log(this);
}
</script>
Test result:

Change glyphicon with class.onclick

I'm wondering how I can change bootstrap glyphicon when I click over my HTML button.
This is my button :
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
And this is my JavaScript part :
<script>
$(document).ready(function () {
$('.button-choice').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
});
</script>
I don't overcome to click on button and change glyphicon inside.
First, you have a typo (.button-choice instead of .btn-choice).
Then, you need to find the closest span and update it, otherwise the class will be applied to the button instead of the inner span, and won't work as intended.
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
aria-expanded="false" aria-controls="title">
<span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>
js:
$('.btn-choice').click(function () {
$(this).find('span').toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
//^----------^---- Note this! otherwise it won't work, since it would target $(this), which is the button.
});
Your fiddle, updated: https://jsfiddle.net/6ae0c1dL/2/
Your code seems to be the right way to make it. However, you are listening the click event on the wrong class :
$(".button-choice")
Instead of
$(".btn-choice")
EDIT :
You should also find your span into your button. One more thing, you can toggle multiple classes with one toggleClass() call :
$(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
I'd use an id to get the span containing the glyphicon. That id being unique in the page, this solution works only for 1 button. A workaround to this can be using some data-something to call the correct span.
Plus, you aren't calling the correct class for the button.
$(document).ready(function () {
$('.btn-choice').click(function () {
let spanId = $(this).data("spanid");
$('#' + spanId).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button data-spanid="theGlyphicon1" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon1" class="glyphicon glyphicon-chevron-down"></span>my button 1
</button>
<button data-spanid="theGlyphicon2" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title">
<span id="theGlyphicon2" class="glyphicon glyphicon-chevron-down"></span>my button 2
</button>

Show dropdown menu using external control

How do I make a Bootstrap dropdown appear when an ajacent button is pressed?
I have tried every combination of:
$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()
But I can't get it to work.
My html is:
<div class="btn-group">
<button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
<button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="branchFilter" class="dropdown-menu" role="menu">
<?PHP foreach ($branchList as $branchData) { ?>
<li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><?PHP echo $branchData->name;?></li>
<?PHP } ?>
</ul>
</div>
To clarify, I want the list to show if the "Branch" button is pressed, just like it would if I clicked the normal trigger button.
If you want the drop-down to open only on click of the "Branch" button, do something like this
$('#activeBranchFilterBtn').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
If you would like to get the drop-down when clicked anywhere on the complete block(either of the buttons), do this
$('.btn-group').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
I guess the second one is what you need.
UPDATE: class="open" will be toggled on your .btn-group when a dropdown trigger is given from the button with data-toggle="dropdown" attribute. just add this attribute to the first button(Branch) and you will be good to go. Check this fiddle. Hope this helps.

Categories