I'm attempting to implement a Thymeleaf fragment containing a form, and having trouble passing in the th:object value.
The fragment:
<div th:fragment="editCard(colSize, title, formObject, formAction, fields)" th:class="${'col-lg-' + colSize}">
<div class="card">
<div class="card-header d-flex align-items-center">
<h4 th:text="${title}"></h4>
</div>
<div class="card-body">
<form th:object="${__${formObject}__}" th:action="${formAction}" method="post" class="form-horizontal">
<div th:replace="${fields}"></div>
</form>
</div>
</div>
</div>
And the invocation:
<div th:replace="fragments/cards2 :: editCard(colSize='12', title='Concert', formObject=${concert}, formAction='/concert/save', fields=~{ :: .fields})" >
<div class="fields">
<input type="hidden" th:field="*{id}"/>
<!--/*/ <th:block th:include="fragments/elements :: editSelect(label='Season', val='x', field='season', selectList='${seasons}', itemText='${item}', autofocus='autofocus')"></th:block> /*/-->
<!--/*/ <th:block th:include="fragments/elements :: editText(label='Title', val='x', field='title', autofocus='')"></th:block> /*/-->
<!--/*/ <th:block th:include="fragments/elements :: editCheckbox(label='Tour', field='tour')"></th:block> /*/-->
</div>
</div>
</div>
There seems to be an interaction between Thymeleaf and Spring binding that prevents the formObject from being accurately passed. I'm not sure exactly which Thymeleaf syntax combination between caller and fragment is correct.
You should pass the string 'concert' instead of the object in this case. It's a bit weird, but it should work for you.
<div th:replace="fragments/cards2 :: editCard(colSize='12', title='Concert', formObject='concert', formAction='/concert/save', fields=~{ :: .fields})" >
and keep the rest the same. What you really want is for the expression th:object="${__${formObject}__}" to evaluate to th:object="${concert}" (which passing a string will do). Right now it's evaluating to something weird like th:object="${java.class.whatever#123412}" (the default toString for ${concert}).
Related
I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234
<div class="table">
<div class="table-head">
<div class="table-head-title">Ranking Equipos</div>
</div>
<div class="table-body">
<div class="table-body-row active">
<div class="col-key">Mark</div>
<div class="col-value">9233</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">7216</div>
</div>
<div class="table-body-row">
<div class="col-key">Mark</div>
<div class="col-value">6825</div>
</div>
<div class="table-body-row">
<div class="col-key">Paul</div>
<div class="col-value">6184</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">5866</div>
</div>
</div>
</div>
This is my HTML and I want to get last child of .table-body.
I tried to use JavaScript like logic and used indexing like this
$lastChild = $node->filter('.table-body .table-body-row')[4]; but it shows error. Cannot use object of type "Symfony\Component\DomCrawler\Crawler" as array
I was stuck in similar situation recently and I resolve this by using last() method. Syntax is here: $node->filter('.table-body .table-body-row')->last();
I've been following the instructions on Square's website.
I've got all the code I need plugged into my application as shown on square, but the asset('js/square.js') call didn't find the file for some reason. So, I just added the script to the end of the resources/js/app.js file, doesn't seem to have any errors but the form doesn't look right..
<form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
#csrf
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button>
<div id="error"></div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</form>
Image below is the output of my code
Are these names correct under BEM methodology?
<div class="container">
<div class="container__button-row--1">
<div class="button-row__button--first"></div>
<div class="button-row__button"></div>
<div class="button-row__button"></div>
...
<div class="button-row__button--last"></div>
</div>
<div class="container__button-row--2">
...
</div>
</div>
Given the sample code in your question I'd suggest the following. But I would also point out that container is a bad name for a component/Block since it really general and does not indicate the purpose of the Block.
For modifiers you should use both the element and the modifier in the class attribute e.g. block__element block__element--modifier
<div class="container">
<div class="container__button-row container__button-row--1">
<div class="container__button container__button--first"></div>
<div class="container__button"></div>
<div class="container__button"></div>
...
<div class="container__button container__button--last"></div>
</div>
<div class="container__button-row container__button-row--2">
...
</div>
</div>
I have 4 other elements the same as below though they differ in title
<div id="r7695cf6b-f4a79" class="featureFoo ">
<div class="overview">
<h3 class="title">My Library</h3>
<p class="description">Some description</p>
</div>
<div class="foo">
<form>
<div id="ra41984bc58005" class="switch label-position-right non-required" aria-describedby="">
<input name="fooEnabled" type="checkbox" id="r14e560d0-bfbc-476a-a066-cbb3c043006c" checked="" class="">
<div class="foo-switch">
<div class="indicator"></div>
</div>
<span class="error" title=""></span>
</div>
</form>
</div>
</div>
I am trying to retrieve the nonhidden input element and to see if it is checked. I have this xpath
$x("//div[contains(#class, 'featureFoo')][./div/h3[text()='My Library']]//input[contains(#name,'fooEnabled')]")
which works in the Chrome console but it does not work in Ruby Cucumber's find() method
find(:xpath, "//div[contains(#class, 'featureFoo')][./div/h3[text()='My Library']]//input[contains(#name,'fooEnabled')]")
Is there more conversion that needs to be done to the xpath so it will work in cucumber's find() or could there be a better approach to this?