I have a table on HTML and each row leads to a different page, with more details about that row. But as I am using angularjs, with ng-click I can't right click this row and select 'open in a new tab'. Is there any way to solve it?
Thanks in advance!
If possible you should convert your element to an anchor element.
<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>
The browser will interpret the element as a link, and will therefor give you the correct dropdown.
Note that you also have to have the correct href value to open in a new tab.
EDIT:
I would recommend this question if you want a more detailed answer on how to fix this kind of behaviour using JQuery.
Inside your ng-click function you can call window.open(url, '_blank') however as a word of warning, this will depend on the browser and current settings.
In some cases this will open in a pop-out window and in other cases it will open in a new tab. There is no way to force either behavior as the javascript is browser agnostic, it has simply requested a new window and it is up to the browser the decide how to implement it. see here for a discussion on forcing a tab or window
However the only way to get that right-click option or the ctrl+click to open in a new tab is if the browser sees a <a> tag. Otherwise it doesn't treat it as a link.
If you want to generate your href dynamically based on some condition then you can set your href on ng-mousedown event and after that you can perform any event like open link in new tab, open link in new window and click.
HTML:
{{label}}
JS :
$scope.openDetailView = function (event, userRole) {
if(userRole == 'admin') {
jQuery(event.target).attr('href', 'admin/view');
} else {
jQuery(event.target).attr('href', 'user/view');
}
};
You have to use anchor element inside the table row.
HTML
<tr>
<a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>
Controller
$scope.openItem = function (event) {
event.preventDefault();
// code to open a item
}
Related
I have the below code
<a href="/program/2" (click)="onSelect(2)" >{{"2"}}</a>
The problem with this solution is that when I click, the function works, but href also is activated.
What i want to do is that when i click the method is called and the href is not called.
When i tried right click and choose "open new Tab" then the href is activated, and the method isn't closed.
Usually, I could solve this problem by using [routerLink] as it allows me to open the function and it will also allow new-tab on right-click.
<a [routerLink]="onSelect(2)" >{{"2"}}</a>
But I can't use it as I have an exception here:
parent(ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked).
Is there any other solution that will allow me to call the function on click, and when I do right click it can go to the href="/program/2".
Note: I want the href to go to a new page (when I right-click). When I click it should remain on the same page as I am calling the parent which later adds /program/2 to the route.
define target as _blank to tag
<a [routerLink]="onSelect(2)" (contextMenu)="openExternal('/program/2')" >{{"2"}}</a>
and in your component add method:
openExternal(link) {
window.open(link, "_blank")
}
You can add a target to element, like this
{{"2"}}
with: target="_blank" the link will open in new tab and with href="javascript:;" you avoid the href get activated on click.
I am having a list of elements say
<li [class.active_view]="Display('A')" (click)="Az()">A</li>
<li [class.active_view]="Display('B')" (click)="Bz()">B</li>
<li [class.active_view]="Display('C')" (click)="Cz()">C</li>
Currently whenever a user clicks on any of the tab I use
this.activatedroute.queryParams.subscribe(query => {
//some_code_to_set_url
});
and then I use this url to navigate to that.
But using <li> I am unable to enable Open in New Tab option on right click. Is there a way to achieve it using <li> tag.(I tried using href but it breaks url and replaces many symbols like ? with %3F etc). How to open it in new tab and enable it on right click.
That option is only available if you are using <a> tags. That's why they are there for. Also, this is semantically incorrect. Say, screen readers and other software that merely go by code, will not be able to access those as links.
Also, to make them open in new tabs, either:
Change them to <a> and give target="_blank".
Use window.open() function to open the URL.
In Angular JS, the window.open can be invoked using $window service:
.controller('exampleCtrl', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToGoogle = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);
Reference: Open a new tab on button click in AngularJS
I think you always can use a work-around (I don't check the code, but my idea is)
in your component
<li [class.active_view]="Display('A')" (click)="Az(newpage)">A</li>
<form #newpage [action]="url" target="_blank">
Your function Az
Az(form:any)
{
this.url="google";
form.submit();
}
I want to know how in this web site, when I hover the mouse over report ad of the page, it show the link as ....com/***/***#report-item, but when I click on it, it shows me a pop-up. but still the original URL is not changing to ....com/***/***#report-item?
I checked the source of the page, and it shows the link code as:
<span><i class='ico-report'></i>Report Ad</span>.
That is because they prevent the browser from doing what it is meant to do (default event).
Here is the JavaScript code for that:
event.preventDefault();
You can include that inside the element, something like
Link
And inside the function, add that code. It would prevent the default function; that is to change the URL.
Maybe they're using jQuery for that because I can't see any sort of onclick="" inside the element. So what they might be doing would be this:
Generate Report
and the jQuery code would be as:
$('a.report').click(function () {
event.preventDefault(); // prevent the default function of the hyperlink
/* show the pop up */
});
This way, the website is preventing the default function and is using that link to do some other function.
Here is a fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/3zPd6/
To get the Elements Attribute
To get the element's attribute in JavaScript you use the following code
document.getElementById("hyperlinkId").href;
This would get you the href of the hyperlink. And you can reference it in your call.
I want to open image link in new window and also 2 new tabs in previous window at a time .
Kindly tell me how i can do this with html/java script code or whatever way ?
just simply you should add javascript event on image link and use this code;
<a id="test" href="your address for main window"> <img> </img> </a>
<script type="text/javascript">
document.getElementById("test").onclick = function(){
window.open("url to open in new tab",'_blank');
return true;
}
</script>
important to give a return true (or don't using a return in onclick function).
If you wanna do it in only js you can execute two window functions on onclick:
document.getElementById("test").onclick = function(){
window.open("url to open in new tab",'_blank');
window.open("url to open in main window",'_blank');
}
something like that should work. :)
Technically it depends on the individual settings of the users browser to open URLs in tabs or new windows so whatever you use will be subject to those settings and potentially unreliable.
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs