Question

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

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

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

main

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

现在的问题是，当选择第一个框时，第二个框变空，没有从数据库返回任何内容：

Capture - After select the first box

真的让克里斯托斯·利拉斯（Christos Lytras）帮助我解决以前的问题。

我在行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>'; } }中遇到action="ps-result.php"新问题。

<form class="select-boxes" action="ps-result.php" method="POST">

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。

Answer 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:'<?php echo home_url('wp-content/themes/citytours/dynsel/ajaxData.php') ?>'

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

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

将动态相关选择框集成到WordPress中

1 个答案: