Question

I have a table of data and I want the user to be able to click a column header and send a non-AJAX request that reloads the page with the data sorted by that column.

I could just make the column title a link, but I want them to be able to click anywhere in the column header so I’ve added hidden forms and I’m trying to use jQuery to submit the form when the clicks the column header.

The problem I’m hitting is that although it works exactly as expected for the second col header — a click submits the hidden form and reloads the page — but does not work at all for the first col header — the form does not get submitted.

1. What is keeping the first column’s form from being submitted?

2. Is there a better way to do this than using a hidden form?

---

HTML:

<th class='sortable'> 
  <form action='/procurements' class='sort_form' method='get'> 
    <input name='sort' type='hidden' value='title' /> 
  </form> 
  Title
  <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
</th> 
<th class='sortable'> 
  <form action='/procurements' class='sort_form' method='get'> 
    <input name='sort' type='hidden' value='nature' /> 
  </form> 
  Procurement type
  <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
</th>

JS:

$(document).ready(function(){
  $('table.tgr_datagrid th.sortable').click(
    function() {
      $(this).children( 'form' ).submit();
    }
  );
});

Answer 1

If you are just doing a GET request then don’t bother using a form at all:

$('table.tgr_datagrid th.sortable').click(function() {
    window.location = '/procurements?sort=' + $(this).text();
});

DEMO: http://jsfiddle.net/marcuswhybrow/NL3km/

So in the context of your code you could have this, (note the custom data-sort-name attributes):

<table>
    <tr>
        <th class='sortable' data-sort-name="title">
            Title
            <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th> 
        <th class='sortable' data-sort-name="nature"> 
            Procurement type
            <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th>
    </tr>
</table>

jQuery:

$('th.sortable').click(function() {
    window.location = '/procurements?sort=' + $(this).attr('data-sort-name');
});