Possible to add a Visualforce component with Javascript?

Question

I am trying to make a custom page for adding a bunch of related objects to one parent object. Specifically a bunch of web form fields to a parent web form. Please don't try to change this model because it's definitely not possible to change at this point.

My though is to have a single element for each web form field (the child object).

I would like to have a button to add a new blank row to fill in details for a new web form field like this;

<apex:commandButton value="Add another field" onclick="addRow();"/>

I am able to get the button to fire off some basic javascript. However I'm not sure how I can add a visualforce element ( in this case) to the DOM.

Is that even possible?

Can I add anything other than raw html to the DOM?

Answer 1

Visualforce components are rendered as HTML at the server, and delivered to the client. Any changes you make in JavaScript will also be erased during the next round trip to the server when the form is reconstructed from the view state. Unless you know how to decrypt and modify the view state in JavaScript, you're left with coming up with a way to modify the view state by using a round trip to the server. The alternative is to write a pure client-side application (e.g. with jQuery, angular, etc) and hook it up to the server via @RemoteAction methods.

Answer 2

Visualforce components have a server-side model (held in the view state) as well as the client-side HTML/DOM. So if you intend to POST some fields back to the server, in my experience you need to re-render the page (let the server-side do its work) so that server-side model is correctly updated.