i am a new here. this is my first post.check this website http://www.abswheels.se/

below slider there is an 3 colunms Marke(Main category) , Modell (Sub Category) and Motor(Sub Category). You can see the default selected menu below slider. When you select other main category than sub category and 2nd sub category will automatic loaded and display.

Any idea about this ? i am trying to Ajax but failed. really appreciate your quick response.

My HTML code is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="_assets/css/style.css" type="text/css" rel="stylesheet"  />
<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<title>7ctech Test Assignment</title>

<body class="bg-color">
    <div id="page-wrap">
        <div class="border-radius">
            <div class="box-heading">Assignment</div>
                <div class="footer group">
                    <div class="category">
                    $getCat = mysql_query("SELECT * FROM category");
                    while($viewCat = mysql_fetch_array($getCat)){
                    <p><a class="getdata" href="file.php?ID=<?php echo $viewCat['cat_id']; ?>"><?php echo $viewCat['title']; ?></a></p>
                    <?php } ?>
                    <div class="sub-cat">
                        <div id="result_table">

                    <div class="sub-cat1">
                    <div id="result_table1"></div>                  

JavaScript code is :

<script type="text/javascript">

            var href = $(this).attr("href");
            var self = $(this);

            $.get(href, {}, function(result)


PHP File is :


    $id = $_GET['ID'];
    $query = "SELECT * FROM subcategory WHERE cat_id=$id";
    $getd = mysql_query($query);
    while ($result = mysql_fetch_array($getd)) {
        echo '<a class="getdata" href="getdata.php?id=' . $result['subcat_id'] . '">' .$result['title'] . '</a></p>';   

First: use some solution to separate visualization form code.
Second: SQL Injection - what would be if I call: getdata.php?id=2 OR 1=1

You must block HREF native browser processing. I don't remembar how in jQuery but in standard be: return false; And think about scroll (middle) click...

Be a part of the DaniWeb community

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