Apex Code Development You need to sign in to do that
Don't have an account?
AllenThomas_78 jQuery select values from an apex:pageBlockTable
When a user selects a row(s) in a pageBlockTable with a checkbox (and then clicks a button) I want to be able to use jQuery (or Javascript) to populate the Account Names in another table.
Here's my code so far:
Visual Force
<apex:page id="testAllen" controller="testAllen">
<apex:form id="theForm" >
<apex:pageBlock title="Accounts" id="pageBlock">
<table id="myTable"></table>
<input type="button" value="Add selected to myTable" onClick="addAccountsToMyTable()" />
<apex:pageBlockTable value="{!DisplayAccount}" var="da" id="accountsTable">
<apex:column >
<apex:facet name="header">Select</apex:facet>
<apex:inputCheckbox value="{!da.IsSelected}" />
<apex:inputHidden value="{!da.account.Id}" id="hdnAccountId" />
</apex:column>
<apex:column >
<apex:outputText value="{!da.account.Name}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<script type="text/javascript">
function addAccountsToMyTable() {
var accountsTable = $(jq("{!$Component.theForm.pageBlock.accountsTable}"));
//TODO: need to add selected account names to myTable
}
function jq(myid) {
return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
}
</script>
</apex:form>
</apex:page>Apex:
public class testAllen {
public List<DisplayAccount> DisplayAccount {get; set;}
public testAllen() {
this.DisplayAccount = new List<DisplayAccount>();
for (Account a : [SELECT id, Name FROM Account LIMIT 20]) {
this.DisplayAccount.add(new DisplayAccount(a));
}
}
public class DisplayAccount {
public boolean IsSelected {get;set;}
public Account account {get;set;}
public DisplayAccount(Account a) {
this.account = a;
this.IsSelected = false;
}
}
}
This should help you get started:
<apex:page id="testAllen" controller="testAllen"> <apex:includeScript value="{!$Resource.Jquery}"/> <apex:form id="theForm" > <apex:pageBlock title="Accounts" id="pageBlock"> <table id="myTable"></table> <input type="button" value="Add selected to myTable" onClick="addAccountsToMyTable()" /> <apex:pageBlockTable value="{!DisplayAccount}" var="da" id="accountsTable"> <apex:column > <apex:facet name="header">Select</apex:facet> <apex:inputCheckbox styleClass="selected-checkbox" value="{!da.IsSelected}" /> <apex:inputHidden value="{!da.account.Id}" id="hdnAccountId" /> </apex:column> <apex:column > <apex:outputText styleClass="account-name" value="{!da.account.Name}" /> </apex:column> </apex:pageBlockTable> </apex:pageBlock> <script type="text/javascript"> function addAccountsToMyTable() { $(".account-name").each(function() { var checkbox = $(this).closest('tr').find("input:checkbox:checked").val(); if (checkbox) { var customerId = $(this).html(); console.log(customerId); } }); } </script> </apex:form> </apex:page>Notes:
- I use console.log which only works on chrome and firefox
- I included jquery as a static resource. I didn't see that in your code.
- I added an account-name style to select the account name values
This is not the most efficient code, but should help you get started.
All Answers
This should help you get started:
<apex:page id="testAllen" controller="testAllen"> <apex:includeScript value="{!$Resource.Jquery}"/> <apex:form id="theForm" > <apex:pageBlock title="Accounts" id="pageBlock"> <table id="myTable"></table> <input type="button" value="Add selected to myTable" onClick="addAccountsToMyTable()" /> <apex:pageBlockTable value="{!DisplayAccount}" var="da" id="accountsTable"> <apex:column > <apex:facet name="header">Select</apex:facet> <apex:inputCheckbox styleClass="selected-checkbox" value="{!da.IsSelected}" /> <apex:inputHidden value="{!da.account.Id}" id="hdnAccountId" /> </apex:column> <apex:column > <apex:outputText styleClass="account-name" value="{!da.account.Name}" /> </apex:column> </apex:pageBlockTable> </apex:pageBlock> <script type="text/javascript"> function addAccountsToMyTable() { $(".account-name").each(function() { var checkbox = $(this).closest('tr').find("input:checkbox:checked").val(); if (checkbox) { var customerId = $(this).html(); console.log(customerId); } }); } </script> </apex:form> </apex:page>Notes:
- I use console.log which only works on chrome and firefox
- I included jquery as a static resource. I didn't see that in your code.
- I added an account-name style to select the account name values
This is not the most efficient code, but should help you get started.
That got me on the right path. Thanks.