I have a Thymeleaf template that should render the contents of a map. Here is the template:
<div class="akuiteo list-group" data-th-each="akuiteo:${akuiteoMap.akuiteoMap}">
<div data-th-replace="akuiteo::akuiteoView(${akuiteo.value},${akuiteo.key})"></div>
</div>
In the akuiteoView I have:
<button data-th-fragment="akuiteoView(commits,akuiteoNr)" class="akuiteo-file" data-th-each="commit:${commits}" data-th-id="${akuiteoNr}">
<p data-th-text="${akuiteoNr}"></p>
<div data-th-replace="commitDetails::commitView(${commit})">replace me</div>
</button>
The output I get is:
<body>
<div class="akuiteo list-group">
<button> content </button>
</div>
<div class="akuiteo list-group">
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
</div>
</body>
The div with the akuiteo class is duplicated, moreover there is one button for each commit instead of one button for each akuiteo instance, I can't understand why this happens, the expected output is:
<body>
<div class="akuiteo list-group">
<button> content(a list of one commit) </button>
<button> content(a list of 6 commits) </button>
</div>
</body>
This happens because of data-th-each. Thymeleaf iterates your map's entries and creates separate div for each entry. Then the same thing happens for buttons: thymeleaf render a new one for each commit. You should check out documentation explaining iterating using th:each.
To obtain expected output (1 div and 2 buttons) you should redesign your pages, e.g. like that:
<div class="akuiteo list-group">
<button data-th-each="akuiteo:${akuiteoMap.akuiteoMap}">
<span data-th-replace="akuiteo::akuiteoView(${akuiteo.value},${akuiteo.key})"></span>
</button>
</div>
and:
<span data-th-fragment="akuiteoView(commits,akuiteoNr)" data-th-each="commit:${commits}">
<!-- here goes content of a single commit -->
<span>
By the way, a <button> tag shouldn't contain such elements like <div> or <p>. I don't know anything about commits' content but consider either redesigning <button> to <div> (to keep the commit structure containing <p> and <div>), or summarizing a commits from an akuiteo in textual form (to keep <button>).
Related
I have a multiple rows with div:
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
So the divs with class item are repeating and can be 10 or more on th epage.
I need to click the second button on the LAST row.
I tried:
cy.get['.item button.btn-action:nth(1)'].last().click()
However this is clicking the 2nd button but in the first row, not the last.
I suppose first I need to select the last div e.g.
cy.get['.item'].last()
and then somehow to select the correct button with nth(), but not sure how when I get only the last div via cy.get.
ok for now I found a solution with find command, seems this is working fine:
cy.get('.item').last().find('button:nth(1)').click()
In classic bootstrap, this construction is easy:
<div class="panel panel-danger">
<div class="panel-heading">
Some HTML including a drop-down.
</div>
<div class="panel-body">
Panel body, lots of HTML here
</div>
<div class="panel-footer">
<button class="btn btn-default">Click me</button>
</div>
</div>
In the react-bootstrap implementation, there seems to be no way of including further html in the panel header or footer?
Try this
<Panel
header="Some HTML including a drop-down."
footer={<Button> Click me</Button>}
bsStyle="danger"
>
Panel body, lots of HTML here
</Panel>
You can use other props from bootstrap-react document
As per the react-bootstrap panel documentation:
<Panel>
<Panel.Heading>Panel heading</Panel.Heading>
<Panel.Body>Panel content</Panel.Body>
<Panel.Footer>Panel footer</Panel.Footer>
</Panel>
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.
Here is a jsfiddle example of the problem occurring.
http://jsfiddle.net/Lu82ba9L/1/
The code from the example is repeated here
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.
I'm using a knockoutjs extension to place a loader on top of an element that is loaded from an ajax request so that a loading gif is show while the request is executing.
The fiddle is very basic:
It loads a list of avatars and shows the loading image while the ajax
request is executing.
Then, when you click an avatar, it's details
are loaded into another placeholder and a loading icon is also shown
while the request is executing.
The problem is, the very first time I click on an avatar, the loading icon isn't shown but all subsequential clicks works.
What am I missing here?
Thanks!
The issue that you are seeing is related to having both with and your custom binding on the same element. When the value is null, the with binding clears the child elements. This removes your loader (although it has already been copied off as part of the "template" used by the with binding), but it is put back when you populate infos. Having them on the same element also means that the bindings fires twice (once from changing infos and once from updating isAvatarLoading.
The easy way to fix this one is to split out the bindings like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<div data-bind="with: infos">
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
</div>
</div>
If you don't want to add another element, then you could use the containerless with syntax like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<!-- ko with: infos -->
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
<!-- /ko -->
</div>
Sample: http://fiddle.jshell.net/rniemeyer/75Lyn/