I am using an AngularDart component in my webpage with the #Component. I can access variables inside the class by using the standard angular expressions in the html by using ng-model and {{}}. However when implementing a standard looping procedure:
<div ng-repeat="(x, y) in example_dictionary" ng-if="example_dictionary!=null">
{{x}}
</div>
This snippet gives me the strange error Class '~~~' has no instance getter 'x' (Class name snipped). The error is not wrong per-say. The class really does not contain any getter of x, but it shouldn't need to because the ng-repeat method is setting it and maintaining it.
For added entertainment, I replaced the {{x}} section with a static string I am looping and behold the loop command does in fact loop through the dictionary the proper amount. So the ng-repeat is not causing any problems with either looping or setting both of the non-pre-existing x and y variables.
The question: Why can't I access x and how can I access x?
That should work, but have you tried?
<div ng-repeat="entry in example_dictionary">
{{entry.x}}
</div>
After reducing the problem to a really simple size, I found out that removing the ng-if section of the div fixed the problem. How and why that even was a problem is beyond me. I now segregated the action of ng-if and ng-repeat into separate divs. I am not particularly happy with my findings, but it works.
Related
I have tried searching on StackExchange and also looked at other places using Google and the Thymeleaf reference as well. It seems like the syntax below should work but it is not filtering the list based on condition given.
<th:block th:each="dayNumber :${#numbers.sequence(1,7)}">
<p th:if="${#lists.isEmpty(storeHours.?[#this.dayOfWeek eq #dayNumber])}" th:text="${dayNumber}"></p>
</th:block>
In above, we are trying to do a pretty simple filter. The storeHours is a list of Store Hours object. Each object has a property called dayOfWeek. It is an integer. In above, I am trying to simply print the missing day number. However, it is printing all 7 days.
I am sure I am missing something very basic here.
Any help is appreciated.
Try this code :
<th:block th:each="dayNumber :${#numbers.sequence(1,7)}">
<p th:if="${#lists.isEmpty(storeHours.?[dayOfWeek.equals(dayNumber)])}" th:text="${dayNumber}"></p>
</th:block>
Maybe you need to check your storeHours is NOT empty?
Then ${not #lists.isEmpty(...)}.
So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)
I understand Thymeleaf is made for rendering the views however, I just wanted to know if there is any way to set a variable may be in request scope in a Thymeleaf fragment?
I have a very large conditional expression that I have to repeat a lot of times across the application so it will be really helpful if I can set a variable in main layout then reuse it in all other child fragments.
I am aware of using a Spring interceptor and setting the variable in model but I prefer not to.
Please advise.
Thanks
Prash
In the fragment template, define fragment with parameters:
<div th:fragment=”myfragment(myvariable)”>
<p th:text=”${myvariable}”></p>
</div>
and in layout template, include fragment with that variable specified:
<div th:include=”template :: myfragment(${variable})”></div>
Then variable is passed to the fragment template.
If you need the result of your expression only in the fragments you could use
th:with="var=${verylargeexpression}"
This creates a local variable which you can use everywhere within the dom element you defined it, including fragments.
<div th:include="'path/your/file/' + ${variable}"></div>
The code above can use variables that you can choose to build the file path
If you are using Spring MVC along with Thymeleaf, then you should be able to access any bean within thymeleaf template.
Just use expressions like this in global template ...
<span th:text="${beans.myBean.verylargeexpression}"></span>
I've been using jQuery UI with Bootstrap and I seem to run into a problem that I haven't had before. I'm not sure what has changed; I've tried setting back different version of jQuery and I didn't update the jQuery UI in the meanwhile. So I'm not exactly sure what broke.
The error from the console when I click on any date in the datepicker returns:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
The code is fairly straightforward as one would expect from a datepicker:
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
With the following HTML:
<input type="text" class="datepicker" />
Is this a bug that should be reported (since no other Google matches turn up) or is it something else I've missed?
I've found the solution. After a long time of debugging I figured out that there was a <div> that had the exact same ID, lying higher than the input field. Therefore the script took the first instance that contained the ID and picked the DIV instead of the input field.
I removed/renamed the DIV and it worked fine again.
The above jQuery datepicker error is generally caused by having a duplicate controls with the same ID, no matter whether you use id or another selector like css class or field name to instantiate it.
I solved this with create new ID for HTML DOM object. There is duplicated Id.
Try to add new ID for HTML DOM object.
I was having this error also. I found that elsewhere on the form I had some label 'for' attributes that did not match ids on the form inputs - seems like this might confuse datepicker too. Once I fixed those up, everything worked fine and the error went away. Take Andreas' advice (+1 for that!) and validate your forms - Chris Pederick's Web Developer Toolbar gives you an easy way to validate as you go.
put a selector.
<script> $("#formID #duplicatedId").datepicker({language: 'he'});
</script>
FormID: Id of the form that contains input.
duplicatedId: input element's Id.
In my case I was triggering the datepicker from a div against a hidden input field and getPos(a) was causing an undefined message on the variable "a". I experimented with moving the hidden input field outside of a div and that did the trick. Note that the input field was findable by jQuery no matter where it was, so that was not the problem - it was with positioning. Hope this helps someone else.
Might be two input box having same class without different id and for that you are trying for date picker. If it is there give two different id it will work.
I've ran into this problem too, and i was 100% sure i did not use duplicate id.
After some debugging i found out a reason - i was using DataTables mod, which duplicates contents of tfoot, thus creating exact copy of datepicker elements. And i had this datepicker inputs in tfoot row.
Fixed that issue with:
table.find("TFOOT").find("TR:first").remove();
Which is called AFTER table.DataTable(....)
This removed original, zero height row with all contents;
I am using Capybara to write test in my application, but now i have a situation in which i need to read id of an element within capybara like
myid = page.find("#parentNode").first(".childClass").id
Consider i have the below HTML structure
<div id="parentNode">
<div id="childNode1" class="childClass">1</div>
<div id="childNode2" class="childClass">2</div>
</div>
Please Note : I am not trying to read the content of the child node, but the id. The above shown is for example.
Expected Output : childNode1 (id of first element with class childClass
You are almost near the answer. The only change is instead of calling id as method, you have to call it as attribute as follows
page.find("#parentNode").first(".childClass")[:id]
I would use some xpath instead of css in this case.
Note I am not that skilled in xpathing so I use css first to find parentNode.
find(#parentNode).find(:xpath, div[1]).id
Try that and see if it works.
optionally you can use css in the second find as well and use the class as criteria since it finds the first element anyway.
Got the answer..!!
We can use page.evaluate_script to achieve this. I used the below code
page.evaluate_script('$("#parentNode .childNode").first().attr("id")')
Hope this will help some one :)