jQuery: Making this simpler than refreshing

Question

Right now you can sort out the list, by clicking on links that is ?sortMode=activity , ?sortMode=comments .

I was thinking, cant I sort the list, without the site refreshing? (You know when you click on a link ?sortMode=comments, example, then you get refreshed).

The sortMode is only affecting $query, that selects WHERE type = activity and so.

How can i make this smarter, to use, so it changes the $query line somehow while nothing is refreshing. Maybe this is not possible, just a thought..Another way maybe to do this?

Answer 1

Your question is not very clear, especially without code, but could you maybe store the query in a cookie until you want to run it, as cookies can be set/red on the server and client sides?

Answer 2

You could make all the links, instead of linking to the page, call an AJAX request to your page, and redraw the list.

Example (with suggested edits):

<a href="#" id="sort_activity">Sort by Activity</a>

$('#sort_activity').click(function(e){
    e.preventDefault();
    $('#your_list').load('/url/to/table #list', 'sortMode=activity');
});

jQuery .load()

If you need more help, add the details to the question, or comment on this answer.

Answer 3

If I understand your question... you are trying to execute a query without the page refreshing and have it populate a list.

I would suggest looking into AJAX. Its a method of executing server-side scripts via javascript w/o the page refreshing.

If you're using jQuery take a good look at the built-in AJAX api.

Ajax is nicely pared with a markup language such as XML or JSON.

Here is an (untested) example ajax call using jquery and php:

ajax call

$.ajax({
   url: 'script.php',
   type: 'POST',
   timeout: 5000,
   data: "message=ajax",
   error: function()
   {
      alert("Request Failed");
   },
   success: function(response)
   {  
       //Dynamically populate select list here.


      //example alerts <b>Message:</b> ajax
      alert(response);
   }
});

script.php

<?php
if($_POST['message']){
   echo "<b>Message:</b>" . $_POST['message'];
}
?>

Using an ajax call like this you will be able to execute a query in say, script.php, and return the results. I would suggest using JSON to organize the query results, it makes parsing the response object a lot easier.

Answer 4

The Jquery Tablesorter plugin would be appropriate if you don't need the sorting to persist across user sessions and its just reordering the same content (although you can use localStorage to save list orders).

http://tablesorter.com/docs/

Answer 5

Perhaps jQuery Ajaxy is what your after...

Answer 6

I would recommend a very neat jQuery plugin called Tablesorter 2.0. I used it in 2-3 projects of mine. It's very flexible in every sense, and if you're really into AJAX, then check out their Appending Table Data with AJAX example.

Using the plugin itself is as simple as including its javascript sources, and applying the following code to your table (assuming it's id is myTable:

$(document).ready(function() { 
    $("#myTable").tablesorter(); 
}); 

Tablesorter also supports so-called Widgets, which let you extend the default functionality even more, plus an out-of-the box additional plugin called Pager which lets you boost your tables with pagination in a few easy steps!

Hope this suits your project ;)

Cheers!