0

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
9
Views
5 Years
Discussion Span
Last Post by bato3
0

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: ort

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.