Create javascript array of ColdFusion query for use with ajax function

Question

I'm building a page that displays my clients projects. In the database, each project record has a boolean flag indicating which category and class the projects belong to.

The projects categories; planning, landscape, environmental. And the classes; industrial, government, education, residential.

When the user wants to see "planning" projects for an "industrial" application, I query the database accordingly using URL parameters when the page loads:

SELECT project_id, name, location, description, planning, landscape
      , environment, industrial, government, education, residential 
FROM   projects 
WHERE  planning = 1 and 
       industrial = 1 

.. and display the first project in the result set on the page.

Here's where I need some help

Above the project display there are links to the other classes. Additionally, if other projects in the selected category/class exists there is a link that says "One of three - see the next project" if the query returns more projects in the planning category that are in the industrial class. I want to use an ajax function to load another project into the page when a user clicks any of the aforementioned links via .load() or .ajax(). How can I store the project ID's returned from the query by class so that I can access it later with the ajax call via the links on the page?

I'm familiar with the javascript/jQuery ajax part of the work - no problem there. I'm just not certain how to store the information on the page to access it.

Answer 1

It's hard telling exactly what data you need to pass without more code from you. I would suggesting outputting your links and using microdata like this:

<a data-project="#project_id#">#name#</a>

To access this, you just do this:

$("a").click(function(e) {
    e.preventDefault();
    var project_id = $(this).data("project");
    // You could load in your new data here
});