Related questions have been asked but as there is not as yet any solid/acceptable answer, I thought I would re-phrase and clarify:
Is there a way within JSF to populate a dataTable or related query-result component without re-writing renderers as a W3C CSS table? This must enable clickable rows and row (versus column) styling a:hover, etc.
Example of desired rendered JSF component HTML from a query:
<div class="table">
<a href="#" class="row">
<span class="cell">Column-1-Value</span>
<span class="cell">Column-2-Value</span>
</a>
...
</div>
Thanks to the input provided, this is the complete answer (versus just in comments) tested in a Java EE/JSF container:
<div class="table">
<ui:repeat value="#{BackingBean.list}" var="item">
<h:outputLink value="url">
<f:param name="ID" value="#{item.ID}"/>
<span class="cell">#{item.ID}</span>
<span class="cell">#{item.Name}</span>
</h:outputLink>
</ui:repeat>
</div>
The above can then be styled using CSS/3 display:table, display:table-row and display:table-cell; respectively. Row is clickable and can be styled as desired.
Related
I want to show/hide a specific div on-click, but there are some serious caveats. I should also mention I fundamentally know how to do this, using answers gleaned from similar questions here (eg., http://jsfiddle.net/6W7XD/1/), but this is more for the specific situation.
I have a CMS which will not allow me to edit the HTML at all outside of specific modules. Additionally, the CMS is one of those which disables id selectors, so I cannot use those, either.
I understand that the JSFiddle example I provided hinges on specific sibling/child selectors, but I'm wondering if there's a selector which would work for this situation. I can only edit the html in the first module (for simplicity's sake, I'll call it .module-1), but I want to show/hide .module-4
The arrangement of the code in the CMS, however, is a little bit byzantine.
This is a parred down version of what I'm working with (this is for a sidebar, by the way, housed under the beta id). I cannot edit any of the fundamental structure, except in the place marked:
<div id="beta-inner" class="pkg">
<div class="module-1 module">
<div class="module-inner">
<div class="module-content">
<!-- I can edit this area only, so this is where I would place my show/hide link. If the jsfiddle method I posted is appropriate in this situation, I'm assuming it would show/hide after clicking on links placed here. -->
<span class="span3" tabindex="0">Hide Module-4</span>
<span class="span2" tabindex="0">Show Module-4</span>
</div>
</div>
</div>
<div class="module-4 module">
<!-- this is the module I want to show/hide -->
<div class="module-inner">
<div class="module-content">
</div>
</div>
</div>
</div>
</div>
I can edit the CSS as much as I want, provided I don't use id (which has been made inaccessible to prevent people messing up the CMS? I think that's the rationale offered), and I believe that precludes the checkbox hack entirely.
I cannot use JQuery/JS/anything of that nature, since they're disabled. I know this would be a quick thing with jquery, but unfortunately, there's nothing I can do about that.
So... if this is possible... how would I go about doing it?
Context: I'm using bootstrap 4.1 in a vue.js app.
I have a table that shows the results of a user performed search.
The users are able to "see mode details" by clicking on any row of this results table. So far so good with the mouse.
How do I make the same table accessible with the keyboard?
Expected outcome:
users perform a search
the data is shown in the table
by pressing TAB they focus the <table>
(the "current row" gets highlighted)
by hitting ENTER they are able to "see more details" of the given highlighted row
Questions:
Is there a browser-native way to achieve this?
Is there a way to do it without javascript?
So far:
This is done by using a <table> element with tabindex="0" on each <tr> element.
I'm now adding some javascript magic to make the click/enter user interaction trigger to show more details in another div.
Thanks all for the help.
This is about as close as I think you can get without javascript.
You need to use css tables and not HTML tables and set the a tag as a table-row. Then set the "href" of the a tag to a hidden div with the more info. Use the :target psuedo class to make the hidden info visible.
You can now tab through the rows. However you need to press Return to activate the link (at least in Chrome)
.table {
display: table;
}
.table>.head,
.table>a {
display: table-row;
}
.table>.head>span,
.table>a>span {
display: table-cell;
padding: 5px;
}
.table>a:focus {
background-color: #CCC;
}
.moreInfo>div {
display: none;
}
.moreInfo>div:target {
display: block;
}
<div class="table">
<div class="head">
<span>Id</span>
<span>Name</span>
<span>Date</span>
</div>
<a href="#data1">
<span>1</span>
<span>Some Name</span>
<span>9 Jan 2019</span>
</a>
<a href="#data2">
<span>2</span>
<span>Another Name</span>
<span>10 Jan 2019</span>
</a>
</div>
<div class="moreInfo">
<div id="data1">Some more info on the first item</div>
<div id="data2">Some more info on the second item</div>
</div>
I'm pretty sure that the CSS solution won't be accessible.
In fact the CSS solution is even probably going to make the accessibility less good compared to if you have been used a <table> even without any JavaScript or ARIA.
If you really can't use JavaScript for whatever reason, I would still advice to keep the <table>
If the data presented is really tabular data, screen reader users won't understand anything if you don't use a true <table>.
Some screen readers try to present CSS tables like if they were true HTML tables, but often they fail in doing it really well, and many screen readers don't do anything special so the user see a serie of divs and spans.
Additionally, keyboard and screen reader users are used to:
- tab once to get into the table, tab once more to get out of it
- up/down arrow to move from row to row inside the table
- left/right arrow to move between columns if it's relevant in your case
IF you really want something accessible, that's what you need to do. And it's perfectly undoable without JavaScript.
Why don't you want use JavaScript ?
I can not imagine another way without using javascript! Here is the answer to your question!
You have to use tabindex = "0". But to focus you would have to use javascript
<div>
<a href="#" tabindex="0">
<p>hi</p>
</a>
<a href="#">
<p>hello</p>
</a>
<a href="#">
<p>woah</p>
</a>
<a href="#">
<p>oops</p>
</a>
<a href="#">
<p>Love</p>
</a>
</div>
You can use tabindex for the table, it works perfectly fine
<form>
First: <input tabindex="1" type="text">
Third: <input tabindex="3" type="text"> <br>
Second : <input tabindex="2" type="text">
Forth : <input tabindex="4" type="text"><br>
</form>
I have a (I hope) simple question. Is there a way to change something like
<div id='THE_ID' class='filter_group'> subtags </div>
to
<div id='THE_ID' class='filter_group open'> subtags </div> in capybara?
This website I'm looking at has a non-descript <a> tag as a button that edits the div class as seen above.
I'd rather click the <a> tag but it being non-descript has no information. No name, no id, no href, nothing.
I'm new to rails and capybara so please forgive me if I'm missing something simple
The code block I am looking at is
<div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
<label class="header">Date Range
<span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
<a></a>
</label>
<div class="list">
RADIOBUTTONS and FIELDS
</div>
</div>
What you're asking is possible using JS, however then you're not really testing the site (assuming you're testing and not just scraping). To do it via JS with Capybara 3.2+ you could do
page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange").execute_script("this.classList.add('open');")
Prior to 3.2 you would need to do something like
el = page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange")
page.execute_script("arguments[0].classList.add('open');", el)
That being said, there are plenty of ways to click the <a> even if it doesn't have any usable attributes (assuming it has size on the page) by scoping to it
page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange > .header > a").click
Here is some code (Sorry it's pure javascript I didn't see the part of your question where it says it's ment to be with cappybra):
function yourFunction() {
var element = document.getElementById("ctl00_ContentPlaceHolder1_as1_divDateRange");
element.classList.add("open");
}
.open {
color:red;
}
<button onclick="yourFunction()">Add class</button>
<div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
<label class="header">Date Range
<span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
<a></a>
</label>
<div class="list">
RADIOBUTTONS and FIELDS
</div>
</div>
The CSS part is to demonstrate that the class has beeen added.
Hope I helped you and others :)
I have the following code successfully adapting the DOM (I can see the results by clicking View Source in the browser)--yet the DIV content it's supposed to hide isn't being hidden. What will hide it?
Dim cmsClearwayNode As HtmlNode = doc.DocumentNode.SelectSingleNode("//div[#id='clearway']")
cmsClearwayNode.SetAttributeValue("runat", "server")
cmsClearwayNode.SetAttributeValue("visible", "false")
Here's the markup. Note the visible attribute on the outer DIV:
<div class="icon-wrapper" id="clearway" runat="server" visible="false">
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
visible is not a valid HTML attribute.
If you are using HTML5, you can try hidden. One thing to note is hidden doesn't take true or false. You will need to remove hidden attribute if you want to show the element again, just assigning false to hidden won't show it.
<div class="icon-wrapper" id="clearway" runat="server" hidden>
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
Also, you can use CSS display: none; to hide it. If you want to reserve the space the element is taking, use visibility: hidden; instead. You can check the details about the comparison here.
The problem is that runat="server" is a hint that ASP.NET uses to id Server Side controls, and call the render methods.
You cannot set the runat server at runtime.
If you want to hide that element you have to whether add runat=serverat design time in clearway or hide the element client side. Adding a CSS class or a style (display:none, visibility:hidden)
Visible with upper case "V" is an attribute for asp.net controls not html controls, And runat="server does not change the html control to asp.net control even if you have added this befor runtime. Instead to hide your element you can set it's display style to none. Or you can add this css style to the page:
.hiddenDiv{
display: none;
}
And do this:
cmsClearwayNode.SetAttributeValue("class", "hiddenDiv")
So far the only good workaround I've found while trying to wrap up this code is setting cmsClearwayNode.InnerHtml = "". The node content drops off and everything else falls into place nicely. It's an OK solution, but I just thought setting attributes or styles would be more elegant.
Here's the best solution I've found for this issue after rummaging through several resources. I wouldn't consider it a workaround, but an actual solution. The problem we're trying to solve is hiding the DIV. Well, let's put an ASP panel around it, like pnlClear below:
<asp:Panel runat="server" ID="pnlClear">
<div class="icon-wrapper" id="clearway" runat="server" visible="false">
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
</asp:Panel>
Then in the code-behind, just say:
pnlClear.Visible = True
Basically, I have a "Posts" DataTable with multiple rows.
Each row contains fields like "UserID", "PostBody", "PostDate", "UploadedFileID" etc.
What I'm trying to achieve is a "News" page, where users can see all the posts from the DataTable.
So if I have 5 rows, i want for each row to have an HTML Structure like:
<div id="post">
<h3>User name (based on the UserID row)</h3>
<div id="postBody">
bla bla bla whatever the user posted
</div>
<a href="(link to the posted file)">
<img src="something" />
</a>
</div>
I'm thinking that inside the .aspx file, in the PageLoad event I have to make a while loop, like:
while (there are posts in the posts table)
write html;
How do I add HTML-building conditions, and more importantly, paging?
Thanks,
Tudor.
You could use one of the several data binding controls and put your html structure into the template.
Refer: Asp.net DataBound controls
Ones like the Repeater or ListView should give you what you want.
<asp:ListView runat="server" ID="ListView1"
DataSourceID="PostsDataSource" >
<ItemTemplate>
<div id="post">
<h3>User name (based on the UserID row)</h3>
<div id="postBody">
<asp:Label ID="LastNameLabel" runat="Server"
Text='<%#Eval("PostBody") %>' />
</div>
<a href="(link to the posted file)">
<img src="something" />
</a>
</div>
</ItemTemplate>
</asp:ListView>
Code behind:
ListView1.DataSource =
The advantage of using a data binding control is that asp.net will manage the paging and value binding.