Change post query onclick

Question

I'm trying to build kind of a filtering system for the events displayed on my website. I've made a custom post type 'Event', with a 'City' field. On my 'calendar' template page, I'm gathering all the events like this :

$querystr = "
    SELECT *
    FROM $wpdb->posts wposts, $wpdb->postmeta metastart
    WHERE wposts.ID = metastart.post_id
    AND metastart.meta_key = '_cp_date'
    AND wposts.post_type = 'Event'
    AND wposts.post_status = 'publish'
    AND metastart.meta_value >= DATE_FORMAT(CURRENT_DATE(), '%m/%d/%Y')
    ORDER BY metastart.meta_value ASC
    ";
$events = $wpdb->get_results($querystr, OBJECT);

And then, the loop displaying them.

What I would like to do, is to have buttons that would, on click, run another SQL query with a match on the city, and then replace the content with the result of that new query. I'm wondering what would be the "best" way to achieve this. Wouldn't ajax be my solution ?

Answer 1

Yes, if you need to run WordPress/PHP functions from a button click (Javascript), you need Ajax.

In the following example, a shortcode will render a button (id="newquote") that calls an Ajax action hook (get_random_cpt). A query is done and replaces one div from that shortcode (id="randomquotes") with the results.

How to Use Ajax in a WordPress Shortcode?

Answer 2

AJAX definitely will be the right choice for you.

This article from WPTuts+ is about AJAX pagination, but also explains a lot about WordPress and AJAX.

Ajax (Asynchronous JavaScript and XML) is a web technology that allows a web page to dynamically update content without reloading the page within the browser. The website becomes more interactive and responsive with the use of this technology. Ajax is supported by almost all the visual web browsers… so today, we’ll show you how to setup some custom WordPress Pagination magic using AJAX.

Good luck!