0

i'm not sure if this is possible, I've looked into it but can't seem to find anything.

I'm just going to give a quick example of my scenario. Basically I have two main tables Classes and Cars. For example, Executive class will have S-Class, BMW 7 Series and so on, compact will have mini cooper etc.

Now, on a website what I'm trying to do is through javascript/ajax/jquery (not quite sure what method) is to display the Class and allow the user to be able to click on it then beneath display the vehicles

Now, I have an sql database and that is always changing, cars can be edited or changed etc so when I click a class, obviously updated information needs to be displayed.

However, after doing some research I can't seem to find a way which does not involve hard coding information into the page?

Any help please?

1 Answer 1

0

You need to create two dynamic pages - one to retrieve categories (classes) and one to retrieve cars within a chosen category.

You haven't mentioned which server-side language you're using so I'll assume PHP for the moment, but it'll work the same for any language you choose.

Part 1 - categories.php

  • query the database and retrieve a list of all categories (name, id)
  • output these in a SELECT list (or similar)
  • include a DIV other container to fill in any retrieved cars for that category

The output would be something like this:

<select id="categories">
  <option value="-1">Select a category</option>
  <option value="1">Executive</option>
  <option value="2">Compact</option>
</select>

<div id="cars"><!-- cars go here --></div>

I have used the attribute "value" to store the database ID of the category, for later retrieval via JQuery.

Part 2 - cars.php

  • takes a URL parameter "category" to determine which category to use to query for cars
    (e.g. cars.php?category=1)
  • query database with selected category ID and retrieve matching cars
  • output results in HTML list (or similar)

Part 3 - JavaScript

Once you have the above stuff going then you can simply pick up the ID from the category list and send out a request for the cars when the option changes. On your category.php page you would include the JQuery library first, then this script:

JQuery(document).ready(function($){
    // capture change event on select list
    $("categories").on('change', function(){
        // get current value
        var value = $(this).val();

        // retrieve cars using AJAX, passing category value
        $.get("cars.php", {category:value}, function(data){
            // html list for cars retrieved here as data - fill in the cars html
            $("#cars").html(data);
        });
    });
});

There are of course many ways to skin the cat, but this is probably the simplest for starters. If you're concerned with getting the most up to date information for every request, then you need to go back to the server each time the category changes. If database changes are likely to be less frequent, and the data set isn't huge then you may consider retrieving it all in one lump of JSON and using that as a local "database" to do lookups against.

1
  • Just trying this now. Will let you know how it goes, Thanks. Jan 19, 2014 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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