You need to sign in to do that
Don't have an account?

Dynamically calling values from javascript
Hi,
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.
Thanks,
prasuna
Hi,
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")
td2.setAttribute('width','100px');
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")
td3.setAttribute('width','100px');
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">
</apex:commandButton>
</apex:pageBlockButtons>
<a href="javascript: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:facet>
<apex:column >
<apex:facet name="header">Product</apex:facet>
<apex:inputField value="{!input.Product__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Customer</apex:facet>
<apex:inputField value="{!input.Customer__c}"/>
</apex:column>
<apex:column >
</apex:dataTable>
</apex:pageBlock>
</apex:form>
</apex:page>
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.
Thanks,
prasunaIf 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.
Hi,
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?
Thanks,
prasuna
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 />
<h3>Comments</h3>
<br />
<br />
<apex:repeat value="{!thispost.Comments__r}" var="comment"
id="comments"><h4>{!comment.name}</h4><br />
{!comment.Body__c}<p/>
<hr />
</apex:repeat>
</apex:outputPanel>
<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}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</div>
</div>
</div>
</div>
</div>
</apex:page>