We Keep Coding

How to add checkboxes with possibility to choose all in datatable jQuery

I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?

like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle

Spring Boot Checkbox Array not working as expected

I have an array of checkboxes all with the same names which I submit to a Spring Boot Controller. I build a Bootstrap DataTable using Jquery/Ajax using data which receive from the database and test if I should select the checkbox when the page loads. I do this by using this code:
if (data['isChecked'] == "1") {
return "<input type='checkbox' name='fieldIdList' value='1_' checked>";
} else {
return "<input type='checkbox' name='fieldIdList' value='1_'>";
}
This code loops, so the next checkbox value will be 2_ and the next 3_, etc, etc.
When the page loads the table displays 10 rows and my first 2 checkboxes are shown as selected. This is correct.
Now when I submit this form without changing the state of any of the checkboxes to my Controller code below:
#RequestMapping(value = "/admin/dataTable", method = RequestMethod.POST)
public String postDataTable(#RequestParam("fieldIdList") List<String> fieldIdList){
return "";
}
I get 2 entries in my fieldIdList:
"1_"
"2_"
This is correct because only my first 2 checkboxes was checked. But when I uncheck any of the checkboxes and submit again, I get a funny result. In the example below, I unchecked the 2nd checkbox and then submitted the form again, my entries in my fieldIdList:
"1_"
"1_"
"1_"
"2_"
By unchecking the second checkbox and submitting, I suspected to get only 1 entry in my fieldIdList as "1_"
Also after I submit, the page is redirected the the previous page, so when I enter this page again, all the Lists are loaded as new, so there can be no previous values still stored in them.
Not sure if this is a Jquery/Ajax issue or Java issue or just a problem with the object between the chair and laptop :)
Because the DataTable is paging, I had to add this piece of code below in order to get all the rows of the DataTable. Not sure if this is causing the issue.
// Handle form submission event
$('#manageFormFields').on('submit', function (e) {
var dataTable = $('#formFieldsDataTable').DataTable();
var form = this;
// Iterate over all checkboxes in the table
var tableData = dataTable.$('input, select').serializeArray();
$(form).append(tableData);
$.each(tableData, function () {
// If element doesn't exist in DOM
if (!$.contains(document, form[this.name])) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
The generated HTML:
Thank you for your time.

I am truly sorry for wasting your time.
It turns out I was adding the list of rows twice to the Datatable. Thus there were 2 fields with the same name and value. When I uncheck the one, the other one is still present and that is why the controller still picked it up.
I could not see this in the HTML output because the source only shows what is visible on screen(the first 10 rows).
So when I paged through all the rows I noticed another checkbox was checked and then saw that I added the rows twice.
Removing the duplicates fixed my problem.
Thank you!!

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")

There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.

Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

button adds a row and inputs cell values from text fields

i asked a similar question before however the solution no longer works for my application, i need a button click to create a new row (FailureInstance) in a table (failuretable) and i need it to populate three of the cells with data from fields that are elsewhere filled in. here is my code: form1.failuretable.AddFailureButton::click - (JavaScript, client)
xfa.host.messageBox("Failure Recorded and Added To Table Below. Please Continue Filling Out the Form Until All Failures Have Been Recorded. Then Please Save and Submit the Form.", "Continue/Save/Submit", 3);
if (xfa.host.version < 8) {
xfa.form.recalculate(1);
}
var newRow = failuretable._FailureInstance.addInstance(1);
newRow.FailureCode.rawValue = form1.FailureType.rawValue;
newRow.Location.rawValue = form1.CellLocation.rawValue;
newRow.Comments.rawValue = form1.AdditionalComments.rawValue;
right now this doesn't even create a new row for my table... any help is appreciated!

You should check whether multiple instances for a row are allowed. Select FailureInstance in hierarchy view and then in Object->Binding (if you dont see it go to window menu and select Object) check wheter "Repeat Row for Each Data Item" is selected. If not then select it and your code should work fine.
I advice also to enable JavaScript debugging in your Adobe Reader because it than you should see when error appears and what is it about. Open Reade go to Edit->Preferences->JavaScript and select "Show console on errors and messages". Then you will need to restart Designer.

At design time remember to enable:
Object > Data Binding > Repeat Table For Each Data Item
In code, I believe that lack invoking "instaceManager":
...
var newRow = failuretable.FailureInstance.instanceManager.addInstance(1);
...
http://help.adobe.com/en_US/livecycle/9.0/designerHelp/index.htm?content=000178.html

Not able to access the child control with in user control using javascript

I have a user control "SettingsControl" containing an ajax:CollapsiblePanelExtender which in turn has a GridView (gridView) and checkBoxes. On top of GridView we have two LinkButtons "Select All" and "Clear All". I have written to enable select all and clear all functionality. Select All should select all the rows in the grid by calling the following JavaScript written on the Client .aspx file.
function SelectAll(chk)
{
//get reference of GridView control
var grid = document.getElementById('<%= SettingsControl1.FindControl("gridView").ClientID %>');
//variable to contain the cell of the grid
var cell;
if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i=1; i<grid.rows.length; i++)
{
//get the reference of first column
cell = grid.rows[i].cells[0];
//loop according to the number of childNodes in the cell
for (j=0; j<cell.childNodes.length; j++)
{
//if childNode type is CheckBox
if (cell.childNodes[j].type =="checkbox" && cell.childNodes[j].id.indexOf('chkSel')!=-1)
{
//assign the status of the Select All checkbox to the cell checkbox within the grid
cell.childNodes[j].checked = chk;
}
}
}
}
}
I am not able to access the usercontrol or any element of user control on client side. I am not sure how to achive this functionality.
The .aspx page cal the user control as:
<uc1:SettingsControl ID="SettingsControl1" runat="server" />
PLEASE HELP!!!!

var grid = document.getElementById('SettingsControl1_gridView');
does the trick for me.
If you're executing a script INSIDE a user control you have to use 'SettingsControl1$gridView'.
Hope this will help anyone... anytime... ;-)