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.


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.

  • 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). – Mossi Apr 12 '15 at 18:27
  • 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. – pchittum Apr 13 '15 at 8:39
  • 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. – Mossi Apr 13 '15 at 17:05
  • 1
    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. – pchittum Apr 13 '15 at 22:16

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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