I'm setting a data element of an image in my html.erb file:
<img src="<%=image%>" data-description="<%= auto_link(step.description)%>"/>
The issue is that there there are sometimes quotes in my step.description that interfere so that data-description is not set correctly, such as:
<img src="..." data-description="<pre><code class=" language-java"="" style="width: 193px; height: 257px; margin-left: -96.5px; margin-top: -128.5px; opacity: 1;">
How can I remove conflicting quotes in my erb file?
There's a helper method called j or escape_javascript that will escape quotes in a string and make it possible to add a string with quotes to an attribute on an element like you're trying to do. More info here
So, change your code to:
<img src="<%=image%>" data-description="<%=j auto_link(step.description)%>"/>
Just adding that j will do it for any sort of string with quotes.
If you're also putting HTML inside an HTML attribute you will have to escape html too with the html_escape helper:
<img src="<%=image%>" data-description="<%=h j(auto_link(step.description))%>"/>
h is short for html_escape. That should escape the tags inside the attribute and not break your layout.
Related
I want to show the ruby html tag in a thymeleaf template like this:
<h1 th:text="(${author.displayNameReading} != null) ? '<ruby><rb>' + ${author.displayName} + '</rb><rt>' + ${author.displayNameReading} + '</rt></ruby>' : ${author.displayName}" th:lang="${author.locale}">Some author name</h1>
If I use th:text, it will be escaped. It works if I use utext, but then I'm going to lose all the security for other html tags.
Is it possible to only allow the ruby, rt and rb tags inside th:text?
Why try and stuff everything into a th:text attribute? You can easily split out all that information into new tags -- which is both more readable (formatted like regular html, less string concatenation) and more secure (no need for th:utext). Something like this for example:
<h1 th:lang="${author.locale}">
<ruby th:if="${author.displayNameReading != null}">
<rb th:text="${author.displayName}" />
<rt th:text="${author.displayNameReading}" />
</ruby>
<span th:unless="${author.displayNameReading != null}" th:text="${author.displayName}" />
</h1>
Trying to convert some HTML code in a template to Slim syntax. The original code uses a Ruby helper method (in Rails) to dynamically determine the class of the li element.
Here is the original code in HTML:
<li class="<%= is_active_controller('dashboards') %>">
The online converter gives:
| <li class="
= is_active_controller('dashboards')
| ">
This not only is ugly and clunky--it doesn't work.
I've tried various options without success. Such as:
li class=is_active_controller('dashboards')
...as well as several other variations without success.
li class=(is_active_controller('dashboards'))
If I want to put header tag h1..h5 into p it render HTML in wrong way:
slim
p
h3 Header here
span Just text
expected
<p>
<h3>Header here</h3>
<span>Just text</span>
</p>
in real it render
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
looks like nothing special but in this case I can't bind CSS style because structure renders in broken way.
Is it a bug? Or I can solve this in some way?
You can not define tags like h3 and span inside the p tag.
See HTML5 specification for more information.
Slim itself doesn’t care about the tags, and renders your code as you expect:
$ slimrb
p
h3 Header here
span Just text
produces:
<p><h3>Header here</h3><span>Just text</span></p>
which matches what your expected code, except for whitespace.
This isn’t valid HTML though, so when the browser parses it it will correct it to something valid. For example the Chrome inspector will show:
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
Where the browser has closed the p element before the next h3 element.
If you want this to work in the browser, make sure you are generating valid HTML. Perhaps use a div instead of a p?
I have a session variable that I am appending to a string in the layout page of an MVC application.
<p class="text-primary text-strong">Logged in as: #Session["DisplayName"]</p>
I would like the "Logged in as:" to display in black and the "#Session["DisplayName"]" to be blue. Is it possible to format razor syntax like that?
Doesn't really have anything to do with razor. Just some simple CSS will do the trick.
<style type="text/css">
.blueText {
color: #0000FF;
}
</style>
<p class="text-primary text-strong">
Logged in as: <span class="blueText">#Session["DisplayName"]</span>
</p>
I'm trying to get the src value of a block of HTML. I am specifically trying to achieve this using the at_css and not using XPath.
So far all I'm getting is either nil or a blank string.
This is the HTML:
<div class="" id="imageProductContainer">
<a id="idLinkProductMainImage" href='URL'>
<img id="productMainImage" src="SRC.jpg" alt="alt" title="A Title" align="left" class="product_image_productpage_main selectorgadget_selected">
</a>
</div>
The code I have is:
item = page.doc.at_css("#productMainImage img").text.strip unless page.doc.at_css("#productMainImage img").nil?
puts item #prints blank
item = item["src"]
puts item #prints blank
Where page.doc is the Nokogiri HTML element.
If you need the src attribute, you can do it like this:
pace.doc.at_css('#idLinkProductMainImage img').attr('src')
Also, I believe the problem is the way you are getting the img tag. You are trying to get all img tags inside #productMainImage, but this id is the image itself, so it will find nothing.
If you use the link id #idLinkProductMainImage, then you have a img tag to search inside it.