1

I am looking at the final Visualforce page example from here. I have saved the controller with no issue but upon trying to save the VF page, I am returning this error on line 56: 'the markup in the document following the root element must be well-formed'. Line 56 is this part:

</apex:page><apex:page Controller="DataTableExampleController" readOnly="true">

I don't understand what the problem is? Can someone advise?

<apex:page Controller="DataTableExampleController" readOnly="true">
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="contacttable"]').DataTable({
                    order: [[2, 'asc']],

                    initComplete: function() {
                        var api = this.api();
                        var select = j$('[id$=accountSelect]');
                        api.column(0).data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );   
                    }
                });

                j$('[id$=accountSelect]').change(function() {
                    var val = j$.fn.dataTable.util.escapeRegex(
                        j$(this).val()
                    );
                    contactTable.column(0)
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )
                        .draw();
                });
            });
        </script>
    </head>
    <body>
        <select id="accountSelect"><option value="All">All</option></select>

        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="contact">
                    <tr>
                        <td>{!contact.Account.Name}</td>
                        <td>{!contact.FirstName}</td>
                        <td>{!contact.LastName}</td>
                        <td>{!contact.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page><apex:page Controller="DataTableExampleController" readOnly="true">
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="contacttable"]').DataTable({
                    order: [[2, 'asc']],

                    initComplete: function() {
                        var api = this.api();
                        var select = j$('[id$=accountSelect]');
                        api.column(0).data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );   
                    }
                });

                j$('[id$=accountSelect]').change(function() {
                    var val = j$.fn.dataTable.util.escapeRegex(
                        j$(this).val()
                    );
                    contactTable.column(0)
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )
                        .draw();
                });
            });
        </script>
    </head>
    <body>
        <select id="accountSelect"><option value="All"></option></select>

        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="contact">
                    <tr>
                        <td>{!contact.Account.Name}</td>
                        <td>{!contact.FirstName}</td>
                        <td>{!contact.LastName}</td>
                        <td>{!contact.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>
  • 1
    Your code contains two <apex:page> </apex:page>. – Praveen Jul 27 '16 at 13:13
  • 1
    This page code is working correctly @Andy Hitchings. That website code is pasted in double time. In the same mistake having your page. Please remove Line 56 <apex:page ... > upto </apex:page>. – MSCB Jul 27 '16 at 13:37
2

You are using :

</apex:page><apex:page Controller="DataTableExampleController" readOnly="true">

second time in your code. I think you have pasted code two times. Please check.

  • I have flagged this answer as not being an answer. This would be better suited as a comment or maybe an edit to the original post. Thanks. – cmmoutes13 Jul 27 '16 at 13:27
  • @cmmoutes13 But this is an answer? OP has used two <apex:page> tags which would throw this error. – Dan Jones Jul 27 '16 at 13:29
  • Or there is the possibility that they only did that will posting the question on here. Therefore I believe it is better suited as a comment until that is addressed by the OP. – cmmoutes13 Jul 27 '16 at 13:31
  • Oh alright, I realize what you are saying now. I will remove the flag. Apologies. – cmmoutes13 Jul 27 '16 at 13:32
  • 1
    @cmmoutes13 Look at the link; the code indeed uses apex:page twice. – sfdcfox Jul 27 '16 at 13:33

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.