Question

I am using DataTables with server-side processing with information from a form.
On form submit datatables sends a Ajax request, this request is handled by a Java Servlet.

After some problems I decided to start using Firebug. When I click on the submit button
firebug returns the following Jquery related error:

// Do send the request
// This may raise an exception which is actually
// handled in jQuery.ajax (so no try/catch here)
xhr.send( ( s.hasContent && s.data ) || null ); 

When I use Firebug to resend the request, the request is handled correctly, which means
that a JSON response is send to the browser.

I get a feeling there is something wrong with the order of the call, like the servlet isn’t ready or something like that, this would explain why the re-send request succeeds. Altough I’m not certain.

DataTables jquery code:

$(document).ready(function() {
    $("#searchResults").dataTable({
        "bJQueryUI": true
        });
    $('.searchsubmit').click(function() {
        var formData = $('form').serialize();
        $("#searchResults").dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'Search',
            "sServerMethod": "POST",
            "aoColumns": [
                          { "mDataProp": "messagecaseid" },
                          { "mDataProp": "messagesubject" },
                          { "mDataProp": "messagesender" },
                          { "mDataProp": "messagereceiver" }
                      ],
            "fnServerParams": function ( aoData ) {
                aoData.push({"name": "formData", "value": formData}
                        );
            }
        });
    });
});

Answer 1

In the onClick method set the return value to false, so that the page doesn’t refresh and Datatables gets a chance to populate the table.