Joomla custom PHP, jQuery module

Question

I have a cascade menu using PHP, jQuery and mysql. It works like a charm, but if I try to import it in Joomla as an article (with a Joomla extension wich activates PHP code in articles) it won't work correctly. The problem is, I don't even know where to find the source of the problem... I can select the category, but whenever I do, the second level of the cascade dropdown menu (category -> type -> model is the order) won't load, actually it says 'Please wait...', and after a few seconds the select option will be blank. I tested it on localhost, only the cascade menu not in Joomla framework and it worked...

I've got some files:

script.php -> handles the jQuery effects, also the dropdowns:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select#type").attr("disabled","disabled");
        $("select#model").attr("disabled","disabled");
        $("select#category").change(function(){
        $("select#type").attr("disabled","disabled");
        $("select#type").html("<option>Please wait...</option>");
        var id = $("select#category option:selected").attr('value');
        $.post("select_type.php", {id:id}, function(data){
            $("select#type").removeAttr("disabled");
            $("select#type").html(data);
        });
    });
    $("select#type").change(function(){
        $("select#model").attr("disabled","disabled");
        $("select#model").html("<option>Please wait...</option>");
        var id2 = $("select#type option:selected").attr('value');
        $.post("select_model.php", {id2:id2}, function(data){
            $("select#model").removeAttr("disabled");
            $("select#model").html(data);
        });
    });
    $("select#model").change(function(){
        var cat = $("select#category option:selected").attr('value');
        var type = $("select#type option:selected").attr('value');
        var model = $("select#model option:selected").attr('value');
        if(cat>0 && type>0 && model >0)
        {
            var model = $("select#model option:selected").html();
            var type = $("select#type option:selected").html();
            $("#result").html('<br>Your choice: ' + type + ' ' + model + '.');
        }
        else
        {
            $("#result").html("<br>One of the inputs is empty!");
        }
        return false;
    });
});
</script>

<form id="select_form">
Choose category: <select id="category">
<?php echo $opt->ShowCategory(); ?>
</select><br />
Choose type: <select id="type">
<option value="0">Please select...</option>
</select>
<br />
Choose model: <select id="model">
<option value="0">Please select...</option>
</select></form>
<div id="result"></div>
<br><br>

select_type.php -> after user selects category, this should show the types in that category in the second menu.

<?php
include "class.php";
echo $opt->ShowType();
?>

select_model.php -> same as select type, but it's under the type selection, so this is the last level of the cascade menu.

<?php
include "class.php";
echo $opt->ShowModel();
?>

And finally, the class.php, which connects to the database where I fetch the datas from to load them in the select menus.

<?php
class SelectList
{
protected $conn;

    public function __construct()
    {
        $this->DbConnect();
    }

    protected function DbConnect()
    {
        $host = "localhost";
        $user = "root";
        $password = "usbw";
        $db = "test";
        $this->conn = mysql_connect($host,$user,$password) OR die("error!");
        mysql_select_db($db,$this->conn) OR die("error!");
        return TRUE;
    }

    public function ShowCategory()
    {
        $sql = "SELECT * FROM categories";
        $res = mysql_query($sql,$this->conn);
        $category = '<option value="0">Please select a category...</option>';
        while($row = mysql_fetch_array($res))
        {
            $category .= '<option value="' . $row['id_cat'] . '">' . $row['name'] . '</option>';
        }
        return $category;
    }

    public function ShowType()
    {
        $sql = mysql_query( "SELECT * FROM type WHERE id_cat=$_POST[id]");
        $res = mysql_query($sql,$this->conn);
        $type = '<option value="0">Please select a type...</option>';
        while($row = mysql_fetch_array($sql))
        {
            $type .= '<option value="' . $row['id_type'] . '">' . $row['name'] . '</option>';
        }
        return $type;
    }

    public function ShowModel()
    {
        $sql = "SELECT * FROM model WHERE id_model=$_POST[id2]";
        $res = mysql_query($sql,$this->conn);
        $model = '<option value="0">Please select a model...</option>';
        while($row = mysql_fetch_array($res))
        {
            $model .= '<option value="' . $row['id_model'] . '">' . $row['name'] . '</option>';
        }
        return $model;
    }
}

$opt = new SelectList();
?>

Answer 1

A few points to go through:

1. don't use mysql_connect is this method of connecting to a database is deprecated, nor is it secure.
2. There is no need to manually connect to a database. You can use the JFactory::getDBO(); method. More information on that can be found here
3. I'm not sure how you're adding this custom code to your article, but I hope you realise that you should be usign a plugin such as Sourcerer
4. Rather than adding all this code into your article, I think it might be better off making a creating a custom module. By that I actually mean developing one and using you're code. It won't take too long. then you can embed the module into you article.
5. Rather than importing jQuery using the tags, please refer to my answer on the best method of importing it using Joomla coding standards here
6. If you haven't already looked at the Joomla Extensions Directory , I suggest you do so, as there are lots of menu modules that your could install and edit to your own liking.

Hope this helps