Issue
So I have an onclick that directs to a linkedin page here:
<li id="toHover" onclick=" window.open('https://www.linkedin.com/in/jvanderkooi/?originalSubdomain=nl','_blank')" class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
This works great, it opens a new window with the provided url and leaves the other one open. However, I dont want to use this in-build url but want this element to get the url attribute of a certain user. Something like this:
<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')"
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
When i do this, a new window opens up the root of my web app. Im currently running this on localhost only so I get to http://localhost:8080 where my app is running instead of the linkedin page url provided.
I tried doing this a bunch of different ways but just can't seem to get it to work. What am I missing here?
Edit: Here is the rest of the div that i am looping through for this in case it clears things up.
<div class="container" id="main-container">
<div class="row">
<div *ngFor= "let user of users" class ="col-md-6 col-xl-3">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-6">
<!-- <a href=""><img src="{{user?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60"></a> -->
<a href=""><img src="{{user?.photo}}" alt="" class="img-fluid rounded-circle w-60"></a>
</div>
<div class="col-6 card-naam align-self-center mb-0">
<h5>{{user.name}}</h5>
<p class="m-0">{{user.function}}</p>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{user.email}} <a href="#"></a></li>
<li class="list-group-item"><i class="fa fa-phone float-right"></i>Nummer: {{user.phoneNumber}}</li>
<li *ngIf="user.admin" class="list-group-item"><i ></i>Admin</li>
</ul>
<div class="card-body">
<div class="float-right btn-group btn-group-sm">
<a (click)="onOpenModal(user, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Edit"><i class="fa fa-pencil"></i> </a>
<a (click)="onOpenModal(user, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Delete"><i class="fa fa-trash"></i></a>
</div>
<ul class="social-links list-inline mb-0">
<style>
#toHover{
cursor: pointer;}
</style>
<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')"
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip"
class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
Solution
It is due to anchor a
element inside the li
.
Use the below
<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" ></li>
If you need to use a
tag, then you can try this and specify target blank
<li id="toHover"
class="list-inline-item"><a naam="" target="_blank" href="user.linkedinURL" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
Answered By - Bala
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.