+ Start a Discussion
AllenThomas_78AllenThomas_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;
		}
	}
}

 

Best Answer chosen by Admin (Salesforce Developers) 
TheSwamiTheSwami

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

TheSwamiTheSwami

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.

This was selected as the best answer
AllenThomas_78AllenThomas_78

That got me on the right path. Thanks.