I want to maintain JQuery Sort state, when I go to a new page

Basically I have the following things:

1. A table that is sorted using JQuery and refreshed with Ajax
2. A hidden object that stores the Sort State (Name of column) + (ASC or DESC)
3. A JQuery method that ends in an endless loop of Ajax calls

I want:

1. To be able to use will_paginate, navig开发者_高级运维ate to a new page AND maintain the users selected sort.
2. I'm almost there. I just need your help; I'm new with JQuery/Ajax

Here is my code. The first method, works great. The second leads me into an endless loop. Thanks in advance for your help!

$('.overview_table_header').click(function() {
    header = $(this)
    var col2 = $.trim($(this).text())
    var sort2 = header.data('sort')
    $.get("/sort", {
        col: $.trim($(this).text()),
        sort: header.data('sort')
    }, function(data) {
        $('#pages').html(data.html);
        header.data('sort', data.sort);
    });
    $(".secretdata").data("test", {
        first: sort2,
        last: col2
    });
    $(".secretdata h2:first").text($(".secretdata").data("test").first);
    $(".secretdata h2:last").text($(".secretdata").data("test").last);
});


$('.overview_table_header').ready(function() {
    header = $('.overview_table_header')
    var col = $(".secretdata h2:first")
    var sort = $(".secretdata h2:last")

    $.get("/sort", {
        col: col,
        sort: sort
    }, function(data) {
        $('#pages').html(data.html);
        header.data('sort', data.sort);
    });
});

The second function should be executed only once, when the page loads, right?

So instead of $('.overview_table_header').ready(function() { just use $(function() {, which is short for document.ready/document.onLoad.

The loop probably is happening because the ajax callback changed something in '.overview_table_header', triggering the .ready() again.

I would rewrite the code as follows:

$('.overview_table_header').click(function() {
  sort($(this))
});

$(function() { // when page is loaded
  sort()
});

sort(param) {
  var col, dir;
  dir= $("#sortDirection").val(); 
  if (!param) { // first run
      col = $("#sortColumn").val();
  } else { 
      col = $.trim(param.text()); // This is dangerous! (1)
      $("#sortColumn").val(col);
  }
  $.get("/sort", { col: col, sort: dir},
    function(data) {
      $('#pages').html(data.html);
      $("#sortDirection").val(data.sort);
    }
  );
});

The secretdata would become this:

<input type="hidden" id="sortColumn" name="sortColumn" value="date" />
<input type="hidden" id="sortDirection" name="sortColumn" value="asc" />

Some notes:

• Dont use names like secretdata/first/last to store your variables, someone dealing with this code in the future will get very confused (even you, after some months).
• You better store this stuff in hidden inputs, they even propagate automatically if you submit the form
• (1) Getting the column name from $.trim(param.text()); is dangerous, you better pass the normalized column name for instance in a data-columnName attribute and retrieve it with .data("columnName")
• I don't see why you store the direction two times (secredata and header:data-sort), so i changed to only one storage place.