+ Start a Discussion

Create pick list using jQuery

I have created a page that uses jQuery and javascript remoting in order to allow the end user to quickly add rows to a table on the page.  The table represents top accounts for that users territory.  When a user clicks on the Add button, I use jQuery to add a new row to the table with an input that uses autocomplete to allow the user to choose an account.  That works fione but my issue is I want to add 2 picklist fields (that are picklists on the account object) into the table as well so the user can set these picklists.


I am having the hardest time trying to figure out how to dynamically add a select field with the options being pulled from a controller property.  I couls use javascript remoting each time the button is clicked to grab all the picklist values, but this doesnt seem that efficient.  Isnt there a way I can grab the slect options from the controller right within my jQuery


Here is the javascript that I have so far and doesnt work


//This does not work
var list = '{!ListValues}'; console.log(list); list.each(function() { console.log(this); });

//I would like these picklists to be working picklists that i can pass back to the controller in a javascript remoting call when the row is saved j$('#topAccounts table tbody').append('<tr data-SFid=""><td><input id="newAccount"></input></td><td>picklist</td><td>another picklist</td></tr>'); //AUTOCOMPLETE j$('#newAccount').autocomplete({ minLength: 2, source: function(request, response) { queryTerm = request.term; TerritotyPageController.searchAccounts(request.term, function(result, event){ if(event.type == 'exception') { alert(event.message); } else { var accountObjects = result; response(accountObjects); } }); }, focus: function( event, ui ) { j$('#newAccount').val( ui.item.Name ); return false; }, select: function( event, ui ) { j$('#newAccount').val( ui.item.Name ); j$(this).closest('tr').attr('data-SFid', ui.item.Id); console.log('Here it is' + j$(this).closest('tr').attr('data-SFid')); return false; }, }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { var entry = "<a>" + item.Name; entry = entry + "</a>"; entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>"); return j$( "<li></li>" ) .data( "ui-autocomplete-item", item ) .append( entry ) .appendTo( ul ); }; j$(this).hide(); j$('.saveButton.account').show(); j$('.cancelButton.account').show(); });



Here is the controller property to grab the list values


public List<String> getListValues() {
		List<String> options = new List<String>();
	    Schema.DescribeFieldResult fieldResult = Account.Territory_Plan_Top_Account_Reason__c.getDescribe();
	    List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
	    for( Schema.PicklistEntry f : ple)
	    return options;


Any help or insight would be greatly appreciated.  Thanks so much



Maros SitkoMaros Sitko

Probably You have some list of Account in your controller and you use it to render table, where you add next rows by javascript. Am i right? If yes. just use visualforce functionality without Javascript, to add new account to list

something like this

<apex:outputPanel id="myTable">
 <apex:pageBlockTable value="{!listOfAccount}" var="item">
  <apex:column >
    <apex:inputField value="{!item.Name}" />
<apex:commandButton action="{!addAccout}" value="add" rerender="myTable" />

public void addAccout(){
 listOfAccount.add(new Account());