I am adding elements dynamically using java script(Adding textboxes when we click add).Each of this textbox would be an element of a bList in my domain class.
See Below
Code:
Class A
{
Approach1
List<B> bList= LazyList.decorate(
new ArrayList<B>(), new InstantiateFactory(
B.class));
Approach2
List<B> bList= new AutoPopulatingList(B.class)
}
So basically i am trying to add elements to bList.
I know that i need to use autopopulatinglist or lazy list.But neither of these work.When i try to post the form it complains telling that collection has 0 elements and the index is invalid.
Is the above declaration enuf to ensure that i have the list ready to add elements.
Also when i read about using autopopulating list.Ref: http://blog.richardadamdean.com/?p=12
It says that we have to change the formBackingObject method in the controller to instantiate a new AutoPopulatingList:
Code:
ShoppingBasketForm sbf = new ShoppingBasketForm();
sbf.setItems(new AutoPopulatingList(ShoppingBasketItem.class));
But i am using spring webflow not spring MVC, So where exactly i put this logic.
Even if i try to access <form:input path="bList[0]" /> it would complain
Please advice.
https://jira.springsource.org/browse/SWF-990 <-- look at this issue.
Related
I have created a mdl-badge with data-badge class to add a alert icon on my page. How can I dynamically change the data-badge data (i.e. rather than hard coded 5) in my controller so the displayed number corresponds to number of alerts reported by backend server. Doing {{alertcount}} does not seem to work. The html is:
<a class="mdl-badge mdl-badge--overlap mdl-badge--no-background" data-badge="5" href="#monitor"><i id="ttalert" class="material-icons">messages</i></a>
<div class="mdl-tooltip" for="ttalert">Alerts</div>
OK, so this is what I have done and it seems to work:
alerticon = document.getElementById('alertbadge');
alerticon.setAttribute('data-badge', alertcount);
I am using the tile example from polymers neon elements - and I am trying to make each expanded tile unique. My first try on how to do this was to pass a string in with the grid items like
{
value: 1,
color: 'blue',
template: 'slide-1'
}
And have that element be evaluated when rendered in a new element something like this. (this is the card template itself)
<template>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]">
<[[item.template]]></[[item.template]]>
</div>
This does not work - however I am wondering if there is some way to do this so I can load custom elements for the content of each card. For reference -https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages , it is the grid example and I am trying to replace the content of each card once it is clicked on ( the fullsize-page-with-card.html, here is all the html for it - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid ). Is this the wrong way of approaching this? Or maybe I have some syntax wrong here. Thanks!
Edit : OK, So I can send it through if i add it to the click to open the card like so
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$['fullsize-card'].template = event.detail.data.template;
this.$.pages.selected = 1;
};
and in the card's properties like so
template: {
type: String
},
So I can then evaluate it as [[template]] , however - the question still remains how to call a custom element (dynamically) using this string. I could pass a couple of properties and fill in a card or form so they are unique, but i think I would have much more creative freedom if I could call custom elements inside each card.
I have an element that allows referenced templates. There are a couple of others other there, but this one also allows data bindings to work: https://github.com/Trakkasure/dom-bindref
I'm trying to make a dynamic form with AngularJS and JavaScript. The objective is to add how many inputs the user need and transform all those inputs in AngularJS variables that print it on body. So I got that code:
$(function(){
var number = 1;
$('a.add').click(function(e){
e.preventDefault();
$('#this_div_contains_settings').append('<input type="text" name="example'+number+'" ng-model="example'+number+'" placeholder="Anything">');
number++;
});
$('#this_div_contains_settings').on('click','a.design_button', function(e){
e.preventDefault();
$(this).parent().remove();
});
});
This function add a INPUT on my DIV with the different ng-model every time it run.
The problem is, it just work's if the {{example1}} is already on my BODY, if I add it later with another function, it just doesn't work.
I'm new with AngularJS, so I didn't understand if I need to "refresh" the AngularJS everytime I add new variable or something like that.
Any help will be appreciated :)
Using jQuery is the wrong way to solve this problem. Instead, create an array inside of your controller that will hold the models for all of these inputs.
Depending on how you define/create your controllers, $scope may be replaced with this
$scope.examples = [];
Next, create a function that will add a new example to the array:
$scope.addExample = function () {
$scope.examples.push("");
}
Now, in your template, create the inputs using an ng-repeat:
<div id="this_div_contains_settings">
<input ng-repeat="example in examples" type="text" name="example" ng-model="example" placeholder="Anything">
</div>
and have your "add" button call your addExample function on click:
<a class="add" ng-click="addExample()">Add Example</a>
Finally, remove all of the code that was included in your question.
And for your .design_button that removes all the examples, that's easy too:
<a class="design_button" ng-click="examples = []">remove all examples!</a>
by that same concept, you could even remove the need for the addExample function, however i tend to keep logic in the controller (well, actually in the services, but that's another topic) anyway rather than putting it in the template.
I am using a reponsive grid which is an extension of primefaces. However I can't seem to figure out how to get the index of items within the grid.
I tried rowIndexVar and rowKeyVar and they don't seem to work. I've included a snippet of my code below.
<pe:fluidGrid value="#{resultList}" var="showvar" rowKeyVar="rowKey" fitWidth="true" hasImages="true">
...
</pe:fluidGrid >
...
<h:link onclick="$(callme('#{showvar.showId}','#{rowKey}'));">
<h:graphicImage url="#{showvar.showImage}"/>
</h:link>
....
<h:outputScript>
function callme(id,row){
alert(id);
alert(row);
}
</h:outputScript>
I could just declare an unique index variable in my object and reference it like below, but I'd like to know if fluidGird offers a rowKeyVar attribute.
<ui:param name="itemIndex" value="#{showvar.showIndex}" />
I think what you are looking for is the varContainerId
varContainerId
Name of the request-scoped variable which contains the prefix of the client Id within pe:fluidGridItem. This property allows to get the whole clientId of a component within pe:dynaFormControl. The whole client Id is sometimes required for JavaScript or RequestContext.update(...).
See also: http://www.primefaces.org/showcase-ext/views/fluidGrid.jsf
I am working on a script that is meant to pull the inner html of a paragraph that is only shown onblur. I have spent hours on this and have not been able to successfully surface this inner html in our data layer.
Firstly, the data layer is custom (i.e. not the default data layer for GTM) - not sure if this makes a difference.
Secondly, the JavaScript I am using to attempt to achieve this. The onblur listener shows a parahraph (with no Element ID, only Element Class) when a user moves on from the form (which is the first parent element which has an ID, it is several parent elements up from the class). The paragraph passes a validation message (e.g. enter a valid email). I am attempting to pass the error message to the data layer:
<script>
object.onblur=function(){
var myForm = document.getElementById('instantSearchForm');
if(myForm) {
var myPara = myForm.getElementsByTagName('error-message');
if(myPara.length) {
var paraValue = myPara[0].innerHTML;
dataLayer.push({inputError: paraValue });
}
}}
</script>
As per your comment I see that you are using the class name for selecting your elements. Then you should try
myForm.getElementsByClassName('error-message');
instead of
myForm.getElementsByTagName('error-message');