Populating a table using jQuery and AJAX

Here is an example which

• Populates a <table> dynamically using jQuery, JSON and AJAX

• Have three states: loading, error and success. We correctly identify AJAX call errors and instead of displaying the table we display an error message

• Display AJAX spinner until we received data from the server

• Display error messgae if the data fetch fails

• Otherwise populate the <table> with a data from the server

Template

    <div class="translator-master-loader">

        <div class="loading" style="display: none">
            <p>
                Loading content
            </p>
            <p>
                <img src="http://localhost:9944/Plone/spinner.gif" />
            </p>                    
        </div>

        <div class="failure" style="display: none">
            <dl class="portalMessage error">
                <dt>Error loading content data</dt>
                <dd data-bind="failureMessage"></dd>
            </dl>
        </div>

        <table class="listing translator-master-content" style="display:none">

            <tbody class="items">

                <!-- Generate an empty template row which can be applied on -->
                <tr class="listing-entry">
                    <td>
                        <a data-bind="link"></a>                       
                    </td>
                </tr>
                
            </tbody>

        </table>

    </div>