On an angular 12 application, I use a quite ordinary a with a routerLink.
First, I don't know why, it always refreshes my page... it relocates the whole page with each click.
Also, when I set the routerLink to "null", my link is still active. My href is set with the current page.
I've done the same thing in several applications and I don't get this behavior.
Anyone have any idea why it behaves like this?
Here is my html code for the link :
<ng-container *ngFor="let el of sidebarMenu">
<a class="sidebar-menu-item" [routerLink]="el.route">
<mat-icon fontSet="material-icons-round">{{ el.icon }}</mat-icon>
<span>{{ el.label }}</span>
</a>
</ng-container>
If I write "null", my link remains active on the current page.
Thanking you.
Translated with www.DeepL.com/Translator (free version)
I don't know why, but the code works if it's not dynamically generated...
The problem is fixed without the loop on the elements.
Related
I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:
I am using clarity signpost, I am using this signpost for showing multiple applications, how to close this sign post when i am click on the application.
For example I am adding three buttons in this sign post, if I click on the button this need to be close. Please check my stackblitz
To keep track of whether the signpost is open or not, and then be able to dynamically close it, you should use the de-sugarized syntax of clrIfOpen to utilize two-way binding:
<ng-template [(clrIfOpen)]="signPost">
<clr-signpost-content>
<button class="btn btn-outline" (click)="close()">Hr</button>
...
</clr-signpost-content>
</ng-template>
Here is your example with this change, working fine: https://stackblitz.com/edit/signpost-dynamic-close?file=src/app/app.component.html
In order to develop a CMS I have to provide users the facility of changing design. hence I don't know the way that's how I can use the data after retrieving from database.. For instance, if the user want the background color black and change the font-size .. then I have to write the code like (I don't know how to write the laravel code in style but I am given it here to make the question understood):
<div style="background-color:{{$queryResult->bgColor}};font-size:{{$queryResult->fontSize}}"></div>
You need to add background-color: and font-size:, May be you just adding the value
<div style="background-color:{{$queryResult->bgColor}}; font-size:{{$queryResult->fontSize}}"></div>
i'm using this line of code to display active class on menu while i'm on the page so may be this code direct you to do what you want.
<li class="{{ isset($data["page-tab"]) && ($data["page-tab"] == "list_user") || ($data["page-tab"] == "create_user") ? "active treeview" : "treeview" }}"></li>
in this $data['page-tab'] this value passed from my controller
and in the blade template i just check if value is comming than active class is used in that otherwise not.
so may i hope this leads to solve your problem
I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you
I have downloaded a template with a module called Publications. When the News Page is loaded it calls this .tpl file:
{title}{$category.title}{/title}
<div class="newsPage">
<h1>Latest News</h1>
{foreach from=$articles item=entry name=articles}
{if $smarty.foreach.articles.first}<dl><br />{/if}
<dt><a href="{$GLOBALS.site_url}/publications/{$category.id}/{$entry.id}/{$entry.title|replace:' ':'-'|escape:"urlpathinfo"}.html" class="title"></dt>
<dd>{$entry.description}</dd>
{if $smarty.foreach.articles.last}</dl></a>{/if}
{foreachelse}
[[There are no articles available at this time]]
{/foreach}
</div>
And there's the problem. If there are 1000 articles, all of them will be loaded and no pages will be created.
I'm trying to create a "show more" button with only the latest 4 articles displayed at first and then when the "show more" button is clicked, the next 4 articles will be displayed, and so on...
Is that possible? Can anyone help me with new ways to create a dynamic news section with this?
i still didnt install my editor, but you can give a div or any thing some property, which make that object hidden, i'm not sure if it was block, or hidden it self,
then you can also give it an id, and refer to it with java script, and as you already know a query language like jQuery, you can do it even simpler to refer to the div element, and change its property, (i didnt worked with jQuery), if it's about to be as a toltip, you can use your parent div/ image/ button/ any thing:
[style]:hover{display:block;}
for styles which normaly are:
[style]{display:none;}
or instead of display, u can use
[style]:hover{visibility:visible;}
for stle which are like this:
[style]{visibility:hidden;}
this is a ways which most of sites menus take advantage of
Solved. Changed the <dl> <dt> <dd> to <ul> <li> and then:
var vis = 5;
$('.news li').slice(vis).hide();
var $more = $('Mais')
$more.click(function(){
$('.news li:hidden').slice(0,vis).show();
if($('.news li:hidden').length == 0)
$more.hide();
});
$('.newsPage ul').after($more);