1

I got in to a use case where I have to navigate to a VF page (from a button click on case layout) to enter some custom data of a custom (custom__c) object. Once user enter data it has to populate in to a Table in a same page. And then we need to allow user to update data from table. (Inline editing)

Here's my solution. Anyone please suggest a proper solution apart from this!!!

I used Lightning Design with VF page and DataTables(datatables.net) to populate the table. Inside datatable i have added to edit the value. And I'm trying to retrieve user enter details via JS remoting, remote actions. Here is my code,

Inside Table (VF page)

<apex:repeat value="{!myList}" var="comp">
<tr>
<td>{!comp.cVal__c}</td>
<td><input type="text" id="a_txt" class="slds-input" value="{!comp.aVal__c}"/></td>
<td><input type="text" id="b_txt" class="slds-input" value="{!comp.bVal__c}"/></td>
</tr>
</apex:repeat>

Here's my JS (I have an onclick save button to fire this)

j$('.saveAll_btn').on('click', function(e){
var tableId = j$(this).attr('aria-control');                
var selectedDataRows = getSelectedDataRowValues(tableId);

if (selectedDataRows.length > 0){
var selectedRecords;
for (var i=0; i<selectedDataRows.length; i++){
selectedRecords.push(selectedRows[i][0]);
selectedRecords.push(selectedRows[i][1]);
selectedRecords.push(selectedRows[i][2]);
alert(selectedRows[i][2]);
//Issue comes here
}
}
});

Here is the getSelectedDataRowValues

function getSelectedDataRowValues(tableId){ 
//var compTable = this[tableId.replace(/\-/g, '_')];
var dtAPI = j$('[id$=mytable_tbl]').DataTable();

var dataRowNodes = dtAPI.rows().nodes();
var dataRowValues = dtAPI.rows().data();
return dataRowValues;
}

So my issue here is while I can capture the value for selectedRows[i][0] (default table value), i cannot capture the user enter values for selectedRows[i][1] and selectedRows[i][2] input fields. The Alert shows "<input type="text" id="a_txt" class="slds-input" value=""/>" only instead of the entered value. How can I overcome this?

  • Hmmm...Your getSelectedDataRowValues reinitializes the table each time. Not sure if that is the issue but you should initialize it once and store the API in a var that is global in scope (outside of a function). That way you can reference it throughout your code... – Eric Apr 8 '17 at 6:01
  • What do you think about the solution? Do you suggest any other better solution? – L Mudiyanse Apr 8 '17 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.