将动态依赖选择框集成到 WordPress答案

【问题标题】：Integrating dynamic dependent select box into WordPress将动态依赖选择框集成到 WordPress
【发布时间】：2016-11-22 16:24:27
【问题描述】：

我想将部分搜索添加到由 WordPress 提供支持的网站中。我目前已经实现了该功能，但是我无法将其集成到 WordPress 中。我尝试了几种方法，但动态依赖选择框仍然无法正常工作。

我遵循了这个教程：Dynamic Dependent Select Box using jQuery, Ajax and PHP

以下是我在 WordPress 之外运行良好的代码。

index.php

<head>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/ajax-ps.js"></script>
</head>

<body>   
    <form class="select-boxes" action="ps-result.php" method="POST">
    <?php
        include('dbConfig.php');            
        $query = $db->query("SELECT * FROM ps_manufact WHERE status = 1 ORDER BY manufact_name ASC");
        $rowCount = $query->num_rows;
    ?>
        <select name="manufacturer" id="manufact" class="col-md-2 col-sm-2 col-xs-10" onchange="manufactText(this)">
            <option value="">Select Manufacturer</option>
            <?php
                if($rowCount > 0){
                    while($row = $query->fetch_assoc()){ 
                        echo '<option value="'.$row['manufact_id'].'">'.$row['manufact_name'].'</option>';
                    }
                }else{
                    echo '<option value="">Manufacturer Not Available</option>';
                }
            ?>
        </select>
        <input id="manufacturer_text" type="hidden" name="manufacturer_text" value=""/>
        <script type="text/javascript">
            function manufactText(ddl) {
                document.getElementById('manufacturer_text').value = ddl.options[ddl.selectedIndex].text;
            }
        </script>

        <select name="type" id="type" class="col-md-2 col-sm-2 col-xs-10" onchange="typeText(this)">
            <option value="">Select Manufacturer First</option>
        </select>
        <input id="type_text" type="hidden" name="type_text" value=""/>
        <script type="text/javascript">
            function typeText(ddl) {
                document.getElementById('type_text').value = ddl.options[ddl.selectedIndex].text;
            }
        </script>

        <select name="year" id="year" class="col-md-2 col-sm-2 col-xs-10" onchange="yearText(this)">
            <option value="">Select Type First</option>
        </select>
        <input id="year_text" type="hidden" name="year_text" value=""/>
        <script type="text/javascript">
            function yearText(ddl) {
                document.getElementById('year_text').value = ddl.options[ddl.selectedIndex].text;
            }
        </script>

        <select name="model" id="model" class="col-md-2 col-sm-2 col-xs-10" onchange="modelText(this)">
            <option value="">Select Year First</option>
        </select>
        <input id="model_text" type="hidden" name="model_text" value=""/>
        <script type="text/javascript">
            function modelText(ddl) {
                document.getElementById('model_text').value = ddl.options[ddl.selectedIndex].text;
            }
        </script>

        <input type="submit" name="search" id="search" class="col-md-2 col-sm-2 col-xs-10" value="Search">
    </form>
</body>

ajax-ps.js

$(document).ready(function(){
    $('#manufact').on('change',function(){
        var manufactID = $(this).val();
        if(manufactID){
            $.ajax({
                cache: false,
                type:'POST',
                url:'ajax-data.php',
                data:'manufact_id='+manufactID,
                success:function(type_data){
                    $('#type').html(type_data);
                    $('#year').html('<option value="">Select Type First</option>'); 
                }
            }); 
        }else{
            $('#type').html('<option value="">Select Manufact First</option>');
            $('#year').html('<option value="">Select Type First</option>'); 
        }
    });

    $('#type').on('change',function(){
        var typeID = $(this).val();
        if(typeID){
            $.ajax({
                cache: false,
                type:'POST',
                url:'ajax-data.php',
                data:'type_id='+typeID,
                success:function(year_data){
                    $('#year').html(year_data);
                    $('#model').html('<option value="">Select Year First</option>'); 
                }
            }); 
        }else{
            $('#year').html('<option value="">Select Type First</option>'); 
            $('#model').html('<option value="">Select Year First</option>'); 
        }
    });

    $('#year').on('change',function(){
        var yearID = $(this).val();
        if(yearID){
            $.ajax({
                cache: false,
                type:'POST',
                url:'ajax-data.php',
                data:'year_id='+yearID,
                success:function(model_data){
                    $('#model').html(model_data);
                }
            }); 
        }else{
            $('#model').html('<option value="">Select Year First</option>'); 
        }
    });
});

ajax-data.php

include('dbConfig.php');

if(isset($_POST["manufact_id"]) && !empty($_POST["manufact_id"])){
    $query = $db->query("SELECT * FROM ps_type WHERE manufact_id = ".$_POST['manufact_id']." AND status = 1 ORDER BY type_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo '<option value="">Select Type</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['type_id'].'">'.$row['type_name'].'</option>';
        }
    }else{
        echo '<option value="">Type Not Available</option>';
    }
}

if(isset($_POST["type_id"]) && !empty($_POST["type_id"])){
    $query = $db->query("SELECT * FROM ps_year WHERE type_id = ".$_POST['type_id']." AND status = 1 ORDER BY year_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo '<option value="">Select Year</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['year_id'].'">'.$row['year_name'].'</option>';
        }
    }else{
        echo '<option value="">Year Not Available</option>';
    }
}

if(isset($_POST["year_id"]) && !empty($_POST["year_id"])){
    $query = $db->query("SELECT * FROM ps_model WHERE year_id = ".$_POST['year_id']." AND status = 1 ORDER BY model_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo '<option value="">Select Model</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['model_id'].'">'.$row['model_name'].'</option>';
        }
    }else{
        echo '<option value="">Model Not Available</option>';
    }
}

Now the problem is, when select the first box, the second one becomes empty, nothing is returned from the database:

Capture - After select the first box

非常感谢 Christos Lytras 帮我解决了之前的问题。

我在<form class="select-boxes" action="ps-result.php" method="POST"> 行中遇到了action="ps-result.php" 的新问题。

ps-result.php

<?php
if (isset($_POST['search'])) {
    $clauses = array();
    if (isset($_POST['manufacturer_text']) && !empty($_POST['manufacturer_text'])) {
        $clauses[] = "`manufacturer` = '{$_POST['manufacturer_text']}'";
    }
    if (isset($_POST['type_text']) && !empty($_POST['type_text'])) {
        $clauses[] = "`type` = '{$_POST['type_text']}'";
    }
    if (isset($_POST['year_text']) && !empty($_POST['year_text'])) {
        $clauses[] = "`year` = '{$_POST['year_text']}'";
    }
    if (isset($_POST['model_text']) && !empty($_POST['model_text'])) {
        $clauses[] = "`model` = '{$_POST['model_text']}'";
    }
    $where = !empty( $clauses ) ? ' where '.implode(' and ',$clauses ) : '';

    $sql = "SELECT * FROM `wp_products` ". $where;
    $result = filterTable($sql);
}
else {
    $sql = "SELECT * FROM `wp_products` WHERE `manufacturer`=''";
    $result = filterTable($sql);
}

function filterTable($sql) {
    $con = mysqli_connect("localhost", "root", "root", "i2235990_wp2");
    if (!$con) {
        die('Could not connect: ' . mysqli_error($con));
    }
    $filter_Result = mysqli_query($con, $sql);
    return $filter_Result;
}
?>

<?php get_header(); ?>

<div class="container">
...
</div>

<?php get_footer(); ?>

现在当我点击Search 时，它会返回

Fatal error: Call to undefined function get_header() in /Applications/MAMP/htdocs/wordpress/wp-content/themes/myTheme/inc/ps-result.php on line 42.

【问题讨论】：

在正文或控制台中是否有任何 PHP/Javascript 错误？另外，您如何尝试将其集成到 Wordpress？
@Christos Lytras 我已编辑问题以使其清楚。
@L-Leo 您可以完成这项工作，如果您将url:'ajax-data.php', 更改为指向与您的域根相关的正确ajax-data.php url（例如：/ajax_calls/ajax-data.php）；但是，在 wordpress 中有一种“正确”的方式可以实现此类功能，此处描述为 AJAX in Plugins。您必须使用 wordpress AJAX 操作和 wordpress 数据库对象。但是如果你不想进入这个，只需在你的 ajax 调用中更改 PHP 文件的 url，它应该可以工作。
@Christos Lytras 实际上ajax-data.php 位于我主题的根目录中。我还尝试了 url http://localhost:8888/wordpress/ajax-data.php 的完整路径，但得到了同样的错误。
#L-Leo，这里不是“a”主题http://localhost:8888/wordpress/的根目录，而是整个wordpress网站的根目录。主题的根目录，类似于/wp-content/themes/twentyfifteen/。

标签： php ajax wordpress jquery-selectbox

【解决方案1】：

这样做的正确方法是创建一个 wordpress 简码，然后在任何你想要的页面或帖子中使用该简码，但如果你想创建一些东西更具体地说，你应该创建一个小的 wordpress 插件。我不会讨论这个，但是创建一个具有这种功能的简单 wordpress 插件真的没什么大不了的。我将详细介绍如何使用您已经拥有的文件和代码在 wordpress 中使用它。我假设您已经创建了示例表。我的表是这样的：

wp_citytours_dynsel_cities
wp_citytours_dynsel_states
wp_citytours_dynsel_countries

我已经导入了一些数据，并且所有这些表格都填充了适当的数据。如果您愿意，我可以提供一些 sql 文件，但我假设您的表已经为每个表填充了正确的数据。

我的测试主题根目录是：

/wp-content/themes/citytours/

我已经在我的主题根目录下创建了目录，并且我已经在其中包含了所有代码文件，所以我们有 3 个文件：

/wp-content/themes/citytours/dynsel/index-partial.php

<?php
//Include database configuration file
include('dbConfig.php');

//Get all country data
$query = $db->query("SELECT * FROM wp_citytours_dynsel_countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>
<select name="country" id="country">
    <option value="">Select Country</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
        }
    }else{
        echo '<option value="">Country not available</option>';
    }
    ?>
</select>

<select name="state" id="state">
    <option value="">Select country first</option>
</select>

<select name="city" id="city">
    <option value="">Select state first</option>
</select>

<script type="text/javascript">
jQuery(function($) {
    $('#country').on('change',function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'<?php echo home_url('wp-content/themes/citytours/dynsel/ajaxData.php') ?>',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                    $('#city').html('<option value="">Select state first</option>'); 
                }
            }); 
        }else{
            $('#state').html('<option value="">Select country first</option>');
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });

    $('#state').on('change',function(){
        var stateID = $(this).val();
        if(stateID){
            $.ajax({
                type:'POST',
                url:'<?php echo home_url('wp-content/themes/citytours/dynsel/ajaxData.php') ?>',
                data:'state_id='+stateID,
                success:function(html){
                    $('#city').html(html);
                }
            }); 
        }else{
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });
});
</script>

/wp-content/themes/citytours/dynsel/dbConfig.php

<?php
//db details
$dbHost = 'localhost';
$dbUsername = 'xxxx';
$dbPassword = 'xxxx';
$dbName = 'xxxx';

//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

/wp-content/themes/citytours/dynsel/ajaxData.php

<?php
//Include database configuration file
include('dbConfig.php');

if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
    //Get all state data
    $query = $db->query("SELECT * FROM wp_citytours_dynsel_states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //Display states list
    if($rowCount > 0){
        echo '<option value="">Select state</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
        }
    }else{
        echo '<option value="">State not available</option>';
    }
}

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
    //Get all city data
    $query = $db->query("SELECT * FROM wp_citytours_dynsel_cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //Display cities list
    if($rowCount > 0){
        echo '<option value="">Select city</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
        }
    }else{
        echo '<option value="">City not available</option>';
    }
}
?>

如您所见，index-partial.php 现在只包含所需的代码，不包含<body>、<head> 和脚本文件。 Wordpress 已经在大多数主题的应用程序中包含 jQuery，但您应该始终检查它。现在，您可以在任何地方添加功能，即使是在主题 index.php 文件中，但请务必小心。我使用了主题的单个帖子模板文件，即single-post.php。我已将示例代码包含在 div 内的主要帖子正文下。我只是像这样包含index-partial.php：

<div class="<?php echo esc_attr( $content_class ); ?>">
    <div class="box_style_1">
    ...
    </div><!-- end box_style_1 -->

    <div class="box_style_1">
        <?php include(__DIR__.'/dynsel/index-partial.php'); ?>
    </div>
</div><!-- End col-md-9-->

我还使用了 wordpress home_url 函数，为 ajaxData.php 文件创建一个正确的 url，如下所示：

url:'<?php echo home_url('wp-content/themes/citytours/dynsel/ajaxData.php') ?>'

现在，如果您已按照所有这些步骤操作，那么您的代码示例应该可以在每个帖子下运行。您现在可以使用该行代码 <?php include(__DIR__.'/dynsel/index-partial.php'); ?> 将其包含在任何您想要的位置。

如果这对你有用，请告诉我。

【讨论】：

非常感谢您的帮助！但它仍然在捕获中显示相同的问题。我还尝试将javascript放在一个独立的js文件中，控制台返回错误Uncaught SyntaxError: Unexpected identifier和url:'<?php echo home_url('wp-content/themes/citytours/dynsel/ajaxData.php') ?>'
您能否更新为查看错误而打开的 chrome/firefox 控制台的屏幕截图？
我刚刚解决了这个问题，错误是我包含dbConfig.php 的方式。依赖选择框现在正在工作。我对action="ps-result.php" 有一个新问题。我会尽快更新问题。
那是因为 get_header() 是 wordpress API 的一部分，您不包含在 ps-result.php 中。你真的需要get_header() 函数的输出吗？
我刚刚发现我又犯了一个愚蠢的错误。我不应该直接调用 php 文件。我应该使用链接作为http://localhost:8888/wordpress/part-search-result/。一个简单的问题：有没有其他方法可以写链接，这样上传到服务器后就不用改了？