Web2Py - rendering AJAX response as HTML table

Question

I am new to Web2Py, Python stack. I have a simple requirement to implement. I need to pass some data from a UI form to a Controller action for processing. After processing the data that action returns a response back to the view which I need to render as an HTML table on the same view. I am using AJAX for this purpose.

I am able to get the response back to the view but don't know how to iterate over the elements of that response to render as an HTML table. When I run the below code all it does is replace the entire target DIV with the response content.

I know it's pretty straightforward to this in Java, Grails, PHP, etc. But, I am struggling to find a way to that in Web2Py.

I have the following snippets in my code: index.html:

<script>
jQuery('#input_form').submit(function() {
    ajax('{{=URL('process_form')}}',
            ['input_var1','input_var2','input_var3','input_var4'], 'results_div');
    return false;
});

<div id="results_div">
    <form>
        <div class="table-responsive">
            <table id="records_table" class="table table-bordered">
                <tr>
                    <th>Col Head 1</th>
                    <th>Col Head 2</th>
                    <th>Col Head 3</th>
                    <th>Col Head 4</th>
                </tr>
                <tr>
                    <td>Col Content 11</td>
                    <td>Col Content 12</td>
                    <td>Col Content 13</td>
                    <td>Col Content 14</td>
                </tr>
                <tr>
                    <td>Col Content 21</td>
                    <td>Col Content 22</td>
                    <td>Col Content 23</td>
                    <td>Col Content 24</td>
                </tr>
            </table>
        </div>
    </form>
</div>

default.py

def process_form():
    results = request.vars
    return DIV(results)

Any help in this regard would be greatly appreciated.

Answer 1

By default, the Ajax function expects to receive HTML, which it will place inside of the element whose id is passed in. So, the simplest approach is to have your process_form function return the full HTML of the table, so the content of the results_div div will be replaced with the new table. You can build the HTML in Python using the web2py HTML helpers, or you can use a template, as with any other controller action. For example:

def process_form():
    inputs = ['input1', 'input2', 'input3']
    html = DIV(TABLE(THEAD(TR(TH('Column 1'), TH('Column 2'), TH('Column 3')),
                           _class='test', _id=0),
                     TR([request.vars[input] for input in inputs]),
                     _id='records_table', _class='table table-bordered'),
               _class='table-responsive')
    return html

Alternatively, you could have the process_form function return JSON data. In that case, you can make the third argument to ajax() a Javascript function, and the returned JSON data will be passed to that function. The function could then populate the existing table with the new data.