Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've been reading and watching a lot of tutorials about javascript, jquery and AJAX but I can't seem to understand how to make a 'filter' like these guys from unlim500 have.

Their script allows you to just click on a brand and then the table gets filtered and refreshed (without reloading the page).

Live example on this page, click on Все марки: http://www.unlim500.ru/results/

enter image description here

Can anyone lead me into the right direction?

How can I make such a filter?

index.php =

<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>

<script>
$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target); 
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"brand": vehicle_database_id};
    $.getJSON("query2.php", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}
</script>

query2.php =

<?php
$host = "xx";
$user = "xx";
$db   = "xx";
$pass = "xx";

$pdo = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);

$rows = array();
if(isset($_GET['brand'])) {
    $stmt = $pdo->prepare("SELECT brand FROM cars WHERE brand = ? ");
    $stmt->execute(array($_GET['brand']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
share|improve this question

2 Answers

up vote 1 down vote

The actual page you linked uses an anchor to create a link to some javascript. The way I have done this in the past (and imo a simpler way) is to make a link without href pointing to the same page (to avoid reload), and attach a click event to the link which will trigger your ajax call.

eg - HTML - the link to click

<a id="bugatti_link" href="#" database_id="2">Bugatti</a>

then in jquery

$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target);
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"id": vehicle_database_id};
    $.getJSON("the/url/to/the/database/view", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}

On the server you'll receive a GET request to the/url/to/the/database/view which will have a parameter called "id" with the value of "2" so you can fetch vehicle at row 2 and return whatever data you wanted from that vehicle.

Hopefully that gives some insight into how to turn a regular link into an ajax loader, which can be used to update the page without reloading it.

Some useful links about this sort of thing:

share|improve this answer
Thanks for your answer, I've been working with your code for the last couple of hours but I can't seem to get it to work yet. I've updated my original post with my current code, there has to be something I'm doing wrong. – user1478145 Jul 8 '12 at 22:55
in the success_handler function replace the comments with alert(data) and then when you click the link you should see the data from the server. Sorry I'm not too familiar with php so cannot accurately comment on your server code in query2.php. You may also try changing the $.getJSON to $.ajax (with appropriate arguments, they will be a different format) just to check that it's not the json part of things tripping you up. – thedawnrider Jul 8 '12 at 23:52
Still can't get it to work. What was the /database/view you were taking about? – user1478145 Jul 9 '12 at 9:19
'database view' is the php on your server which returns a 'view' of your data, in this case probably a json string which the browser can then use. You need find out whether the problem is on the server or in the browser code. If it's in the browser code, is it before the ajax call, or after? When that is known, it's easier to know what to suggest to fix it. – thedawnrider Jul 9 '12 at 21:10
up vote 0 down vote

You can use a jquery plugin for the sorting functionality. One of which is the tablesorter plugin

All you have to do is to download jquery and tablesorter.js then include them in your page. The code below assumes that you have jquery and tablesorter on the same folder where you have the file that you're running:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="tablesorter.js"></script>

Add an id to your table:

<table id="myTable">

Then use the tablesorter on document load:

<script>
$(function(){
 $("#myTable").tablesorter(); 
});
</script>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.