php - Joomla 自定义 PHP、jQuery 模块

标签 php jquery html mysql joomla

我有一个使用 PHP、jQuery 和 mysql 的级联菜单。它的工作方式就像一个魅力,但如果我尝试将它作为一篇文章导入 Joomla(使用 Joomla 扩展来激活文章中的 PHP 代码),它将无法正常工作。问题是,我什至不知道在哪里找到问题的根源...我可以选择类别,但每当我这样做时,级联下拉菜单的第二级(类别 -> 类型 -> 模型)是order)不会加载,实际上它说“请稍候...”,几秒钟后选择选项将变为空白。我在本地主机上测试了它,只有级联菜单不在 Joomla 框架中,并且它有效...

我有一些文件:

script.php -> 处理 jQuery 效果以及下拉菜单:

<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 -> 用户选择类别后,这应该在第二个菜单中显示该类别中的类型。

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

select_model.php -> 与选择类型相同,但它位于类型选择下方,因此这是级联菜单的最后一级。

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

最后是 class.php,它连接到数据库,我从中获取数据并将它们加载到选择菜单中。

<?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();
?>

最佳答案

需要注意的几点:

  1. 不要使用mysql_connect,这种连接数据库的方法已被弃用,而且也不安全。
  2. 无需手动连接到数据库。您可以使用 JFactory::getDBO(); 方法。有关更多信息,请参阅 here
  3. 我不确定您如何将此自定义代码添加到您的文章中,但我希望您意识到您应该使用插件,例如 Sourcerer
  4. 我认为创建一个自定义模块可能会更好,而不是将所有这些代码添加到您的文章中。我的意思实际上是开发一个并使用您的代码。不会花太长时间。然后您可以将该模块嵌入到您的文章中。
  5. 不要使用标签导入 jQuery,请参阅我关于使用 Joomla 编码标准导入 jQuery 的最佳方法的答案 here
  6. 如果您还没有查看 Joomla Extensions Directory ,我建议您这样做,因为有很多菜单模块您可以根据自己的喜好安装和编辑。

希望这有帮助

关于php - Joomla 自定义 PHP、jQuery 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18250537/

相关文章:

php - 将网站从一个域克隆到另一个域

php - 我如何按照 'in' sql 语句中使用的顺序对结果集进行排序

javascript - JQuery mobile 未将用户输入检查项目的样式设置为与列表的其余部分相同

php - Laravel如何通过积分获取当前用户位置

php - Javascript 无法解释返回的 xml

javascript - 使用 Jquery 递增选项卡

jquery - 可滚动以显示下方的 DIV 的 DIV

jquery - 在 Fancybox 弹出窗口打开时添加按钮单击事件

python - 在 Django 1.7 中使用 html 发送电子邮件

javascript onbeforeunload 禁用链接