Member Avatar for tiekwebstar

Hy,

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">
<head>
<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>
</head>

<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">
                    <?php
                    require("_assets/config/dbc.php");
                    $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>
                    <div class="sub-cat">
                        <div id="result_table">

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

JavaScript code is :

<script type="text/javascript">

$(".getdata").click(function(e)
        {
            e.preventDefault();
            var href = $(this).attr("href");
            var self = $(this);

            $.get(href, {}, function(result)
                {
                     $("#result_table").html(result);                   
                });
        }); 

</script>

PHP File is :

<?php
    require("_assets/config/dbc.php");

    $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>';   
    }
?>
  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by bato3
Member Avatar for bato3

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...

Edited by bato3 because: ort
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.