Member Avatar for TOMM3KE

Dear viewer,

I've got a database with the tables Category, Subcategory and Products.
I've been able to get this far;
Click on category -> shows the subcategories for that category
Click on subcategory -> shows all products for that subcategory

Now I've been looking around how to do it in Ajax, but I haven't come around anything useful, perhaps I just didn't look good enough but okay.
I know I'll need to use an eventhandler on click, but other than that I don't know.

Thank you sincerely for your help.

Tom

  • 2 Contributors
  • 1 Reply
  • 87 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sergb
Member Avatar for sergb

Here is a quick overview of the simplest method:
You write server-side scripts to produce HTML content. Not the whole HTML page, but just the content you want to load through AJAX. For example, you may write a script to generate a list of subcategories which are in an HTML table. These scripts should be stored like any other pages on the server. Then, using javascript, you make a request to that script passing any data necessary for the script to do its job. For example, to list the subcategories, you could pass the id of the selected category. When the response is returned, you use javascript to update your page DOM with the returned HTML. Of course, you are not limitted to returning only HTML, your script can return any text or anything your javascript can handle because to the HTTP protocol, even HTML is plain text.

I highly recommend using some javascript library that has AJAX functions built in. One such library is jQuery. It has some very usefull methods for AJAX. Example below uses jQuery.

Here is the server-side script (in PHP) called gettime.php. It simply print the current number of seconds and does not return any HTML, just a small piece of text.

<?php
// print the current time
echo time();
?>

And here is the HTML page that updates the time:

<html>
<head>
<script src="/path/to/jquery.js"></script>
<script type="text/javascript">
// This function is triggered by clicking the Update button.
function updateTime() {
    // The time is to prevent browser from caching the response.
    var url = "gettime.php?d=" + (new Date()).getTime();
    // Load the response into element with id="time".
    jQuery("#time").load(url);
}
</script>
</head>
<body>
    The "Page created at" value should not change when clicking "Update" button.<br>
    Page created at: <?php echo time(); ?><br>
    Last update at: <span id="time"></span><br>
    <input type="button" value="Update" onclick="updateTime();" />
</body>
</html>

Hope this gets you started.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.