function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
VNVN 

Can I append apex elements to html with jQuery?

Hi,

I have a VF page where i am displaying table rows dynamically on click of add row button. Here is the table 

<table class="table table-bordered table-hover table-sortable" id="tab_logic1">
                                                            <thead>
                                                                <tr >
                                                                
                                                                    <th class="text-center">
                                                                        Qualification
                                                                    </th>
                                                                    <th class="text-center">
                                                                        Subject
                                                                    </th>
                                                                    <th class="text-center">
                                                                        Grade
                                                                    </th>
                                                                    <th class="text-center">
                                                                        Status
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="tabrow" id="addr0">
                                                                
                                                                    <td>
                                                                        <apex:inputField styleClass="qualification" value="{!profTab.Qualification__c}"/>
                                                                    </td>
                                                                    <td>
                                                                        <apex:inputField value="{!profTab.Subject_Text__c}"/>
                                                                    </td>
                                                                    <td>
                                                                    <input type="text" name='grade0' placeholder='Grade' class="form-control"/>
                                                                    </td>
                                                                    <td>
                                                                    <input type="text" name='status0' placeholder='Grade' class="form-control"/>
                                                                    </td>
                                                                </tr>
                                                                <tr id="addr1"></tr>
                                                            </tbody>
                                                        </table>



I am new to jquery. In my jquery code is it possible to add apex:inputField to the html append. For ex

var i=1;
      $("#add_row").on("click", function() {

          $('#tab_logic1').append("<tr id='addr"+i+"'><td>"+ (i+1) +"</td><td><apex:form><apex:inputField value='{!profTab.Qualification__c}'/></apex:form></td><td><input  name='mail'"+i+"' type='text' placeholder='Mail'  class='va20 form-control input-md'></td><td><select class='form-control slct0' name='slct'"+i+" placeholder='Select'><option value='1'>1</option><option value='2'>2</option></select></td></tr");
        i++; 
      });

The above code gives me error saying apex:inputField must be between apex:form tag and when i add the tag the page on inspect element shows unexpected token.

I tried cloning the table row but there i was facing another issue which was that the drop down field on the cloned row doesn't function or behaves disabled. 

ANy help on this is greatly appreciated.

Thanks in advance
Priya
bob_buzzardbob_buzzard
No, you can't do this. When you add elements to the DOM via jQuery they must be HTML elements, as there is no mechanism for them to go through the Visualforce engine to convert Visualforce to HTML. If you want to add elements dynamically in VF you have to go back to the server, either via rendering or using Dynamic Visualforce Components : https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_dynamic_vf_components_intro.htm?search_text=dynamic