Dynamically generated id in tomahwak dataList (JSF 1.2) - jsf-1.2

I cannot figure out how to generate dynamically id for elements in <t:dataList> which is inside <t:dataTable>. Code looks more or less like this :
<t:dataTable value="#{SomeBean.foo}" var="item">
<h:column rendered="true">
<div id="divpvmu">
<t:dataList value="#{item.templates}" var="template" rowCountVar="templateIndex">
<div id="saveBtn">
</div>
</t:dataList>
</div>
</h:column>
Obiously this code generate some number of divs with the same id="saveBtn"
. I would like to have distinct id for every generated div. I was trying to do this by this change :
<div id="saveBtn_#{templateIndex}">
, however then I'm getting an exception
javax.servlet.jsp.JspException: java.io.IOException: Example.jsp(50,31) JBWEB004178: #{..} is not allowed in template text
Is there any way to generate distinct id's for such a construction ? I'm using JSF 1.2.

There is the <t:div> tag. It allows you to use EL expression in id attribute.
So something like this should do the job:
<t:div id="saveBtn_#{templateIndex}" forceId="true">
JSF should also automatically generate id for you:
<t:dataList id="myList" value="#{item.templates}" var="template">
<t:div id="saveBtn">
</t:div>
</t:dataList>
This tag in t:dataTable, t:dataList and so on will generate id like:
myList:0:saveBtn for first element,
myList:1:saveBtn for second element, and so on.

Related

Webdriver.io how to select and element that changes based on the number of like elements on the page

I want a way to select the udp-address-input field inside of this named-source-add div. The problem I'm having is udp-address-input-<+id> element has a different number based on how many named sources have been added. There is always only 1 udp-address-input-<+id> inside of the named-source-add div so I was wondering if I can limit my search inside that div?
<div id="named-source-add" class="named-div">
<input type="text" class="table-cell" data-bind="textInput: address, attr:
{id: 'udp-address-input-'+id, readonly: readonly, required: role() ==
'destination'}" id="udp-address-input-18">
</div>
I used xpath, only looking for inputs with ids starting with udp-address-input inside of the named-source-add div.
//div[#id='named-source-add']//input[contains(#id,'udp-address-input')]
And I had to add slashes to get this to work with my javascript webdriverio pageobject like this:
udpMulticastAddr:{ get() { return '//div[#id=\'named-source-add\']//input[contains(#id,\'udp-address-input\')]';}},

selecting angular2 elements in css

I have the following markup in angular2
<form [formGroup]="createPasswordForm" (ngSubmit)="onClickCreatePassword(createPassword)">
how do I select this element in css
I tried the following but it does not seem to work
form[\[formGroup\]="createPasswordForm"]
and
form[formGroup="createPasswordForm"]
You are used like this:-
<form id="createPasswordForm" [formGroup]="createPasswordForm" (ngSubmit)="onClickCreatePassword(createPassword)">
component.css:-
#createPasswordForm{
// Write a css code here
}
[formGroup] is not a "real" attribute of the html this is the property of formGroup.

Targetting Individual Gallery Items - Squarespace Flatiron Template

I am currently using the Flatiron Template in Squarespace 6. Each image in the gallery currently displays the image, a title, and -view- under it. I am looking to change -view- to a different name (a city to be specific) that is unique to each gallery item.
The source code for one of the grid items is this:
<script>
Y.use('squarespace-ui-base', function(Y) {
Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
});
</script>
<!-- Main Grid -->
<div id="grid" data-collection-id="53ebab59e4b0c8271c405596">
<div class="item">
<a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3" >
<div class="wrapper">
<div class="project-title">
<h2>DIESEL POP-UP</h2>
<h3>— view —</h3>
</div>
</div>
<img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg" data-load="false" />
<noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>
</a>
</div>
I have tried using this in the custom CSS section (just to attempt at targeting one item) but it has only effected the page that the image links to, not the image itself.
.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
background-color: red;
}
Is there a code that can target each individual element?
Go to:
Page > Settings > Advanced > Header injection (Index page)
Then paste the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".item:nth-child(1) h3").text("1st item");
$(".item:nth-child(2) h3").text("2nd item");
$(".item:nth-child(3) h3").text("3rd item");
$(".item:nth-child(4) h3").text("4th item");
});
</script>
Cool. Now you can change the text in the quotations (1st, 2nd, 3rd, 4th item) to whatever text you want to replace 'view'. If you have more than 4 galleries in the index, you can copy a line and paste it below, but just make sure to increase the nth-child item from (4) to (5).
Hope that helps!
Thanks for adding the additional data. Unfortunately you cannot do this. Changes in SquareSpace are global changes. You can make a cosmetic change to all galleries but you cannot target a specific gallery by ID. Squarespace object IDs are dynamic and session based. If you target a specific object ID in your CSS, once you refresh the page the ID will change and the CSS will no longer be valid.
However if there is a scenario where you have individual galleries on separate pages then you can work around the global change by inserting the CSS at the "page" level under settings and not a the site level that calls the object category (not the object ID).
Also changing the content of a label is not a css change. That is an HTML change. In Squarespace you cannot modify/hack the actual HTML in the templated versions.

Using String.split inline to set CSS classes in the view

In my model I have a field type string called god_type.
Example:
Ice,Fire
Ranged,Cannon
Fire,Ranged
I'm going to be using Isotope to filter these models based on their god_type.
I need the output HTML to look like:
<div class="item Fire Ranged">
</div>
Here's what I've tried:
#gods-list.isotope-container
- for god in #gods
.item class='#{god.god_type.split(",").each { |c| c }}'
a href='#{god_path(god)}' class='god'
img src='#{god.thumbnail.url(:thumb)}'
h2= god.name
And the resulting HTML:
<div class="item ["Fire", "Ranged"]">
...
</div>
What am I doing wrong?
I'd suggest:
.item class='#{god.god_type.gsub(/\,/, " ")}'
You could also wrap it in a method, within a decorator, or directly in the model, or even an application helper. Here's a general idea:
class God
def god_type_classes
god_type.gsub(/\,/, " ").downcase
end
end
# your view
.item class='#{god.god_type_classes}'
Noticed I've used .downcase on the string. This is just to address standard CSS naming (should be item fire ranged).

How to select multiple div by his unique id number

is there a way to select multiple div with css??
like
div id="text-box4"
div id="text-box5"
div id="text-box7"
etc
Native to ie7,ie8 and any other browser that accepts "substring matching attribute selectors" (cf. http://www.w3.org/TR/css3-selectors/), you can use the following syntax to select elements with multiple similar ids:
div[id^='text-box']
This basically says to the parsing engine, "select all div elements that have an id attribute which begins with 'text-box'
QRC:
[attribute^='text'] = attributes that STARTS with 'text'
[attribute$='text'] = attributes that END with 'text'
[attribute*='text'] = attributes that CONTAINS 'text'
CSS doesn't have a wildcard for that.
However if you use jQuery you can:
http://api.jquery.com/attribute-contains-selector/ or
http://api.jquery.com/attribute-contains-word-selector/
<div id="text-box4"></div>
<div id="text-box5"></div>
<div id="text-box7"></div>
<script>$("div[id*='text-box']").css("color", "red");</script>
like this?
#text-box4,
#text-box5,
#text-box7 {
/* your properties here */
}
CSS classes are designed for selecting multiple elements:
<div id="text-box4" class="my-text-box"/>
<div id="text-box5" class="my-text-box"/>
<div id="text-box7" class="my-text-box"/>
maerics' answer is correct. The CSS selector used to select the divs in that case would be:
.my-text-box {
/* Styles go here */
}

Resources