將動態依賴選擇框集成到WordPress

我想將部分搜索添加到由WordPress驅動的網站。我目前已經實現了這個功能，但是我很難將它集成到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>'; 
    } 
}

現在是，選擇第一個框時，第二個變空，沒有什麼是從返回的問題數據庫：

Capture - After select the first box

真的很巧克力Christos Lytras幫助我解決了以前的問題。

我有一個新的問題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，它返回

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

來源

2016-11-22 L. Leo

你的身體或控制檯有任何PHP/Javascript錯誤嗎？此外，你如何嘗試將其整合到Wordpress？ –

@Christos Lytras我已經編輯了這個問題來說清楚。 –

@ L-Leo如果你改變'url：'ajax-data.php'，'指向與你的域根有關的正確的'ajax-data.php'url（例如''/ ajax_calls/Ajax的data.php'）;然而，在wordpress中有這樣一個「適當的」方法來實現這種功能，這裏描述了[插件中的AJAX]（https://codex.wordpress.org/AJAX_in_Plugins）。你必須使用WordPress的AJAX行動和WordPress的數據庫對象。但是，如果你不想進入這個，簡單地改變你的ajax調用PHP文件的URL，它應該工作。 –

正確的方式做到這一點，是創建一個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'); ?>將它包含在任何地方。

請讓我知道這是否爲你工作。

來源

2016-11-23 16:44:05

真的很感謝你的幫助！但它在捕獲中仍然存在相同的問題。我也嘗試把JavaScript放在一個獨立的js文件中，控制檯返回'Uncaught SyntaxError：意外的標識符'與'url：'<？php echo home_url（'wp-content/themes/citytours/dynsel/ajaxData。 '''''' –

你可以更新你的chrome/firefox控制檯的截圖，只是爲了查看錯誤？ –

我剛解決了這個問題，錯誤是我包含'dbConfig.php'的方式。相關選擇框現在正在工作。我有一個新的問題'action =「ps-result.php」'。我很快會更新這個問題。 –

將動態依賴選擇框集成到WordPress

回答

相關問題