In my code there is a loop and inside that I have a <a> tag ; I want to generate its link by using a server-base code function; part of my code:
<div v-for="file in fileList">
<div class="badge">
<i class="fa fa-cloud-download"></i> {{file.name}}
</div>
</div>
Is there any way to do this?
As you may know server code runs before the javascript, javascript run on the client browser. So when your server-based code runs it sees all of the javascript code as a static text.
A possible solutions here: is you do a normal javascript function that calls a RESTful API which create a link and send it back.
Related
I'm trying to use Microsoft's client side validation along with a Content Security Policy
In my ASP Net Core (v3.1) razor view I have the following:
<div asp-validation-summary="All" class="text-danger"></div>
When the page is first rendered, I get a list item with no text, just the red dot.
The HTML has been changed by the client side validation javascript (jquery-validation):
<div class="text-danger validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
My Content Security Policy (CSP) prevents inline styles, so the inline style display:none doesn't work, hence the red dot.
I discovered unsafe-hashes and changed my CSP to:
style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=';
Unfortunately although this works in Chrome, Firefox and Edge, it doesn't work in Safari on my iPhone (iOS 14.5) or my Mac Mini (v11.2.3)
Can anyone suggest a fix for Safari, or perhaps how to change the Microsoft client side validation to not use the inline style?
Can anyone suggest a fix for Safari
Safari does not support 'unsafe-hashes' nor for style-src nor for script-src. Currently there is only one way of use 'unsafe-hashes':
style-src 'unsafe-inline'; style-src-attr 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=';
Chrome will follow style-src-attr directive, other browsers (Safari/Firefox/Edge) do not support it and will use 'unsafe-inline' from the 'style-src'.
how to change the Microsoft client side validation to not use the inline style?
The style="display:none" is added by jQuery-validator via .attr() method, which internally calls the setAttribute("style", ...). CSP counts setAttribute(style) calls as inline style, while element.style.property = 'prop_value' is not treated as inline style.
Therefore the task is ro change setAttribute("style") calls to the set of equivalent element.style.property calls.
jQuery has a special plugin to fix inline styles by replacing .attr() method to a safe el.style.property calls.
Alternatively you can fix any JS library by use a rough hack working the same way.
This is a known issue. aspnetcore/issues/43714
The Tag Helper asp-validation-summary="All" renders this:
<div class="text-danger validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"> #*CSP problem*#
</li>
</ul>
</div>
Workaround: Use the Tag helper only when there is something to display.
#if (ViewData.ModelState.ErrorCount > 0)
{
<div asp-validation-summary="All" class="text-danger"></div>
}
Dynamic multilingual sites from the backend to the replacement of large sites
I changed the language, but this time I am trying for the first time to do it at the front desk (Nuxt.js + i18n).
<a href="https://gooogle/en.com" data-link="fugafuga">
Without using nuxt-link
<template>
<a href="https://gooogle/｛｛t('locale')｝｝.com" data-link="｛｛t('hogehoge')｝｝" >
</template>
Is it possible to divert and use a tag as it is?
(In the above writing method, an error occurred and it was useless, so please teach me a workaround)
I18n t method wrapped in quotes in inside tag quote
How do I write it?
Such a shape is desirable because the scale is too large
We apologize for the inconvenience, but we would appreciate it if you could teach us.
thank you.
Suggested fix:
<template>
<a :href="`https://google/${t('locale')}.com`" :data-link="t('hogehoge')"></a>
</template>
You can read more about data binding with Vue/Nuxt here: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax
Server side rendering page for reference: ssr.html
Now the problem, what if we want to define template inside the <div id="app"></div> in html file itself, not in Vue instance template property? Like this:
<div id="app">You have been here for {{ counter }} seconds.</div>
In this case if we want to pre-render it, we will get next pre-rendered html:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
And here is the conflict problem. If we will output pre-rendered html, we lose our template and Vue doesn't know where to output counter inside our <div id="app">.
Is it possible somehow to provide template inside <div id="app"></div> container and in the same time pre-render it? Or provide template near the pre-rendered in html(so Vue will know that here is pre-rendered and here is template and i will use it if any changes happens in the model)?
Is it possible somehow to provide template inside container and in the same time pre-render it? Or
Short but complete answer: No. For Vue SSR, you cannot use in-DOM templates. You have to use string-based templates (including Single File Components).
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
I wanted to perform click on Panel element in Selenium Robot Framework
code below:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span href="#panel" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle panelTitle collapsed" id="panel" aria-expanded="false">Text 1<span class="toggle-icon"><i class="fa fa-plus-circle"></i></span>
</span>
</h4>
</div>
I want perform a click on "span" tag the whenever I write in my selenium robot framework as
Click Link (in first column) id=panel (in second column)
It doesn't work.
In my previous projects it was working fine but I am not able to make it work in this.
This is pretty hard to answer without you providing your test code or more detail but I suspect the element doesn't exist on the page when you try to click it? What error message are you getting? Providing this can help get an answer quicker.
Reading your question closer, are you using the right keyword, are you actually clicking a link? i.e. something contained in link tags? e.g.
all we've done together
Here's a rudimentary example:
Wait Until Page Contains Element panel 10
Click Element panel
This link should help you find further information if you require it: http://robotframework-seleniumlibrary.googlecode.com/hg/doc/SeleniumLibrary.html?r=2.8#Page Should Contain Element
Other libraries contain similar keywords you could use like the Selenium2Library