jQuery Not Responding to Second 'this' - javascript

I've written this function to switch between font awesome arrows:
function toggleClass() {
$('.fa-arrow-up').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-down').removeClass('fa-arrow-up')
// console.log($(this))
})
$('.fa-arrow-down').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-up').removeClass('fa-arrow-down')
console.log($(this))
})
}
$(toggleClass);
On the first click when the class is fa-arrow-up it works, when the class is fa-arrow-down and I click it for a second time, it is toggling the .info-section, but not replacing the fa-arrow-down with fa-arrow-up. Any suggestions on why this function is not working both ways?
UPDATE adding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js" crossorigin="anonymous"></script>
</body>
</html>

Hope this help you.
$('.fa-arrow-up').on('click', function(event) {
$(this).toggleClass('fa-arrow-down fa-arrow-up')
})
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js"></script>

I found a solution for the issue.
HTML
<button class="arrow-icon" type="button">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-arrow-down"></i>
</button>
CSS
.arrow-icon .fa-arrow-up{
display: inline-block;
}
.arrow-icon .fa-arrow-down{
display: none;
}
.arrow-icon.active-icon .fa-arrow-up{
display: none;
}
.arrow-icon.active-icon .fa-arrow-down{
display: inline-block;
}
JS
$(function(){
$('.arrow-icon').on('click', function(){
$('.info-section').toggleClass('hidden');
$(this).toggleClass('active-icon');
});
});

Related

ondrop function never called in electron

onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???

Why am I failing to get my JQuery tooltip to work?

I found this really cool Toolbar.js JQuery library that I would love to add to my application, though the instructions on the page seem pretty straightforward, I am having issues getting it to work.
Find below my simple HTML file put together as per instructions:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
<link href="css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
});
</script>
</head>
<body>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning">
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
</body>
</html>
The browser console does not render any error messages.
The HTML code renders the following image, but doesn't render the tooltips as desired:
Help!
What am I missing or doing wrong?
Your help is appreciated.
Prevent multiple elements with the same ID
id="gear"
Prevent elements with multiple ID's
id="toolbar-options gear"
Add toolbar css CDN link (instead off local file)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
After fixing those issues, it still doesn't seem to work.
It's appears the position: 'bottom' causes the error.
Setting it to top works as you can see in this demo:
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
.hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbar.js"></script>
<link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning" id="gear" >
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
The error is thrown in getCoordinates which shows:
getCoordinates: function( position, adjustment) {
var self = this;
self.coordinates = self.$elem.offset();
if(position == 'top') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2),
top: self.coordinates.top-self.$elem.height()-adjustment,
}
}
if(position == 'left') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2),
}
}
},
Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.

Need to get clicked elements 'Name' using Vue

I am using Vue and I need to know which element was clicked as 1 is an i and the other is a button so I can pass a variable to a modal which is the same one for both as I am sharing the model but depending on which one was clicked depends on which text is displayed.
The easy (but wrong/long way) is to just have 2 click methods and pass the variable but I'd rather do it in 1 method call instead so I am no duplicating code but every time I get undefined back.
Current code
<i id="a" name="editAddress" class="fas fa-pencil-alt fa-lg px-4" v-tooltip:bottom="'Edit this address'" #click="editAddress"></i>
editAddress(e) {
let curTarget = e.currentTarget;
let acurTarget = e.currentTarget.id;
let bcurTarget = e.currentTarget.name;
console.log(curTarget)
console.log(acurTarget)
console.log(bcurTarget)
Tried code
<i id="a" name="editAddress" class="fas fa-pencil-alt fa-lg px-4" v-tooltip:bottom="'Edit this address'" type="submit" #click="handleClick($event)"></i>
<button id="addAddress" name="addAddress" class="btn btn-primary" #click.prevent="addAddress">Add a new address</button>
handleClick(e) {
console.log('TARGET', e.target);
console.log('NAME', e.target.name);
},
I can't figure out where I'm going wrong. I have also tried replacing currentTarget with target but still didn't work
You should use getAttribute method as follows :
console.log('NAME', e.target.getAttribute('name'));
new Vue({
el: '#app',
methods: {
handleClick(e) {
console.log('TARGET', e.target);
console.log('NAME', e.target.getAttribute('name'));
},
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<i id="a" name="editAddress" class="fas fa-pencil-alt fa-lg px-4" v-tooltip:bottom="'Edit this address'" type="submit" #click="handleClick($event)">a</i>
</div>

Remove disabled class onclick

I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.

Add and remove rows in a form with unique id's that returns an object as an array

I already have my own solution for this problem, but then I don't know if I'm using the best techniques/practices to solve this particular scenario, which involves removing and adding DOM elements with unique id's.
I have just used jQuery, the requirements where only a button to add any amount of rows, once another row is added be able to delete that row too, the first row is always mandatory, here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>Simple form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
label{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="row inputRows">
<div class="col-sm-12" id="newRow-1">
<label>Some label over input</label>
<input type="text" name="txt">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button id="addRow"><span class="fa fa-plus"></span> Add </button>
<button id="viewInfo"><span class="fa fa-plus"></span> Info </button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="result">
</p>
</div>
</div>
</div>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.inputRows').on('click', 'button' ,function(){
$(this).parent().remove();
});
$('#addRow').click(function(){
var $newRow = $('div[id^="newRow"]:first').clone(),
newId = Number($('div[id^="newRow"]:last').attr('id').split('-')[1]) + 1;
$newRow.append('<button><span class="fa fa-trash-o"></span></button>');
$newRow.find('input').val('');
$newRow.attr('id','newRow-' + newId);
$('.inputRows').append($newRow);
});
$('#viewInfo').click(function(){
$('#result').text(JSON.stringify(objectifyForm($('div[id^="newRow"]'))));
});
function objectifyForm(formArray) {
var resultArray = {},
inputValue = '';
for (var i = 0; i < formArray.length; i++){
inputValue = $(formArray[i]).find('input').val();
if(inputValue){
resultArray[$(formArray[i]).attr('id')] = inputValue;
}
}
return resultArray;
}
</script>
</body>
</html>
So the code works, the only problem I see is that the numeration of the id's, can sometimes be 1,5,8,7,6,12 depending on which ones you delete, but then it's fine because in the end, it doesn't even matter (joke, RIP Chester, but kind of true). My main concern or question is, is there any other way of achieving this more efficiently using jQuery? Am I doing something wrong by cloning the first element multiple times? If you can share some knowledge on DOM manipulation that would be great.
Thanks in advance,
Leo.

Categories