I am trying to add context menu but value is not populating.
<div class="m-l">
<a class="item-country text-orange" href="#/app/CountryIps/{{item.data['name']}}/cCode/{{item.data['country-code']}}" target="_blank">
{{item['data']['name']}}
</a>
<a class="item-ip" href="#/app/showIps/{{item.data['name']}}/ip/{{item.data['Ip']}}" target="_blank"><span context-menu="whiteList"> {{item.data['Ip']}}</span> </a>
{{item.data['type']}}
<a class="detail-icon" data-popup-open="popup-1" href="" ng-click="showModal(item)">
<i class="fa fa-info-circle"></i>
</a>
</div>
Javascript
$scope.whiteList = [
['Add to white list', function($itemScope, $event, ip) {
whiteList(ip);
}]
];
Now when I add context from template I got undefined in ip in controller.
<a onClick="window.location.href='your link'">
I fixed it by myself to checking values of the $itemscope.
$itemScope.$parent.item.data.Ip
To get the value of the IP from template to controllers.
Related
I'm trying to use Font Awsome in my web poject,
I've added the link:
<script src="https://use.fontawesome.com/bedf006dec.js"></script>
When I add font awesome directly to my HTML like this:
<div class="topbar">
<div class="topbar__elements container">
<div class="topbar__left">
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span> Middle East Airlines Ground Handling</span>
</a>
<a href="mailto:meag#meag.com.lb" target="_top" rel="noopener noreferrer">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span> meag#meag.com.lb</span>
</a>
<a href="tel:00961 1 622700">
<i class="fa fa-phone" aria-hidden="true"></i>
<span> +961 1 622700</span>
</a>
</div>
<div class="topbar__right">
Career
Contact Us
</div>
</div>
</div>
It works fine:
I'm also using tiny slider and I want to change the text of the previous and next buttons to have Font Awsome icons, I know that I can create custom buttons with tiny slider directly in the HTML code but I'm trying to use the default controls of tiny slider, therefore to try and change the text of these 2 buttons I'm using javascript:
const prevBtn = document.querySelector(".tns-controls").firstChild;
const nextBtn = document.querySelector(".tns-controls").lastChild;
prevBtn.innerHTML = "<i class='fa-solid fa-angle-left' aria-hidden='true'></i>";
nextBtn.innerHTML = '<i class="fa-solid fa-angle-right" aria-hidden="true"></i>';
But it doesn't work and give me this:
Even though when I open the developer tools it looks like as if it worked.
iam a Django BackEnd Developer and i have created a Blog
i just want to know how to color slected Arrow after user Vote for specific Post and save it
this is Arrow Html:
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}"
<i class="fas fa-arrow-down"></i>
</a>
Just add an ID and an onclick function for the element you want to select with JS and after you selected it, change it's color:
function arrowClickUp() {
document.getElementById("arrowUp").style.color = "red";
}
function arrowClickDown() {
document.getElementById("arrowDown").style.color = "red";
}
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i onclick="arrowClickUp()" id="arrowUp" class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}">
<i onclick="arrowClickDown()" id="arrowDown" class="fas fa-arrow-down"></i>
</a>
Note: you should link the font library you using to you snippet, because you'll see nothing
Problem:
I am writing a tracking electron app where the user data is stored on a local JSON file. Essentially i have the cards (user info from json) loaded to display via html. My next step is to run the python backend, problem i am having is I currently can't load the correct array value, only the last one is currently loading into a variable that im trying to pass to python. Since im using forEach i shouldn't have to count or do i still need to do that?
What I expect to happen:
I want an alert to pop up with the current user.handle value. What happens now is it only pops up the last value in the array regardless of which card i press. How can i make each button press trigger the corresponding handle value?
When i test and swap out onclick="myFunction11()" with onclick=alert('${user.handle}') it prints the correct handle value. So i can assume i am just overwriting var city every time and left with the last one in the array. Any advice on how to correctly have myFunction11 pull the corresponding handle value i would love. thanks
Question:
How can i correctly have myFunction11 pull the correct handle value from the array? or is there a better way to achieve this?
Code:
$(document).ready(function() {
users.forEach(function(user) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>
<script>
function myFunction11() {
var city = '${user.handle}';
alert(city);
}
</script>
`);
});
Adding duplicates of the same function is indeed bad practice. Your way when you have three users you will have defined function myFunction11 three times. And in fact (as you guessed) you end up with the function only having the last value of city.
Instead, this should be better:
$(document).ready(function() {
$('.team').append(`<script>
function myFunction11(city) {
alert(city);
}
</script>`);
users.forEach(function(user) {
$('.team').append(`
...
<i class="fa fa-pencil"></i>
...`);
});
define function outside loop and pass user index as parameter
function myFunction11(index) {
var city = users[index].handle;
alert(city);
}
$(document).ready(function() {
users.forEach(function(user,i) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>`);
});
});
I have many links from the same web but with different dirreciones
<a href="somelink.com/1" title="this link">
</a>
<a href="somelink.com/2" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
He tried to use the code but it does not work for me since he searches for a specific url and not all
var a = document.querySelector('a[href="somelink.com"]');
if (a) {
a.setAttribute('href', 'replacedlink.com')
}
<a href="somelink.com" title="this link">
</a>
How could I do it in a massive way and do it to all the url of a web site in estecifico for example: somelink.com
You could use an attribute selector ^= to check if the href starts with somelink.com. Then you could replace the url :
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = x.href.replace("somelink.com", "replacedlink.com")
);
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>
If you want to replace the whole link, you could set the href attribute to the new link:
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = "replacedlink.com"
)
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>
Try adding class to the links and then use get element by class and replace the link
my url
var i=document.getElementByClass("abc");
for(let j=0;j<i.length;j++){
i[j].href='newUrl';
}
For multiple items we can replace this way:
var a = document.querySelectorAll('.your_attr_class').forEach( (item)=>{
if(item.href.startsWith('http://somelink.com')){
item.href.replace('http://somelink.com','http://replacewith.com');
}
});
I am pushing a new object in the array but couldn't see the new value updated on UI. I am using angular js here and updating a value. here is my code.
html
<ul id="list-wrapper-noti" class="dropdown-menu dropdown-menu-right style-3" >
<div infinite-scroll-disabled = "disableScroll" infinite-scroll='loadMoreNotifications()' infinite-scroll-distance='0' infinite-scroll-container="'#list-wrapper-noti'">
<li >
See all
<a class="pull-right" href="list.php?id=20" style=" color:#3C71C1;">Mark all as read </a>
</li>
<li style="height: 30px"></li>
<li ng-repeat = "notification in notifications track by $index">
<a style="text-decoration:none; color:#534D4D" href="{{notification.href}}" >
<div class="media">
<img src="https://papa.fit/routes/images/inst_logo/default.png" alt="fakeimg" class="img-circle pull-left" style="height:50px; width:50px;">
<div class="media-body">
<div class="media">{{notification.employee}} {{notification.action | lowercase}} {{notification.element}} {{notification.record_value}}</div>
<span class="muted">{{notification.time_string}}</span>
</div>
</div>
</a>
<div class="divider"></div>
</li>
controller
function addNewNotification(new_noti){
var obj = {"action":new_noti.data.action,"element":new_noti.data.element,"record_value":new_noti.data.record_value,"time_string":new_noti.data.time_string,"employee":new_noti.data.employee};
$scope.notifications.unshift(obj);
console.log($scope.notifications)
}
and from here I am calling this func
angular.element('#list-wrapper-noti').scope().addNewNotification(payload);
I don't know why it is not getting updated after push in array.please anyone help ?
Inject $timeout into your controller and try this:
$timeout(function() {
$scope.notifications.unshift(obj);
});