I am using some custom icons in my application, as show below.
However when I refresh the page, or sometimes on some other action, the icons change to these garbage symbols. This happens randomly. Is there any permanent solution for this?
Here is a bit of the sample code where these icon classes are used. These are custom icons and the icon.css is added to the assets folder.
[ngClass]="{'disable':disableDeleteIcon()}" (click)="deleteContact()"></span>
<span class="icon-edit grid-renderer-edit-icon" title="Edit"
*ngIf="params.colDef.headerName == 'Action' && !params.isDeletedRecords" [ngClass]="{'disable':disableEditIcon()}"
(click)="editContact()"></span>
<span class="icon-refresh grid-renderer-restore-icon" title="Restore"
*ngIf="params.colDef.headerName == 'Action' && params.isDeletedRecords" (click)="restoreContact()"></span>```
Related
The configuration of the environment is as follows.
java 1.8
htmlunit 2.43
_webClient = new WebClient(BrowserVersion.FIREFOX);
// ajax, javaScript controller
_webClient.setAjaxController(new NicelyResynchronizingAjaxController());
// set options
_webClient.getOptions().setJavaScriptEnabled(true);
_webClient.getOptions().setCssEnabled(false);
_webClient.getOptions().setUseInsecureSSL(true);
_webClient.getOptions().setSSLClientProtocols( _webClient.getOptions().getSSLClientProtocols() );
//_webClient.getOptions().setSSLClientProtocols(new String[] {"TLSv1.2", "TLSv1.1", "TLSv1" });
_webClient.getOptions().setRedirectEnabled(true);
_webClient.getOptions().setPopupBlockerEnabled(false);
_webClient.getOptions().setThrowExceptionOnScriptError(false);
_webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
_webClient.getOptions().setPrintContentOnFailingStatusCode(false);
_webClient.waitForBackgroundJavaScript(10000);
// set timeouts
_webClient.getOptions().setTimeout( timeout *1000 );
_webClient.setJavaScriptTimeout( timeout *1000 );
_webClient.waitForBackgroundJavaScript( timeout *500 );
//_webClient.getJavaScriptEngine().setJavaScriptTimeout( timeout *1000 );
_webClient.waitForBackgroundJavaScriptStartingBefore(timeout *1000);
_webClient.getCookieManager().setCookiesEnabled(true);
The above is my environment.
Below is the HTML Element I want to click on.
<div class="btnConfirmWrap">
<button data-v-ffa8b1e8=""
class="hasBgColor bgColorRed roundType sizeMedium alignLeft">
<span data-v-ffa8b1e8="" class="inner"> <!----> <span
data-v-ffa8b1e8="" class=""> Login </span>
<!----></span>
</button>
</div>
This is the code for clicking on the html element mentioned above.
The content of the XPath is the fullXpath of the web page obtained by accessing Chrome.
I checked the XPath path myself. XPath wasn't wrong.
hElement = getByXPathFirstElement( _htmlPage,"/html/body/div[1]/main/div/div[1]/div/div[4]/button");
Page page = hElement.click();
_htmlPage = (HtmlPage) page;
System.out.println(_htmlPage.asText());
I checked that _htmlPage.asText() had ID and PW values before clicking the login button.
However, if you click the button, the login button function is not executed and the ID and PW values are lost. ID and password are correct values.
Can't log in, help me
It works very well if you directly access the site and log in. But htmlunit doesn't work. What's wrong with my code?
Without a way to reproduce i can only provide some hints:
As always check the logs, mabey there is a hint....
These two functions are not options
_webClient.waitForBackgroundJavaScript( timeout *500 );
_webClient.waitForBackgroundJavaScriptStartingBefore(timeout *1000);
You have to call them after you have started an action (e.g. after the click)
Page page = hElement.click();
_htmlPage = (HtmlPage) page;
Your code gets thy sync resulting page form the click. But maybe you click forces some js actions and maybe the action is async and maybe the action forces a page replace. You can try to do something like this:
force the click
wait for background js
get the current window content by asking the page for the current window and then asking the window for the enclosed page
Maybe this helps.
If not try to build a reproducible sample and open a issue at github.
<div className="image" style={{ backgroundImage: `url(${entity.image_url})`}} />}
I am setting a background-image by passing the url as an inline style attribute. However, there will be times when the image link is broken. I am familiar with the onerror event of the tag. However I am not familiar with how I can detect a broken link when setting a background image. I was thinking of attempting to load the image in a hidden and use the onerror attribute, but this requires me to load the image twice, which is wasteful. What is a better way to do this?
The old school style is to pre load all images.
Preload Images
Now you has the Image in a js object and does not to load the image again or twice. By this you can also check if its broken Detect broken images. And for sure if you use the clever AJAX way of life you can also detect and replace broken images.
why not write some JS and test the entity.image_url. if you don't get an object back it will come up as undefined or null. wrtie an if statement for both to cover the possibilities.
if (entity === undefined || entity === null) {
//write an error message
} else {
//drop a dynamic template literal into your html
//you can either appendChild() or build a string and user innerHTML
}
This is how I was able to do it in React:
import noImage from <local_image_path>;
{(entity && entity.image) ?
<div style={{backgroundImage: `url(${entity.image}), url(${noImage})`}}/> :
<div style={{backgroundImage: `url(${noImage})`}}/>
}
This takes care of two cases. Case 1: broken image link. If there is a 404 on the entity.image url, noImage is loaded. Case 2: entity.image is undefined, noImage is loaded.
I am using font-awesome version 4.7.0 with Angular 5. When I add an icon to a screen the icon immediately changes from tag to and I cannot access its class from an Angular component which is what I want to do.
The resulting behavior is that the first icon defined is shown properly but any subsequent changes I make that should be reflected on the UI with a change of the font awesome icon are not shown at all.
The specific problem is that I wan the icons to change when sorting a table. The initial icon is set up to be fa-sort, and it displays correctly, but when clicking on the table header, the content gets sorted and updated but the icons dont change to fa-sort-up or fa-sort-down. I've tested the logic and it works properly.
The current HTML code which should be performing this action looks like this:
<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>
This is because fontawesome replaces your tag with . To change icons use this template (use in class that you need):
<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>
Try maybe assigning the icon within the component code itself, such as:
in Component
getIcon(){
sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' :
'icon-sort-down'
}
I think it has to do with change detection, or you can manually trigger it after you sort, by importing change detection.
ex:
`constructor(cd: ChangeDetectorRef) {}`
and then in your code,
this.cd.detectChanges();
I'm using a basic Wordpress (or Google Sites) page to randomly redirect to one of three URLs. I'm not sure how to do this in HTML. The idea is to have a big button in the middle of the page which, on click, will send you to one of three links randomly. Any advice would be appreciated.
You couldn't do that only with html, you will need to do that with javascript.
You must store the links in an array and on click on the button call a function that randomly choose a link and go to it.
In the example below I only display the chosen link so you can click how many time you want to see the link change. Remove the line that do that and uncomment the line that make the redirection work.
var locations = ['https://google.com', 'https://stackoverflow.com', 'https://bing.com'];
document.getElementById("redirectButton").onclick = function () {
var link = locations[Math.floor(Math.random() * locations.length)];
// Remove this line
document.querySelector('.link').innerText = link;
// Uncomment this line
// location.href = link;
};
<button id="redirectButton">Random redirection</button>
<!-- You don't need that --> <p class="link"></p> <!-- Remove it on your site-->
I am just wondering if it is possible to reference somehow to languages resources within of HTML
I have this HTML i.e.
#Html.Grid(Model.Requsition.RequisitionProductLines).Columns(columns =>
{
columns.Add()
.Encoded(false)
.Sanitized(false)
.SetWidth(20)
.Titled("Actions")
.Css("hidden-xs") //hide on phones
.RenderValueAs(x =>
#<b>
<a class="glyphicon glyphicon-minus glyphiconPlusBtn" style="float:left;" href="#Url.Content("~/Requisition/Product/Delete/" + x.ProductUID)"
data-placement="right" data-original-title="Click here to delete this Product." data-toggle="tooltip"></a>
</b>);
columns.Add(x => x.Product.Name)
.Titled("Name")
.SetWidth(130);
and for another hand Resources files under Properties folder.
I found how I can get resources.
1) At the top of file add
#using YourModelEntities.Properties
Where YourModelEntities is your project where you keep translated resources.
And Properties is a folder where you keep your Resource.de-DE.resx files.
2) Add refernce where you need it i.e.
#YourModelEntities.Properties.Resource.Products
Thats all!