TYPO3 Extbase: Sorted child objects with iterator.sort return 'NULL' on reloading - iterator

I have a strange issue on vhs viewHelper iterator.sort:
The first time it works like a charm: child elements are displayed sorted by startdate.But when I reload the page iterator.sort returns 'Null', item.child is empty. After flushing the system cache it works the first time the page is loaded, but after reload: the same problem.
<f:for each="{item.child->v:iterator.sort(order: 'ASC', sortBy: 'startdate')}" as="childelement" iteration="childiterator">
<f:debug inline='true'>{childelement}</f:debug>
</f:for>
{item.child} shows the expected elements, but as soon as I try to sort them with v.iterator.sort they disappear when I reload the page.
So this works every time (wrong order of course):
<f:for each="{item.child}" as="childelement" iteration="childiterator">
<f:debug inline='true'>{childelement}</f:debug>
</f:for>
The plugin is configured as non-cachable.
TYPO3 7.6.16
vhs 4.1.0
Has anyone any ideas or experienced that problem and found a solution? Thanks!

Related

Issue with vue.js conditional rending

I have problem in rendering a template
When a new data has been added, it won't go to the process of v-if even if the condition is both TRUE.
Can some please explain why?
I have provided some screenshot below to explain further my issue
This first image was my template for displaying the products, you will notice the add, update and remove in here.
The second image shows that I'm trying to add a new product
The third image shows that I have successfully added the new product. The problem is, the action button "update" is triggered but won't take any effect.
The image above shows that the update button works with the past data, but not with the new one.
This last image will prove that the button has been triggered. I've added a console.log to display the following upon clicking the update button.
INDEX of the row, which is [0].
The typeOf the variable 'isUpdate' [boolean].
The value of 'isUpdate' [True, False]
and the productID which is [151]
Any idea why it hasn't been triggered, or any idea how to debugged this?
If you want to see the code. I can provide it, just tell me which part are you looking for. As I don't have any idea which part has the error.
Thank you in advance.
Updated
AS per Amresh Venugopal Request
Here is the v-if in the template
<tr v-if='product.id > 0 && product.isUpdate' class='table-inputs'>
And the updatebtn function
canUpdate: function(data) {
console.log(data.pindex);
this.products[data.pindex].isUpdate = !this.products[data.pindex].isUpdate;
console.log(typeof this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].id);
}
I only set the isUpdate value to 'true' if 'false', and viceversa.
The productID is added after the ajax save function.
I figure it out!
When I push the data in this.products, I didn't include the 'isUpdate' field.
Got it working now.

nightwatchjs selector is not selecting an attribute with space

I have a few pages on which I am running nightwatchjs to execute an end to end test.
<div role="tab" aria-selected="true" title="My TV"><span>MyReal TV</span></div>
I have a few tabs that I try to verify using code similar to below:
.verify.elementPresent('div[role="tab"][title="Portfolio"]', 1000)
The above works fine for the Portfolio tab. However, I have two tabs that fail and is returning not found. My Tv and Daily Report . Below fails for My Tv:
.verify.elementPresent('div[role="tab"][title="My Tv"]', 1000)
The Daily Report fails as well. I am wondering if it has something to do with the space in my title? Is there anything else I am doing wrong?
It turns out the url was wrong in my case. It was frustrating, spent hours to learn this.
Something like below was returned for the url
http://stackoverflow.com//questions
Instead of
http://stackoverflow.com/questions

Immutable.js mapping over keys in Safari

I'm facing this weird issue in Safari where I'm getting this error in the console -
Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.
On seeing further, I've isolated the issue to mapping over Immutable collection. Here's the code snippet -
var items = Immutable.fromJS([
{id: 1, val: "foo"},
{id: 2, val: "bar"},
{id: 3, val: "moo"},
{id: 4, val: "baz"}
]);
var tree = items.map(function(item, i) {
return <p key={i}>{item.get('val')}</p>
});
return (
<div className="tree-view">
{tree}
</div>
)
When this is rendered, you can see that somehow those <span> elements are being created which are actually properties of the Immutable List object namely - size, capacity, origin, level etc. These span tags are the cause of the error.
Any idea why this happening? (I've tried replicating this issue in a standalone JSbin but unfortunately I was unable to do so)
I've got the same issue. When I do not call toJS() but do require('immutable') then I get the warning about fragments but not the extra spans, and when I call toJS() but do not have 'immutable' required, then I get no extra spans and no warnings.
After a little digging in the React issues, I found this one: https://github.com/facebook/react/issues/4235
Even though it specifically talks about iOS, I have seen the same issue in desktop Safari as well as Mobile Safari.
The solution suggests using a polyfill for Babel, which worked for me.
https://babeljs.io/docs/usage/polyfill/
I had to add the polyfill as an entry in my webpack config like this:
entry: ['babel/polyfill', './app/client.js']
Works for me now on desktop and mobile.
I was not able to find a cause of this issue, however, I fixed it simply by importing Immutable in my app.js file (even though it didn't require it).
Here's the relevant commit - https://github.com/prakhar1989/react-surveyman/commit/1ed80fb458c005214bc03395cc1e0fd374097dfc

protractor getText returns empty string for non-empty element

I have issues getting the text from an element in protractor. For other elements of the page it works as expected, just not for this one :/
<p class="error theme-info-i ng-binding ng-scope" ng-if="firstFormError && form.$invalid" ng-click="goToErrorField(firstFormError)">
<span class="emphasize ng-binding">User ID</span> (The user ID is required.)
</p>
I can locate both elements without problems using by.className, and getInnerHtml/getOuterHtml works as expected. However getText returns an empty string for both.
Found the reason ... its a two-step registration where the first step has the same notification area and just gets hidden. For reasons beyond my comprehension the devs update both notification areas (not just the one on the current page), so inner/outerHtml just seemingly returned the "correct content" and because the first area was hidden, getText returned empty as by spec.
I think I'm gonna file some internal bug report now wtf we are doing with those notifications ;)
You can try
var firstName = element(by.model('firstName'))
expect(firstName.getAttribute('value'))
This gives you the value of the input box.
Had the same problem.
expect(element(By.css('span.emphasize.ng-binding')).getAttribute('textContent'))...
Seems to work just fine for me (this of course if you have only one span with those classes or is the first one. else you need to be more specific. But anyway if you still need to solve the problem try with .getAttribute('textContent') )

Dojo datagrid with date and time

Could someone here please, for the love of God!, post an example of an working dojox.grid.DataGrid using a dojox.data.JsonRestStore, with 2 columns, date and time?
I have tried the following :
<th field="startdate" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.DateTextBox" editable="true" formatter="formatDate"></code></pre> and
<th field="starttime" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.TimeTextBox" editable="true" formatter="formatDate">
Also :
<th field="startdate" cellType="dojox.grid.cells.DateTextBox" editable="true" formatter="formatDate"></code></pre> and
<th field="starttime" cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.TimeTextBox" editable="true" formatter="formatDate">
but nothing seems to work. It's been two days now and I've been reading tons of documentation and reports but I couldn't find a working example anywhere.
EDIT :
I am now facing the weirdest issue in my programmer's career : the grid is now working fine with DateTextBox and TimeTextBox (this case works in Firefox 3.6.6 and in 3.6.14pre, Internet Explorer 8 and Google Chrome.), except for the following :
In Firefox 3.6.13, with an even number of items in the grid, when I try editing the time or date of one element the widget box appears in the top left corner, the date isn't selected properly and the browser crashes with the CPU going to 100%.
However, if the number of items is odd the editing of date and time works just fine. I have absolutely no idea of what to do so please bounce some ideas.
you can keep the values in the grid to be date type but with your customized format....the grid will take care of sorting.....no need to write customized sorting for some simple field like Date....
......
var yourLayout = [[
{ 'name': 'Date', 'field': 'dateCol', 'width': '15%', 'formatter': this.formatDate}
]];
..............
formatDate: function(dateValue) {
return dojoLocale.format(dateValue, { selector: 'date', formatLength: 'long' });
}
......
There is an example of what you are trying to do in the dojo test suite. It's not actually using the JsonRestStore but that doesn't matter.
http://archive.dojotoolkit.org/nightly/checkout/dojox/grid/tests/test_edit_dijit.html
The best dojo documentation around are the tests.
If it helps, Oliver has added some examples of how to format dates in a grid, with and without editable dijit widgets. This still needs to be incorporated into the main documentation.