I am using a protractor to get the text in the second Div within #myDiv. Can someone please advise how can I get a text from the second Div (complete Text) which is 'This is a sample text'. I tried getting text in #myDiv but it adds spaces before the phrase. I want to exactly get the text from the 2nd child element of the after #myDiv.
<div id='myDiv'>
<span> (this is second div)
<a name="aTag"></a>
<madcap:concept term="DoSomething">
This
<span class="myClass">
is a
</span>
sample text
</madcap:concept></h1>
</span>
</div>
please try with following-sibling xpath as below :
element(by.xpath("//*[following-sibling::div[#id='myDiv']]"))
Hope this works!
let text = await element(by.xpath('//div[#id="myDiv"]//span[1]')).getText();
console.log(text)
worked fine for me
I added your html in component html and checked it.
Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.
I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.
<div data-sly-unwrap data-sly-use.test="test.js"></div>
<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >
The content I authored is getting displayed in class and Id, but it is not displaying in the onClick method.
Below is the Output am getting after authoring.
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >
Output I needed is :
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >
This should do the trick:
<a data-sly-test.variable123="toggleDraw('${test.testId}')" href="#" class="${test.testId}" id="${test.testId}" onclick="${variable123 # context='attribute'}" >
You need to put the function call in a variable because of the nested single quotes. And you need to manually set the context in this case. If "attribute" does some escaping you do not like, you could use "unsafe" - this will end in all escaping mechanisms being disabled. That might or might not be a security issue for your application.
HTH
I've a mixed HTML / JS template, when I'm working with JS arrays, Fluid tries to make autosubstitutions.
Is there a way to escape curly brackets in Fluid template ?
UPD :
Actual working syntax to escape JS parts is :
<script type="text/javascript">/*<![CDATA[*/
/*]]>*/
var llKeyOne = '{f:translate(key:"key1")}';
var llKeyTwo = '{f:translate(key:"key2")}';
/*<![CDATA[*/
var myTranslations = {
llKeyOne: llKeyOne,
llKeyTwo: llKeyTwo
};
/*]]>*/</script>
Try to use
<![CDATA[...]]>
tags around your JS code.
The CDATA solution stopped working in 8.7
I managed to solve the problem using alias in a usecase that heavily mixes javascript and fluid. {l} stands for left (open curly bracket) and {r} stands for right (close curly bracket):
<f:alias map="{l: '{', r: '}'}">
var alter = {};
<f:for each="{alterDB}" as="a">
if (!alter[{a.einsatz}]) { alter[{a.einsatz}] = {}; }
alter[{a.einsatz}][alter[{a.einsatz}].length] = {l} label: "{a.bezeichnung} ({a.kuerzel})", value: {a.uid} {r};
</f:for>
</f:alias>
Since it didn't worked for me in TYPO3 v8.7.16 with the <![CDATA[]]> solution above, I wanted to share my own solution. My "hack" to escape the brackets is to wrap those with a <f:format> viewhelper.
My goal was to output this in the frontend (400 and swing are fluid variables):
<ul data-animate="{duration:400, easing:'swing'}">
...
</ul>
I did this in the Fluidtemplate and it worked perfectly:
<ul data-animate="<f:format.raw>{</f:format.raw>duration: {data.myfield1}, easing:'{data.myfield2}'<f:format.raw>}</f:format.raw>">
...
</ul>
Solution working in TYPO3 9.x / 9.5.x
To avoid too much markup around curly braces which has a "not so nice" impact on the summary markup (readability and IDE support / highlighting) here an additional solution.
Possible limitation:
In our case the fluid template only contained fluid template variables within the templates head section followed by the entire markup which is processed/rendered by angular.js.
So we've created a partial for the angular.js part and included those inside the main fluid template.
Example:
The included partial file now starts using a {parsing off} statement (see example below).
Partial (simplified):
{parsing off} <!-- This solved all our issues -->
<div ng-show="showSlider">
<div class="slider" data-test="slider-wrapper">
<div class="row">
<div class="slide-indicator-mask col-lg-12">
<div class="slider-scope page-{{firstSlide}}"></div>
</div>
</div>
</div>
Use a fluid-Variable to add "![CDATA[" into your script.
I use the the tag-notation of fluid in javascript, because the syntax-highlighting works better with it.
<script type="text/javascript">/*{startCDATA}*/
var llKeyOne = '<f:translate key="key1" />';
var llKeyTwo = '<f:translate key="key2" />';
var myTranslations = {
llKeyOne: llKeyOne,
llKeyTwo: llKeyTwo
};
/*{endCDATA}*/</script>
I solved the bracket-problem with TYPO3-fluid and angulars-expressions in my dynamic template in the same way
<f:alias map="{ang: {s: '{{', e: '}}'}}">
...
<div class="{ang.s}{class}-{subclass}{ang.e}">...
</f:alias>
The last answer helpt me insert the files public url of an YouTube Video in TYPO3 fluid template using Video-js with Video-js YouTube extension.
After adding an new video in fileadmin and posting {file.publicUrl} in fluid returns an error. wrapping it inside f:format will do the job!
<f:format.raw>{file.publicUrl}</f:format.raw>
This is the whole code for getting YouTube Videos:
<f:if condition="{file.originalFile.properties.extension} == 'youtube'
<video
id="vid1"
class="video-jS"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<f:format.raw>{file.publicUrl}</f:format.raw>"}] }'
>
</video>
</f:if>
Maybe too late but I found also one funny solution.
When I was integrating google seach structured data I found there this settings which should go to the template
<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
And this is the easiest way I found for integration there
<meta itemprop="target" content="https://query.example.com/search?q={<f:format.raw>search_term_string</f:format.raw>}"/>
For the issue with a data attribute like
<ul data-animate="{duration:400, easing:'swing'}">
...
</ul>
the easiest solution I found was to simply swap single quotes and double quotes, like
<ul data-animate='{"duration":"400", "easing":"swing"}'>
...
</ul>
I want to change this
<a class="more" href="Subject?SubjectId=#Html.DisplayFor(model => item.Id)">Devamı »</a>
to
<a class="more"#Html.ActionLink("Devamı ", "Subject", new {Subject?SubjectId= item.Id }) ></a>
I can not put » and Subject?SubjectId= to #Html.actionlink.
Why?
If you take a look at Microsoft's site, it says Html.ActionLink returns a complete anchor (<a></a>) object based on the parameters you give it.
You can't put the anchor returned by ActionLink into your anchor element. Choose one of the other ways of creating the link.
You may be looking for the Url.Action method, http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.action(v=vs.108).aspx
<a class="more" href=#Url.Action("ControllerName", new {SubjectId = item.Id})
>Devamı »
</a>
I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.