displaying data from a search in jquery jtable

Question

I'm trying to display search results from a query in a jsp page with jquery-jtable. I have a form on my page (for search parameters), and since I want to use jtable paging and sorting, I'm trying to find a way to pass to the listAction the search parameters. From what I understand, I should pass them as an array using the load() method, like:

$('#SearchResultTable').jtable('load', {parms: lolz, daje: 2});

The problem is they never get to the listAction servlet. My jtable is configured like this:

$(document).ready(function() {
$('#SearchResultTable').jtable(
            {
                paging: true,
                pageSize: '20',
                actions: {
                    listAction: 'CRUDController?action=list'
                },
      ...
    });
);

I have this form:

<div id="searchmask">
    <form method="post">
        <table>
...
           <td class="normal">
                    <input onkeypress="checkAlphaNum()" onkeyup="checkform()" name="sCodAzi" id="sCodAzi" size="12" /></td>
                    <input onkeypress="checkAlphaNum()" onkeyup="checkform()" name="sNrOrdine" id="sNrOrdine" size="12" /></td>
...
<input class="flat" disabled type="submit" id="submitter" value="Search"
           onClick="$('#SearchResultTable').jtable('load',
                           {sCodAzi: document.getElementById('sCodAzi').value,
                               sNrOrdine: document.getElementById('sNrOrdine').value}
                   );">
    </form>
</div>

<div id="SearchResultTable"></div>

The search servlet is correctly mapped to /CRUDController

the problem is: the listAction is never called. It's supposed to be called when the submit button is pressed, but it's not. Can some javascript expert (i'm quite limited at javascript) help me understand where I'm wrong?

Thanks.

Answer 1

The action listAction: 'CRUDController?action=list' being called only on your page loading. If you want to call this action on your button click, you need to write inside of button click event. Like this,

<input class="flat" disabled type="submit" id="submitter" value="Search"
       onClick="searchRecords();">

And in your javascript,

function searchRecords(){
  $('#SearchResultTable').jtable(
        {
            paging: true,
            pageSize: '20',
            actions: {
                listAction: 'CRUDController?action=list'
            },
         }
      ...
    );
}

This is only a client side correction. You need to post your CRUDController to verify your server side code.