current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.
up vote 2 down vote favorite

I need to add VF elements dynamically on the client side (cannot use Apex due to page structure). I am looking for something like this:

$("#myid").append("<apex:outputText id='abc'>My Text</apex:outputText>");

I know the above script doesn't work, and I welcome all ideas here.

EDIT: These new elements need to be binded to their SObjects.

share|improve this question

2 Answers 2

up vote 3 down vote

Visualforce components are server-side rendered. In other words there is a component on the Salesforce servers that looks at at apex:outputText (and any other VF components) and transmogrifies it into normal HTML. Attempting what you are trying is impossible as the browser fundamentally doesn't understand what apex:outputText is. By the time your Visualforce page's apex:outputText makes it down to the browser, it probably resembles something more like: 

<span class="someclass" id="blahblah">My Text</span>

Maybe there is a div wrapped around it...maybe not.

If you need to add something to the DOM client side...then just add the appropriate HTML element.

If it needs to be driven by data from Salesforce then you have some options:

  • Bring it into some kind of local memory-resident data in the form of some kind of JS object
  • You can bind it to an apex:inputHidden then get to it when you need it
  • Generate the DOM element on page load then hide/unhide when needed

The last option is probably the simplest, and would be easy to implement in jQuery (which you appear to have selected). Although if you have a lot of these, it is potentially crazy-making to track the state of everything that should/should not be rendered at any one time. It also can mean quite a bit of overhead in undisplayed HTML on the client.

This is why a lot of client-side development in Visualforce has gone the way of structured opinionated frameworks like AngularJS.

share|improve this answer
    
All this is fine, except that I need to actually add new VF elements to my page through JS. Having placeholders was my first thought too but it's not a fitting solution as these elements are supposed to represent new records (think of it as a purely client-side mass add/edit solution). –  user1936026 yesterday
    
New record != new VF element necessarily. VF is probably irrelevant when you push the page rendering to the client apart from the fact that there is a VF wrapper around your HTML. The new record in your case, after the server trip to create the record, will be a new element in a JS array that you will iterate over displaying a div or li or some such. Like I said, you do not need VF elements, as JS can't make them. They are server side. You need dynamic HTML on the client side. –  Peter 17 hours ago
    
How else can I replicate the inputField binding functionality if not using VF elements? These rows of new records need to be binded to their SObjects somehow. –  user1936026 8 hours ago
    
If you want to use binding then you need to let it happen on the server somehow. Or you need to drop binding and use VF remote objects or JavaScript remoting. –  Peter 3 hours ago
up vote 1 down vote

Instead of adding the component dynamically, add it in the page with tyle display:none and then dynamically just change the style to display:block.

Hope this helps.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.