I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
Related
I have a button that shows a bootstrap modal, it has an onclick attribute set to a function,
The button:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}"
type="button" data-bs-toggle="modal" data-bs-target="#grade-modal"
onClick="getEnrolledSubjects(this.getAttribute('data-id'))">
<i class="fas fa-plus"></i>
</span>
My javascript function:
function getEnrolledSubjects(id){
var modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(){
console.log(id)
}
}
at first, it looks fine because it will only log the id once, but when I close the modal and open it again, it will log 2 times, then 3 times, and so on... it goes incrementally. how can i fix this?
as Bootstrap Modal documentation
You can Use event.relatedTarget:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}" type="button" data-bs-toggle="modal" data-bs-target="#grade-modal">
<i class="fas fa-plus"></i>
</span>
without onClick event
const modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(event){
const button = event.relatedTarget
const id = button.getAttribute('data-id');
console.log(id)
})
A demo of my dilemma here
Let's say I have the following html:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="main" id="thingSection">
<h1>
Test Header
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content1">
Some content
</div>
</div>
<hr />
<div class="main" id="thingSection1">
<h1>
Another Test
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content2">
Some content
</div>
</div>
<hr>
<div class="main" id="thingSection2">
<h1>
Another test, you say?
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content3">
Some content
</div>
</div>
</body>
</html>
I am using the following jquery to change the toggle icon from FontAwesome from off to on:
$(function() {
$('.btn-icon').click(function() {
if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
$("i.fa-toggle-off").toggleClass('fa-toggle-on');
} else {
$("i.fa-toggle-on").toggleClass('fa-toggle-off');
}
});
});
When I click the button to toggle the icon, it works as expected, i.e. it changes all of the buttons on the page. However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.
I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section. That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.
I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.
I'm a novice with jquery. I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.
EDIT: I've accomplished (partially) what I want to do with the following code:
$(function() {
$('.btn-icon').click(function() {
var t = $(this).find('.is-toggle');
if (t.hasClass('fa-toggle-off')) {
t.addClass('fa-toggle-on');
t.removeClass('fa-toggle-off');
}
else {
t.addClass('fa-toggle-off');
t.removeClass('fa-toggle-on');
}
});
});
Looks like I just didn't understand what exactly $(this) was (:
All you need is $(this) that selects the element that triggered the event. From there you can select down to the div you want.
EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it
$(function() {
$('.btn-icon').click(function() {
$(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
});
});
I am trying to change the text of a button when clicked and back to normal when clicked again. The button is using a font awesome icon so figured I would try using this.html instead of this.text, but for some reason it is not recognising the HTML I am indicating?
If I change the HTML on the else statement then it will change on click which is what makes me think it is an issue with it not recognizing my HTML.
I know it might be something really stupid but cant seem to figure it out.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
{
$(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
} else {
$(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
}
})
});
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
onclick="retrieveData()"
>View code <i class="fas fa-chevron-right fa-xs"></i></button>
</div>
It seems as if the only change is the text ( "View || Close ") so you can simply put that variable text in spans - one with a display: none styling and then on the click - toggle the visibility of each.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
$(this).find('span').toggle();
})
});
#submitbutton span:nth-of-type(2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
>
<span>View</span>
<span>Close</span>
code <i class="fas fa-chevron-right fa-xs"></i>
</button>
</div>
I have a Javascript function that prints "like" and "Unlike" like this:
$(".liketoggle").click(function () {
$(this).text(function(i, v){
return v === 'Like' ? 'Unlike' : 'Like'
})
});
I have an HTML tag that shows a heart in an tag as:
<i class="fas fa-heart"></i>
How can I show the heart icon next to the like/unlike button. This is the HTML so far:
<button type="submit"
class="btn btn-custom btn-sm liketoggle"
name ="like">Like
</button>
<i class="fas fa-heart"></i>
How I can write to the JS to be included when toggling it?
Similar Function here: http://jsfiddle.net/dFZyv/ but same issue
I have this situation:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.self.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
Now, when I click on link it's ok, but if I click on <i> (which is inside of <a>) nothing happens (because of #click.self.stop).
What I would like to achieve is to trigger same method, in this case removeRow(), no matter if I click <a> or <i> is clicked. I need to get data-id attribute form ahref.
What I would like to achieve is to trigger same method, in this case removeRaw, no matter if I click <a> or <i> is clicked.
From what you say, you actually have to just remove the .self modifier.
Per docs (Event Handling/Event Modifiers/.self):
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
See changed code below.
new Vue({
el: '#app',
data: {
rows: [{id: 1, name: "row1"}, {id: 2, name: "row2"}]
},
methods: {
removeRow($event) {
console.log($event.currentTarget.dataset.id)
}
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="app">
<div v-for="row in rows">
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i> {{ row.name }}
</a>
</div>
</div>
The only modified bit in the template was #click.self.stop="removeRow($event)"
to #click.stop="removeRow($event)".
In the JS part, I created a rows just to test, and added console.log($event.currentTarget.dataset.id) to show how to get the id.
Then you don't need to use stop propagation or call function on self:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.prevent="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
prevent is used to prevent the default link action.
You can use currentTarget instead of target to identify the attached element and get the href value from there.
$event.currentTarget.href
Alternatively, why not just to set the value in params:
#click.prevent="removeRow('your-value')"
In your method:
removeRow(myvalue) {
// do whatever you want to do with myvalue
}
The solution is quite easy. use #click.stop
#click.stop(openUser(user))
You can use the following sample to get it to work.
Run the code and click on the three texts, but you will only get the data-id value of the child and parent divs
new Vue({
el: '#app',
methods: {
init($event){
let el = $event.target.nodeName
var id = null;
if(el == 'A'){
id = $event.target.dataset.id
}
if(el == 'I'){
id = $event.target.parentElement.dataset.id
}
console.log( ' id', id)
}
}
})
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<a href="#" #click='init' data-id='42'> Inside A <br/>
<i>Inside I</i>
</a>
</div>