Question

I have an HTML div section with an empty table:

<div id="report_result" class="container">
        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
        </table>
</div>

Now I dynamically create the table headers and body which is based upon params opted by use in the page:

function runreport(datastring)
{
        var tables_header = $('<thead><tr><th>Flow State</th><th>Flow Logging Id</th><th>Co-relation Id</th></tr></thead><tbody></tbody>');
        ('#example').empty(); // added later
        tables_header.appendTo('#example');
}

There is a ‘Run Report’ button which on click calls ‘runreport’ function with user selected options.

The first time table comes up fine but if in case user just re-clicks the ‘Run Report’ button content of the table is getting duplicated and so on. So on each click the table header gets added.

As such I though of removing all the tables headers, row, footers etc before creating the same:

But I receive an error like even at very first time:

"#example".empty is not a function
[Break On This Error]   

('#example').empty();

But http://api.jquery.com/empty/ states this method – then why I am getting this error?

Answer 1

You forgot the $ in front of the parentheses:

$('#example')...