Develop Reference

Struts2 checkbox in all records of jQuery Datatable

I am trying to implement the checkbox as a column in a jquery datatable. When I select the records then those alone should be actioned in the respective Action class. I have created a hidden variable and am assigning the value in jQuery likewise:
HTML:
<s:iterator value="warehouseBean.pickReqList" status="matStat">
<s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].grade"></s:hidden>
<s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].quantity"></s:hidden>
<s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].action"></s:hidden>
</s:iterator>
<tbody><s:iterator value="warehouseBean.pickReqList" status="matStat">
<tr>
<td><s:property value="grade" /></td>
<td><s:property value="quantity" /></td>
<td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
<td><s:checkbox name="chkboxname" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
</tr>
</s:iterator>
</tbody>
Whenever the checkbox is clicked, then the hidden variable is assigned with the value.
jQuery:
$('.pickIndivCheck').click(function(e){
var index=$(this).closest('tr').index();
$('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked); });
The above code works perfectly if I do not sort or navigate to different page of the table. If I select the check box on the first page of the datatable, the checked property is assigned to the action variable and the same is reflected in Action class.
If I sort or paginate then its not working. Upon troubleshooting, I found out that the jQuery code is getting the index of the clicked checkbox and assigns the value. For ex, if there are 20 elements in the object, loading in two different pages of the datatable. The hidden variables are written likewise:
<input type="hidden" name="warehouseBean.pickReqList[0].grade" value="BR000-R" id="warehousePick_warehouseBean_pickReqList_0__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[0].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_0__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[0].action" value="false" id="warehousePick_warehouseBean_pickReqList_0__action"/>
<input type="hidden" name="warehouseBean.pickReqList[1].grade" value="BR001-R" id="warehousePick_warehouseBean_pickReqList_1__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[1].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_1__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[1].action" value="false" id="warehousePick_warehouseBean_pickReqList_1__action"/>
<input type="hidden" name="warehouseBean.pickReqList[2].grade" value="BR002-R" id="warehousePick_warehouseBean_pickReqList_2__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[2].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_2__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[2].action" value="false" id="warehousePick_warehouseBean_pickReqList_2__action"/> .........
<input type="hidden" name="warehouseBean.pickReqList[18].grade" value="BR0018-R" id="warehousePick_warehouseBean_pickReqList_18__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[18].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_18__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[18].action" value="false" id="warehousePick_warehouseBean_pickReqList_18__action"/>
<input type="hidden" name="warehouseBean.pickReqList[19].grade" value="BR0019-R" id="warehousePick_warehouseBean_pickReqList_19__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[19].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_19__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[19].action" value="false" id="warehousePick_warehouseBean_pickReqList_19__action"/>
This is how it appears on the datatable as well. If I sort the table, then the last records appear in the first page of table. If I select the second record, the jQuery method gets the current index (which is 1) is assigned to the hidden variable
warehousePick_warehouseBean_pickReqList_1__action
whereas the actual variable should be
warehousePick_warehouseBean_pickReqList_18__action
The index of the datatable record is not same as the index of the hidden object. Can you please let me know how to assign the values to the checkbox of rows in different table?

I created a dummy variable temp and then changed the HTML likewise
<tr>
<td><s:property value="grade" /></td>
<td><s:property value="quantity" /></td>
<td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
<td><s:checkbox name="warehouseBean.pickReqList[%{#matStat.index}].temp" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
</tr>
Changed jQuery to get the id of the check box (which is clicked), extracted the index from the ID and then assigned to the respective hidden variable after creating the variable using the index, likewise:
$('.pickIndivCheck').click(function(e){
var clId=this.id;
var temp=clId.substring(40);
var n=temp.lastIndexOf('_');
var index=temp.substring(0,n-1);
$('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked); });

e.stopPropagation() is not a function in Knockout JS

I have a table where there are two things :
Click event on the row level
and click while checking a check box inside that row.
And when , checkbox is checked I do not want the Click event on tr to be fired.
<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)">
<td>
<input class="checkbox" data-bind="click:$parent.customerClick(event)" type="checkbox">
</td>
<td class="col-md-4">
<span class="name" data-bind="text:customerName" />
</td>
<td>
<span data-bind="text:siteName" />
</td>
</tr>
</tbody>
Now in customerClick() ; I tried to achieve the same.
customerClick: function (e) {
debugger;
e.stopPropagation();
},
But it did not work.
It says , e.stopPropagation(); is not a function also.
Please tell me how to do that .

Knockout comes with a binding for such an occasion - clickBubble:
<input class="checkbox" data-bind="click:$parent.customerClick(event), clickBubble: false" type="checkbox">
Setting it to false on your input will prevent the click event from reaching the handlers further up the tree.

If a checkbox is selected, select two others

The table contains a few rows like that:
<tr>
<td>
<input type="checkbox" name="indicator[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
</tr>
I need to disable 'graduations' being checked if 'indicator' is not checked. And if checked, i need to check exactly two 'graduations' in that row.
My actual code only limits the number of checked 'graduations'.
$(function() {
$('input[name=graduations\\[\\]]').click(function() {
if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
this.checked = false;
});
});

You can try this:
$("#area_covered").click(function(){
if($("#area_covered").is(':checked'))
$('.area_covered').prop('checked', true);
else
$('.area_covered').prop('checked', false);
});
give some id to the checkbox you're going to click, and give some class to both of the other checkboxes which you want to be get checked also.
then use the above jquery tag, which would work for you definitely.\
Thanks & Enjoy coding :)

Updated try this simple FIDDLE
$(function(){
$("input[name^=graduations]").on("change",function(e){
if((!$("input[name^=indicator]").is(":checked")) || +$("input[name^=graduations]:checked").length > 2 ){
$(this).prop('checked',false);
}
});
});
makes it simple
Hope it helps

if checkbox is not checked it should not take its value and error should not be displayed

i have a coding. In that checkbox may or may not be checked, if it is checked there is no error if the checkbox is not checked then error occurs. can anyone give solution for this
this is my html code for checkbox
<input name="cb" type="checkbox" id="set_2" value="20"/> Project<td><i class = "pro_hidden pro_option_set_2"> Included</i></td>
If the check box is checked it takes the value 20 and if not checked it will not take the value but it shows Notice: Undefined index: cbI also included javascript if the checkbox is checked it shows included. if not checked it displays nothing...the javascript coding s this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">/script>
<script>
$('.pro_hidden').css({
'display': 'none'
});
$(':checkbox').change(function() {
var option = 'pro_option_' + $(this).attr('id');
if ($('.' + option).css('display') == 'none') {
$('.' + option).fadeIn();
}
else {
$('.' + option).fadeOut();
}
});
</script>
I am trying to add values:
<tr>
<td>duration</td>
<td><input type="text" name="duration" values="">
</td>
</tr>
<tr>
<td><input type="radio" name="rd" value="2" required>2hrs</td>
<td><input type="radio" name="rd" value="4" required>4hrs</td>
</tr>
<tr>
<td>
<input name="cb" type="checkbox" id="set_2" value="20"> Project<td><i class = "pro_hidden pro_option_set_2"> 20hrs Included</i></td>
</td>
this is my entire code if this form is submitted it goes to next page and add the values using php
<?php
$du=$_POST['duration'];
$cb=$_POST['cb'];
$c=$_POST['rd'];
$sum=($du+$cb)/$c;
echo $sum;
?>
if checkbox is not checked it displays error here...if the checkbox is not checked how to give coding??

When checkbox isn't checked, it is not submitted to the server and therefore undefined in PHP. You have to use isset function before accessing any $_GET or $_POST variable.
Instead of this
$du = $_POST['duration'];
$cb = $_POST['cb'];
$c = $_POST['rd'];
You should do this
if(isset($_POST['duration']))
$du = $_POST['duration'];
if(isset($_POST['cb']))
$cb = $_POST['cb'];
if(isset($_POST['rd']))
$c = $_POST['rd'];
For more details refer to documentation.

If the checkbox is not checked, no value is passed. So before checkbox you have to place with the same name and default value.
<input name="cb" value="default" type="hidden">
<input name="cb" type="checkbox" id="set_2" value="20">

check to see if a particular checkbox is checked in a td using jquery

I am trying to make textbox readonly or not depending on the value of a checkbox of personalLoan. If personalLoan checkbox is checked I want the text to be not readonly. If it is unchecked then I want the text box to be readonly. Here is one of the rows
<tr id="mytableRows">
<td class="even"><input type="checkbox" value="true" name="homeLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="autoLoan" ></td>
<td class="even"><input type="checkbox" value="true" name="personalLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="noLoan" ></td>
<td class="odd"><input type="text" name="peronalAmount" value="1" readonly></td>
</tr>
I so far has this code
$(document).ready(function(){
$('.test tr').click(function (event) {
$(this).find(':checkbox').each(function(p){
if($(this).attr('name') == 'personalLoan'){
if ($(this).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
}
});
});
});
This tells me the current status of the checkbox but what I really need is to know onchange of the personalLoan checkbox so I can make the textbox readonly or not in that row (td)
thanks

For my own sanity, here is what I understand the solution to be.
$('input[type=checkbox]', '.test').on('change', function(e) {
if (this.name === 'personalLoan') {
$(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
}
});
Assuming a table with class test, this allows input when personalLoan is checked, and toggles to readonly when unchecked.
Demo on jsFiddle. (I've highlighted the checkbox in red.)
If this isn't it, then I really have no idea what you're trying to do.

It seems to me that you really want radio buttons, not checkboxes, and that the amount field should be set to disabled rather than readonly if the user selects "no loan".
Anyhow, here's an approach you can take. I've put the code in–line for convenience, it can re-implemented in jQuery or whatever you want, it's just an example of how to do what you seem to be trying to do.
The timeout is used so that the one click event can be used for any element in the form, including the reset button.
<form onclick="
var form = this;
setTimeout(function() {
form.personalAmount.readOnly = form.loanType[3].checked;
},0);
">
<table>
<tr>
<td><input type="radio" value="homeLoan" name="loanType">Home</td>
<td><input type="radio" value="autoLoan" name="loanType">Auto</td>
<td><input type="radio" value="personalLoan" name="loanType">Personal</td>
<td><input type="radio" value="true" name="loanType">None</td>
<td><input type="text" name="personalAmount" readonly></td>
<tr>
<td colspan="4">
<input type="reset">
</table>
</form>