将动态依赖 select 框集成到 WordPress

Question

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

我遵循了这个教程：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>';
    }
}

现在的问题是，当select第一个盒子，第二个盒子变空，数据库什么也没有返回：

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 时，它 returns

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

Answer 1

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

wp_citytours_dynsel_cities
wp_citytours_dynsel_states
wp_citytours_dynsel_countries

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

填充了正确的数据

我的测试主题根目录是：

/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 文件中，但始终要小心。我使用了主题的单个 post 模板文件，即 single-post.php。我已经将示例代码包含在 div 内的主要 post 正文中。我只是像这样包含 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') ?>'

现在，如果您已完成所有这些步骤，那么您的代码示例应该可以在每个 post 下运行。您现在可以使用该行代码 <?php include(__DIR__.'/dynsel/index-partial.php'); ?>.

将其包含在任何您想要的位置

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

将动态依赖 select 框集成到 WordPress

Integrating dynamic dependent select box into WordPress

php

ajax

wordpress

jquery-selectbox