How can I select a row in icefaces datatable using radio button?
I tried with the following
<h:selectOneRadio styleClass="none" valueChangeListener="#{bean.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>
And my javascript
function dataTableSelectOneRadio(radio) {
var id = radio.name.substring(radio.name.lastIndexOf(':'));
var el = radio.form.elements;
for (var i = 0; i < el.length; i++) {
if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
el[i].checked = false;
}
}
radio.checked = true;
}
In another post I got an answer that I should replace form.name with form.id. However after that I am getting error
radio.form is undefined
var elements = radio.form.elements;
Could someone help me how to resolve this issue.
I would like to select one row in icefaces datatable using radio button.
Any help is highly appreciable.
Thanks
Posting my generated html source
See here is jsf code for radio button
<h:selectOneRadio valueChangeListener="#{bean.setSelectedItem}"
id="reqselect" onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>
My heartfelt apologies for posting in correct html source, I was testing some thing else and thus wrong source got posted. Pasted below is my correct html source, kindly see if you could find something.
You should use the ice:selectOneRadio with spread layout:
<ice:selectOneRadio id="myRadioId" layout="spread" ... />
<ice:dataTable ... >
<ice:column ...>
<ice:radio for="myRadioId" ... />
</ice:column>
...
</ice:dataTable>
Here's how the generated HTML of each radio button look like:
<table id="crud:tab_cr:9:_id53" border="0" onkeypress="dataTableSelectOneRadio(this);">
<tr>
<td>
<input type="radio" name="crud:tab_cr:9:_id53" id="crud:tab_cr:9:_id53:_1" value="null" onkeypress="dataTableSelectOneRadio(this);Ice.util.radioCheckboxEnter(form,this,event);" />
<label for="crud:tab_cr:9:_id53:_1">null</label>
</td>
</tr>
</table>
So IceFaces is apparently rendering a whole HTML table around the radio button and putting the JS function on the <table> as well. The JS function clearly doesn't belong there at all (apart from the fact that onkeypress is incorrect, it should be onclick).
The <h:selectOneRadio> doesn't render a whole table around by default. This can only mean that you were actually using <ice:selectOneRadio> or that the IceFaces replaced the standard renderer for <h:selectOneRadio>. You need to fix it in this corner. Either replace by <h:selectOneRadio> or report a bug to IceFaces guys that their radio renderer is incorrectly putting the JS function on <table> element as well.
Related
Im adding the form, in an on-click event, to a row in a table using (Sorry about the really long row):
$('#row'+rowvalues[0]).html('
<form id="updform'+rowvalues[0]+'">
<td>'+rowvalues[0]+'</td>
<td>
<input type="text" name="namn'+rowvalues[0]+'" value="'+rowvalues[1]+'">
</td>
<td>
<input type="text" name="ingred'+rowvalues[0]+'" value="'+rowvalues[2]+'">
</td>
<td>
<input type="number" name="pris'+rowvalues[0]+'" value="'+rowvalues[3]+'">
</td>
<td>
<input type="number" name="fampris'+rowvalues[0]+'" value="'+rowvalues[4]+'">
</td>
<td>
<Button class="upddatasave" id="sub'+rowvalues[0]+'">Submit</button>
</form>
</td>
');
intialiseUpdatebutton();
then I initialize the button using the fuction called intialiseUpdatebutton();
that function looks like:
function intialiseUpdatebutton() {
$(".upddatasave").on("click", function() {
var butid = $(this).attr('id');
var dataid = parseInt(butid.slice(3));
console.log(dataid);
console.log($('#namn'+dataid).val());
var formvalues = $('#updform'+dataid).serializeArray();
console.log(formvalues);
});
}
It finds the button and it works, but I can't find the form. My guess was that it cant find the injected form, but if that's the case how do I fix it? like I do with the initialise function for the button.
What Im trying to do: Im displaying data from an SQL table in a table in html - It has 2 buttons 1 update and 1 delete. Im trying to fix the update button so that when I press it the cells with the values change into a form with textfields and the values in there and then you can just change the values and press submit to save the changes.
Edit: jsfiddle.net/rh8deo79/2 <- jsfiddle
By editing your formmatting job to break up the massive one-liner, I found that you end your <form> before your <td>, which is invalid html and probably your source of error.
You need to reorganize your tags. You can't have <tr><form><td>, as described here.
You might try creating a new table inside each form.
I am trying to find a way to have the document.getElementById("1").innerHTML to get triggered based on a condition coming from jsp code.
For example I have the following jsp code on the jsp page,
<table border="1">
<c:forEach items="${elements}" var="element">
<tr>
<td>${element.elementNumber}<br /> ${element.isReserved}
</td>
</tr>
</c:forEach>
</table>
Based on "element.isReserved", I need to change an element (supposedly using .innerHTML)in html. The element in html looks like the following. I have several of these elements.
<div class="col-xs-2">
<div class="o-btn">
<a id="1" onClick="myFunction(this);">1</a>
</div>
<div class="clearfix"></div>
</div>
As shown above, it is displayed as a button with value "1". I want to change the value to "X" based on a condition. I can do this directly with js,
<script>
function myFunction(elmnt) {}
function isReserved() {
return 'X';
}
document.getElementById("1").innerHTML = isReserved();
</script>
But I need to make it dependent on the output from spring or the jsp code shown above. My desired output is that the "1" displayed on the button will change to a "X" when the element.isReserved() (inside the jsp code) evaluates to true. Since I have several of the button elements, I need to check for every button if element.isReserved() evaluates to true.
I was able to make it work. I found this article very helpful.
After understanding (and accepting reality) how JSP works with html, I had to slightly restructure my program.
From spring mvc, I added my variables to the model,
model.addAttribute("element1", 1);
On the jsp page I checked the variables with javascript,
if("${element1}" == 1) {
document.getElementById("1").innerHTML = 'X';
document.getElementById("1").style.color = 'red';
}
Probably there are better solutions, but for a newbie like me, it works great!
The article I mentioned above is indeed a good and important read for new comers.
I am doing a portlet in Liferay with a form like this:
<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
<aui:select name="attribute" style="float: left;">
<c:forEach var="attr" items="${fields}">
<aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
</c:forEach>
</aui:select>
<aui:input type='button' value="Add Condition" name='addCondition' onClick="addCondition();" %>'></aui:input>
<div id='conditions'></div>
</form>
I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:
var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');
and
document.createElement('<aui:select>');
I tried too with AUI script doing:
var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');
But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.
Thanks.
As #Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.
To dynamically load the contents of the select box you would want to follow these steps:
add an element in your JSP, but make it hidden
<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.
document.getElementById('<portlet:namespace/>conditions').style.display = 'block';
For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.
<aui:select> is a JSP taglib, not the final HTML markup.
If you understand this, you resolve.
The following code was a reply to a question posted last year. It’s the best example I can find to want I am looking to do. I have HTML knowledge but my JS is limited – thanks for your patience. You can view the code here. The thread can be found here.
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
How can I get multiple images to display when a checkbox has been clicked? The images would be the same, position different.
When the images are displayed I would like to have a onclick event or mouseover that would display additional info– what is the best option for this, JS or image map (hotspots)?both? I’ve used hotspots before but only by itself not with JS. Any advice on this would be appreciated.
The following link is an example of what I am trying to achieve but on a smaller scale. http://www.cozumel.travel/learn/map.cfm
If you want to use the same code but for multiple images, you can add a function that would toggle every image you defined for the onChange event.
here is a function that would do:
function toggleMultiVisibility (a){
for (var i = 0; i < a.length; i++){
toggleVisibility(a[i]);
}
}
and here is the change you should do on the HTML:
onChange="toggleMultiVisibility(['imgemployment','imgpopulation']);"
here is a working example from your code: http://jsfiddle.net/Pu2E7/
I know there are lot of examples here that shows how to count the checked checkboxes but for some reason I'm unable to make this work.
What I'm trying to do is that when at least one checkbox in my page is checked a button should be enable or disable if none of the checkboxes are checked.
The thing is even that I implemented the following code, the count of checked checkboxes is always 0, I'm not sure what I'm missing.
Primefaces component:
<p:column id="idSelectBox" selectionMode="multiple" style="width:68px" />
JQuery Code:
function countChecked() {
var n = $("input:checkbox:checked").length;
alert('Count: ' + n);
}
$(":checkbox").click(countChecked);
Hope you can help me out!
UPDATE 1:
I did a little more research and the Primefaces component does not render to HTML checkboxes elements, its outputs is a set of divs and classes:
<td class="ui-selection-column">
<div class="ui-dt-c">
<div class="ui-radiobutton ui-widget">
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-radiobutton-relative ui-state-default">
<span class="ui-radiobutton-icon"></span>
</div>
</div>
</div>
</td>
So I'm still trying to figure out how I can detect whether the checkbox was checked or not.
PrimeFaces 3.1 datatable client side api has getSelectedRowsCount() method you can use to see if there are any selected rows.
you have to use the attribute selector see http://api.jquery.com/category/selectors/attribute-selectors/
var n = $("input[type=checkbox][checked]").length;