+ Start a Discussion

Dynamically calling values from javascript



I am creating a visualforce page, In that i have added 16 columns and column values are all dropdowns. There is also an expand view i.e "+" when clicked on this "+" another set of dropdowns are added for all the columns at a time.The first row of the table is created dynamically using visualforce components but when we add rows (i.e by clicking "+") those are done through javascript and i have given the dropdown values in the javascript but how to make it dynamic using Apex Class and Visualforce Components.

Can any one help me out in this.




Can you post the code and elaborate on what you would like to have happen dynamically



Here is my code

Javascript :


var count = "1";
  function addRow(in_tbl_name)
    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
    // create row
    var row = document.createElement("TR");
    // create table cell 1
    var td2 = document.createElement("TD")
    var strHtml2 = "<SELECT NAME=\"Animal\" style=width:90px><OPTION VALUE=\"Cat\">01-10931-PL-E203<OPTION VALUE=\"Dog\">1050492<OPTION VALUE=\"Mouse\">1820001804<OPTION VALUE=\"Cat\">7525S/200821<OPTION VALUE=\"Cat\">9006397<OPTION VALUE=\"Cat\">AIR-AP1231G-A-K9<OPTION VALUE=\"Cat\">BR1001-G1<OPTION VALUE=\"Cat\">SW-653-3_3<OPTION VALUE=\"Cat\">WA4005-G1<OPTION VALUE=\"Cat\">WORKABOUTPRO</SELECT>";
    td2.innerHTML = strHtml2.replace(/!count!/g,count);
    // create table cell 2
    var td3 = document.createElement("TD")
    var strHtml3 = "<SELECT NAME=\"Colors\" style=width:90px><OPTION VALUE=\"black\">(NK)-Germany-G97<OPTION VALUE=\"White\">(NK)-Government-UG<OPTION VALUE=\"Brown\">(NK)-Italy-ITN<OPTION VALUE=\"black\">(NK)-Pacific Rim-PR<OPTION VALUE=\"black\">(NK)-South America-SAS<OPTION VALUE=\"black\">(NK)-USA-UC<OPTION VALUE=\"black\">(NK)-USA-UD<OPTION VALUE=\"black\">(NK)-USA-UE<OPTION VALUE=\"black\">A10470<OPTION VALUE=\"black\">A11340</SELECT>";
    td3.innerHTML = strHtml3.replace(/!count!/g,count);


VF page:


<apex:page showHeader="false" sidebar="false" controller="myController">
<script type="text/javascript" src="{!$Resource.MyJavascript}"/>
  <apex:form id="theForm">
    <apex:pageBlock id="tblId">
   <apex:pageBlockButtons location="bottom">
 <apex:commandButton value="Save and Close" action="{!save_close}" rerender="error"/>
<apex:commandButton action="{!cancel}" value="Cancel">
<a href="javascript&colon;void(0)" onClick="addRow('{!$Component.tblId.products}');"> <B>+</B> </a>
 <apex:dataTable id="products" value="{!accts}" var="input" cellPadding="4" width="100%" >
                <apex:facet name="footer">
           <apex:commandLink value="Save" action="{!save}" rerender="table,error"/>
            <apex:column >
    <apex:facet name="header">Product</apex:facet>
   <apex:inputField value="{!input.Product__c}"/>
   <apex:column >
    <apex:facet name="header">Customer</apex:facet>
    <apex:inputField value="{!input.Customer__c}"/>
   <apex:column >



So, here in my javascript i am displaying the dropdowns but in place of the dropdown can i use this "{!input.Customer__c}" to make it dynamic or is there any other way to make the dropdowns dynamic. the first row of the table is created by the VF page code and from second row ,it comes from javascript.

Can you please help me.





Message Edited by gprasuna on 02-01-2009 09:02 PM

If I'm understanding what you want to do correctly, then I would suggest trying a different approach. Dynamically generate an output panel with the actions/values that you want to activate and render / rerender to suit your needs. I don't think you can dynamically inject VisualForce tags into prewritten javascript. In any case, it would be simpler and less error prone to do it all in visualforce.


If I'm off track let me know and I'll take a closer look at your code, though it came out a little garbled. Try using the code button thingy next time.




Right now i am hardcoding dropdown values in the javascript and when we use this value "{!input.Product__c}" in the VF Page we are getting the values from the Salesforce database (correct me if i am wrong) .


Is there any way for not hardcoding the dropdown values in the javascript and get it from the database instead?






I believe this is similar to what you are trying to achieve without the javascript


<apex:page showHeader="false" standardcontroller="Blog_Post__c" extensions="blogExtension">

<apex:stylesheet value="{!$Resource.blogStyle}"/>   <!-- extracted from blogger.css -->
    <link rel="stylesheet" type="text/css"
        href="http://www.blogger.com/css/blogger.css" />

<div id="body">
<div id="main-wrap">
<div id="main" style="margin-top: 5px">
<div id="m2">
<div id="m3">
       <apex:image id="banner" value="{!$Resource.GatesheadSmall}"/>
<br />     
<h2 class="title"><apex:outputtext value="{!thispost.name}" /></h2>
<br />
<br />
<apex:outputText value="{!thispost.Post__c}" />
<apex:outputPanel id="main">
<br />
<br />
<br />
<br />

<apex:repeat value="{!thispost.Comments__r}" var="comment"
            id="comments"><h4>{!comment.name}</h4><br />
            <hr />

<apex:form >
Title: <BR />
<apex:inputField value="{!newComment.Name}"/> <BR /><BR />
Email:<BR />
<apex:inputField value="{!newComment.Email_Address__c}"/> <BR /><BR />
Body: <BR />
<apex:inputTextarea cols="100" rows="5" value="{!newComment.Body__c}"/>
<BR /><BR />
<apex:pageBlock >
<apex:pageBlockButtons location="bottom" >

<apex:commandButton styleclass="groovybutton" value="Save"  action="{!saveNewComment}"/>
<apex:commandButton styleclass="groovybutton" value="Go Back" action="{!blog}"/>




public class blogExtension {
    public PageReference menu() {
           PageReference pageRef= new PageReference('/apex/GCMenu');
                return pageRef;

        public PageReference edit() {
                Id id = System.currentPageReference().getParameters().get('id');
                PageReference pageRef= new PageReference('/apex/blogDetail' + '?id=' +
                return pageRef;
        public class post {
                public Blog_Post__c bpost {get; private set; }
                public Integer numberofcomments { get; private set;}
                public post( Blog_Post__c b) {
                        bpost = b;
                        numberofcomments = bpost.Comments__r.size();
        public list<Blog_Post__c> blogList { get; private set; } 
        public blogExtension() { 
                blogList = [Select b.Post__c, b.Name, b.Id, createdby.name,createddate,
                        (Select Id, Name, 
                        Email_Address__c, Body__c, Blog_Post__c From Comments__r) 
                        From Blog_Post__c b];   
        public list<post> getPosts() {
                list<post> ret = new list<post>();
                for ( Blog_Post__c bl : blogList) {     ret.add( new post( bl) ); }
                return ret;

        public PageReference newBlog() {
                PageReference pageRef= new PageReference('/apex/blogedit');
                return pageRef;

       public PageReference blog() {
                PageReference pageRef= new PageReference('/apex/blog');
                return pageRef;

/* for use as an extension, blogDetail.page 
        /*was final*/ ApexPages.standardController controller; 
        ID id { get { return this.controller.getRecord().id; }} 
        public  blogExtension(ApexPages.standardController c) {
            this.controller = c;
        public PageReference saveNewComment() {
            insert newComment; 
            return init(); 
        public Blog_Post__c thisPost { get ; set; } 
        public Comment__c newComment { get; set; }
        public PageReference init() {
            this.thisPost = [ Select b.Post__c, b.Name, b.Id, createdby.name, createddate, 
                    (Select Id, Name, Email_Address__c, Body__c, Blog_Post__c,createddate From Comments__r order by createddate) 
                From Blog_Post__c b where b.id = :id limit 1];
            this.newComment = new Comment__c( Blog_post__c = id );
            return null;
        static testmethod void testFoo() {
        Blog_post__c bp= new Blog_post__c();
insert bp;
        post p = new post(bp);
        Integer g = p.numberofcomments;
         blogExtension b = new BlogExtension();
         b.newcomment = new Comment__c();
         b.newcomment.blog_post__c = bp.id;
         ApexPages.StandardController sc=new ApexPages.StandardController(bp);
         b.controller = sc;
        // b.id = bp.id;
         //List<Blog_Post__c> p = b.blogList();
         //List<post> q = b.getPosts();