function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mrizmriz 

VisualForce + jQuery: How to add a selectList on button Click?

I want to add multiple SelectLists in new row on each button click using jQuery.

Following code is not working for me

VF Code: 
<apex:page controller="TestClass" id="pg" sidebar="false" showHeader="false" doctype="html-5.0" standardStylesheets="false">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <style>
            body{font-family:Arial,Sans;}
            a{text-decoration:none;}
            
        </style>
    </head>
    <body>
       
        <div>
            <apex:form >
                <apex:selectList size="1" multiselect="false" value="{!str}">
                    <apex:selectoptions value="{!Roles}"/>  
                </apex:selectList><br/>
                
            </apex:form>
            <button id="addRow" type="button">Add Row</button>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        
        <script>
            $(document).ready(function(){
                $("#addRow").click(function(){
                   // alert('hi');
                   $("#addRow").before('<apex:form ><apex:selectList value="{!str}"><apex:selectOptions value="{!Roles}"/></apex:SelectList></apex:form>');
                });
            });
        </script>
        
    </body>
</apex:page>


Apex Class 
public class TestClass{
    public string str{get;set;}
    
    public TestClass(){
           
    }
    public List<selectOption> getRoles(){
        List<SelectOption> myList=new List<selectOption>();
        
        myList.add(new SelectOption('0','--Select--'));
        myList.add(new SelectOption('val1','Val1'));
        myList.add(new SelectOption('val2','Val2'));
        myList.add(new SelectOption('val3','Val3'));
        
        return myList;
    }
}

I have even tried this variation, but with no success:
  
<apex:page controller="TestClass" id="pg" sidebar="false" showHeader="false" doctype="html-5.0" standardStylesheets="false">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <style>
            body{font-family:Arial,Sans;}
            a{text-decoration:none;}
            
        </style>
    </head>
    <body>
       
        <div>
            <apex:form >
                <apex:selectList size="1" multiselect="false" value="{!str}">
                    <apex:selectoptions value="{!Roles}"/>  
                </apex:selectList><br/>
                <!-- changed part -->
                <button id="addRow" type="button">Add Row</button>
            </apex:form>
            
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        
        <script>
            $(document).ready(function(){
                $("#addRow").click(function(){
                   // alert('hi');
                   $("#addRow").before('<apex:selectList value="{!str}"><apex:selectOptions value="{!Roles}"/></apex:SelectList>');
                });
            });
        </script>
        
    </body>
</apex:page>

 
Pankaj_GanwaniPankaj_Ganwani
Hi,

Not sure how we can embed the vf tags using jquery in page. But, I am able to do this by embedding native HTML. This is how I modified your code:
  
<apex:page controller="TestClass" id="pg" sidebar="false" showHeader="false" standardStylesheets="false">
    <head>
        <script src="{!URLFOR($Resource.TestSelect)}"></script>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <style>
            body{font-family:Arial,Sans;}
            a{text-decoration:none;}
            
        </style>
         <script>
            $(document).ready(function(){
                $("#addRow").click(function(){
                   // alert('hi');
                   $("#addRow").before('<select id="pg:formId:selectId" name="pg:formId:selectId" size="1"><option value="0">--Select--</option><option value="val1">Val1</option><option value="val2">Val2</option><option value="val3">Val3</option></select>');
                });
            });
        </script>
    </head>
    <body>
       
        <div>
            <apex:form id="formId">
                <apex:selectList size="1" multiselect="false" value="{!str}" id="selectId">
                    <apex:selectoptions value="{!Roles}"/>  
                </apex:selectList><br/>
                
            </apex:form>
            <button id="addRow" type="button">Add Row</button>
        </div>
        
        
        
       
        
    </body>
</apex:page>

 
John Pipkin 14John Pipkin 14
mritzi,

There is not a way to pass visualforce components into the page with jquery. If you absolutely need jQuery to do the task, you will have to write out the html code that Pankaj provided. 

There is another option that you can try. Apex has a Component class that allows for dynamic Visualforce. Check out this post https://developer.salesforce.com/forums/?id=906F000000097ZjIAI. It has code for dynamic visualforce selectLists. Your page button can call a method in your constructor to add the selectList. 

Hope that helps!
mrizmriz
@Pankaj,
The problem with this approach is, that i wont get all values of the SelectList that are fetched from Apex. This becomes more or less like static selectList with an equivalent HTML.

Actually my end goal is to populate SelectList from Custom Objects using SOQL queries. For the sake of posting i added four static values in Apex.