I able to parse th:text value but I need to add that parsed value inside another html tag for jquery processing purpose.
HTML code
<div class="cal-tbl text-center pzero col-xs-3">
<br> <span>Calories</span></br>
<h4 id = "calories" data-def-val ="th:text=${food.calories}"> 309 </h4>
</div>
you can use
th:attr="data-def-val=${food.calories}"
this is generic way to populate non standard tag with dynamic data
Related
I need to extract http://site.ru/ from this code:
<div class="one">
<dl>
<dt class="two">
<span class="name">Site</span>
</dt>
<dd class="three">
<span class="js-pseudo-link" data-url="rAnDoMlEtTeRsAnDnUmBeRs" style>
<a href="http://site.ru/" class rel="nofollow" target="_blank" style> http://site.ru/ </a>
</span>
</dd>
</dl>
</div>
I use this XPath query: //div//dl//dd//span//a/#href
But it doesn't work. It doesn't return anything.
I'm a newbie in XPath.
Unfortunately, the data source you are looking for is an empty span node (class js-pseudo-link). The data-url attribute has the base64 encoded link you want. This node only gets populated after loading. ImportXML for some reason ignores nodes with no text and there's no way to get it not to do that. To get around this, looks like you'll have to write an apps script that can handle empty nodes or just gets the raw HTML code and parse it.
Using Scrapy, I want to extract some data from a HTML well-formed site. With XPath I am able to extract a list of items, but I am not able to extra data from the elements in the list, using XPath
All XPath's have been tested using XPather. I have tested the issue using a local file that contains the webpage, same issue.
Here goes:
# Get the webpage
fetch("https://www.someurl.com")
# The following gives me the expected items from the HTML
products = response.xpath("//*[#id='product-list-146620']/div/div")
The items are like this:
<div data-pageindex="1" data-guid="13157582" class="col ">
<div class="item item-card item-card--static">
<div class="item-card__inner">
<div class="item__image item__image--overlay">
<a href="/www.something.anywhere?ref_gr=9801" class="ratio_custom" style="padding-bottom:100%">
</a>
</div>
<div class="item__text-container">
<div class="item__name">
<a class="item__name-link" href="/c.aspx?ref_gr=9801">The text I want</a>
</div>
</div>
</div>
</div>
</div>
When using the following Xpath to extract "The text I want", i dont get anything:
XPATH_PRODUCT_NAME = "/div/div/div/div/div[contains(#class,'item__name')]/a/text()"
products[0].xpath(XPATH_PRODUCT_NAME).extract()
The output is empty, why?
Try the following code.
XPATH_PRODUCT_NAME = ".//div[#class='item__name']/a[#class='item__name-link']/text()"
products[0].xpath(XPATH_PRODUCT_NAME).extract()
I am beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:
Type the word [userinput]#asciidoc# into the search bar.
Which generates HTML
<span class="userinput">asciidoc</span>
but I want to have div tags instead of span. Is there any way to do it or should I just use something like
+++<div class="userinput">asciidoc</span>+++ ?
I think what you need is called "role" in Asciidoctor.
This example:
This is some text.
[.userinput]
Type the word asciidoc into the search bar.
This is some text.
Produces:
<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>
You have now a css selector div.userinput for the concerned div.
See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").
You may want to use an open block for that purpose:
Type the following commands:
[.userinput]
--
command1
command1
--
Producing:
<div class="paragraph">
<p>Type the following commands:</p>
</div>
<div class="openblock userinput">
<div class="content">
<div class="paragraph">
<p>command1</p>
</div>
<div class="paragraph">
<p>command1</p>
</div>
</div>
</div>
The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.
For slightly different use cases, you may also consider defining a custom style.
Is there a way to use a fragment parameter in an expression?
I'd like to create a fragment to show fields with their corresponding binding errors e.g. like:
<div th:fragment="alert (field, fieldLabel)">
<label><span th:text="${fieldLabel}">Label:</span><input type="text" th:errorclass="field_error" th:field="*{field}"/></label>
<div th:if="${#fields.hasErrors(field)}"><span th:errors="*{field}">Some error</span></div>
</div>
Getting the fragment with:
<div th:replace=":: alert (field='firstName', fieldLabel='Firstname')">Field</div>
How do I use the field parameter in the expressions for the th:field and th:errors attributes? *{field} does at least not work.
With Thymeleaf 2.1 I've been using the following:
Declare field:
<input type="password" th:field="*{password}" />
Show possible errors related to password:
<div th:replace="util/form :: field-errors('password')"></div>
And this prints all the errors related to given field:
<div class="error-container help-block"
th:fragment="field-errors(field)"
th:if="${#fields.hasErrors('__${field}__')}">
<ul>
<li th:each="error : ${#fields.errors('__${field}__')}"
th:text="${error}" />
</ul>
</div>
It seems that it is not possible at least
using th:field and th:errors, it keeps trying to look for a bean instead
of the parameter of the fragment.
Try setting a local variable for the DOM object
th:with="variableName=${field}"
An then try to use that variable in the expressions.
I was playing with angular.js the other day and I found this filter function, that angular.js provides for us.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
My question is: Can I use angular.js filter on premade html elements, somehing like this.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones" ng-filter:query>
<li>First element</li>
<li>Second elementy/li>
<li>Third element</li>
</ul>
</div>
</div>
</div>
Thank you for your answers!
For this kind of DOM manipulation/filtering, Angular directives ngSwitch or ngShow/ngHide are normally used.
<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>
The above would look for an exact match though (so it is not as nice as #tosh's directive). ng-switch is often used with a select drop-down, where the possible values are fixed/known.
ngShow/ngHide are probably a better match for what you are trying to do. An in-line expression or $scope function can be used to determine whether to show an element:
<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>
function MyCtrl($scope) {
$scope.myFilter = function() {
if($scope.query ...) { // could use RegExp() here like #tosh
return true
}
return false
}
The above does not require jQuery.
No. Your first example uses a filter - called "filter"! A filter can form part of an Angular binding expression. It is placed after a pipe character, and applies a "filter function" to the part of the expression that came before the pipe. Some filters also take additional parameters, to the right of a colon. The filter called "filter" acts on an Array (the part before the pipe, in this case phones) passing each item through a check determined by the parameter to the right of the colon. In your case, using a string variable called query, it returns an Array with any items from phones that contain the string in query.
Other examples of filters in Angular include currency, date, uppercase and orderBy. They all take an input (for example a string) returning another value (for example the uppercase version of the string) and in some cases additional configuration parameters (such as a date or currency format, or field to order by). But they only work with an input that is some value in the "data model", not directly on the content of a DOM node.
Your second example attempts to use a directive called "ngFilter". A directive is an extension to standard HTML syntax, and can be expressed as hyphenated attributes (as in this case), data- attributes (data-ng-filter), namespaced attributes (ng:filter), css classes, etc. Angular's default directives have the prefix "ng". But there is no such directive as "ngFilter" in Angular. Your example will load fine, but there will be no effect on the DOM processing from adding this non-existent directive.
I do not think that is part of the default directive, but
that's interesting task.
I tried to implement with a custom directive. http://plnkr.co/edit/TOGbtq
app.directive('ngFilter', function() {
return {
link: function(scope, element, attr) {
scope.$watch(attr.ngFilter, function(q){
$(element).children().each(function(i,a){
$(a).toggle((new RegExp(q)).test($(a).text()));
});
});
}
};
});