更改选项基于使用

Question

我有两个选项卡按钮 - 第一个是租赁，第二个选项卡是购买。 如果用户单击“租赁”选项卡，则会出现搜索栏。两者可使用相同的字段，但如果单击租赁选项卡，则租赁选项卡搜索栏处于活动状态，如果单击购买，则显示购买选项卡。

页面加载后的默认状态是“购买”选项卡处于活动状态，并且搜索栏，如果我单击“租赁购买”选项卡，则所有数据字段都会根据我的代码获取，但如果我单击“租赁”选项卡，则不会获取数据.

下面是点击“购买”选项卡搜索栏数据获取的屏幕截图

和第二个购买选项卡选项卡数据获取图像

然后查看租金选项卡选择

第二个租金标签数据未获取

这是两个选项卡的 html 代码

<!-- Home Design -->
  <section class="home-one home1-overlay bg-home1">
    <div class="container">
      <div class="row posr">
        <div class="col-lg-12">
          <div class="home_content home1 custom_width">
            <div class="home-text text-center">
              <p class="fz18 color-white">It's great to be Property!</p>
              <h2 class="fz50">Find Your Perfect Property</h2>
            </div>
            <div class="home_tabs">
              <ul class="nav justify-content-center nav-tabs" id="myTab2" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="buy-tab" data-toggle="tab" href="#buy" role="tab" aria-controls="buy" aria-selected="true">Buy</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="rent-tab" data-toggle="tab" href="#rent" role="tab" aria-controls="rent" aria-selected="false">Rent</a>
                </li>
              </ul>
              <!-- test -->
              
              <!-- test -->
              <div class="tab-content" id="myTabContent2">
                <div class="tab-pane fade show active" id="buy" role="tabpanel" aria-labelledby="buy-tab">
                  <div class="home_adv_srch_opt">
                    <div class="wrapper">
                      <div class="home_adv_srch_form">
                        <form method="POST" action="a_t_listing.php" class="bgc-white p20" id="searchform" name="searchform">
                          <div class="form-row align-items-center">
                            <div class="col-auto home_form_input mb15-md">
                              <div class="form-group style2 mb-2 pl10 pl0-lg">
                                <label>TYPE</label>
                                <div class="select-wrap style2-dropdown">
                                  <select class="selectpicker show-tick" name="property_type" id="property_type" >
                                    <option value="Residential">Residential</option>
                                    <option value="Commercial">Commercial</option>
                                 
                                  </select>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_input mb15-md">
                              <div class="form-group style2 mb-2 pl10 pl0-lg">
                                <label>LOCATION</label>
                                <div class="select-wrap style2-dropdown">
                                  <select class="selectpicker" name="Locality" id="Locality" data-live-search="true">
                                  <!-- <option value="">All Cities / Areas</option> -->
                                  <!-- Data Load By Ajax Best Code Attache footer file -->
                                  </select>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_input mb15-md" style="">
                              <div class="form-group style1 mb-2 ml0-767">
                                <label id="search-lable">SEARCH</label>
                                <div class="select-wrap style1-dropdown">
                                  <!-- <select name="searchQuery" class="form-control js-searchBox" id="searchQuery">
                                    <option value="">Endorse Property</option>
                                    <option value="TheBliss">The Bliss</option>
                                    <option value="CasaVyoma">Casa Vyoma</option>
                                    <option value="WorldTradeTower">World Trade Tower</option>
                                    <option value="Hotels">View All Results</option>
                                  </select> -->
                                  <input class="form-control" type="text" name="searchQuery" id="searchQuery" placeholder="Enter Locality / Project / Society / Landmark" autocomplete="off">
                                  <div id="suggestionContainer"></div>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_adv_srch_form_btn mb20-md">
                              <div class="adv_srch_btn dropbtn ml0-767" data-toggle="modal" data-target="#staticBackdrop" id="advance_search_mo">
                                <i class="flaticon-setting-lines mr10 mt10 mt0-md flr-520"></i>
                                <span id="advance-search">Advanced Search</span>
                              </div>
                            </div>
                            <div class="col-auto home_form_input2" id="home_form_input2">
                               <input type="hidden" name="tab" id="selectedTab" value="buy">
                              <button type="submit" class="btn search-btn ml0-767" id="search-btn"><span class="fa fa-search"></span> Search</button>
                            </div>
                          </div>
    
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
                  <div class="home_adv_srch_opt">
                    <div class="wrapper">
                      <div class="home_adv_srch_form">
                        <form method="POST" action="a_t_listing.php" class="bgc-white p20" id="rent-form" name="searchform" >
                          <div class="form-row align-items-center">
                            <div class="col-auto home_form_input mb15-md">
                              <div class="form-group style2 mb-2 pl10 pl0-lg">
                                <label>TYPE</label>
                                <div class="select-wrap style2-dropdown">
                                  <select class="selectpicker show-tick" name="property_type" id="property_type" >
                                    <option value="Residentail">Residentail</option>
                                    <option value="Commercial">Commercial</option>
                                      
                                  </select>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_input mb15-md">
                              <div class="form-group style2 mb-2 pl10 pl0-lg">
                                <label>LOCATION</label>
                                <div class="select-wrap style2-dropdown">
                                  <select class="selectpicker" name="Locality" id="Locality" data-live-search="true">
                                  <option value="">All Cities / Areas</option>
                                  <!-- Data Load By Ajax Best Code Attache footer file -->
                                  </select>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_input mb15-md">
                              <div class="form-group style1 mb-2 ml0-767">
                                <label>SEARCH</label>
                                <div class="select-wrap style2-dropdown">
                                  <!-- <select name="lang" class="form-control js-searchBox">
                                    <option value="">Endorse Property</option>
                                    <option value="sankalpgrace2">Sankalp Grace 2</option>
                                    <option value="StratumVenus">Stratum Venus</option>
                                    <option value="Indraparasth6">Indraparasth 6</option>
                                    <option value="Hotels">View All Results</option>
                                  </select> -->
                                  <input class="form-control" type="text" name="searchQuery" id="searchQuery" placeholder="Enter Locality / Project / Society / Landmark" autocomplete="off">
                                  <div id="suggestionContainer"></div>
                                </div>
                              </div>
                            </div>
                            <div class="col-auto home_form_adv_srch_form_btn mb20-md">
                              <div class="adv_srch_btn dropbtn ml0-767" data-toggle="modal" data-target="#staticBackdrop">
                                <i class="flaticon-setting-lines mr10 mt10 mt0-md flr-520"></i>
                                <span id="advance-search">Advanced Search</span>
                              </div>
                            </div>
                            <div class="col-auto home_form_input2">
                              <!-- Add a hidden input field to store the selected tab -->
                               <input type="hidden" name="tab" id="selectedTab" value="rent">
                              <button type="submit" class="btn search-btn ml0-767"><span class="fa fa-search"></span> Search</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  

这是我两个选项卡的 javacsript 代码

<script>
$(document).ready(function() {
    // Load default value on page load
    updateDropdowns();

    $('#property_type').on('change', function() {
        updateDropdowns();
    });

    $('#myTab2 a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        updateDropdowns();
    });

    function updateDropdowns() {
        var propertyType = $('#property_type').val();
        var selectedTab = $('.tab-content .tab-pane.active').attr("id");

        // Determine the URL for AJAX request based on selected tab
        var ajaxUrl = './conn/are_fetch_data.php';
        var ajaxData = { propertyType: propertyType, tab: selectedTab };

        if (selectedTab === 'rent') {
            // Additional logic if needed for the "rent" tab
            // ajaxUrl = ...
            // ajaxData = ...
        }

        // Send AJAX request to fetch location options
        $.ajax({
            type: 'POST',
            url: ajaxUrl,
            data: ajaxData,
            success: function(data) {
                $('#Locality').html(data);
                $('#Locality').selectpicker('refresh'); // Reinitialize the second dropdown
            },
            error: function() {
                console.log('Error fetching location options');
            }
        });
    }
});

</script>

我担心的是，如果在“购买”选项卡中打开，代码可以完美运行，但为什么它在“租赁”选项卡中不起作用？为什么数据取不出来？开发者工具中没有任何反应。

这是我的 are.fetch_data.php 文件的代码，一切正常工作，如果选择“购买”选项卡但不工作“租赁”选项卡，还可以获取数据

  include 'new_conn.php';

// Retrieve selected property type from AJAX request
$propertyType = $_POST['propertyType'];

// Query the appropriate database table based on property type
if ($propertyType === 'Residential') {
    $tableName = 'residential';
    $columnName = 'R_Locality';
} else {
    $tableName = 'commercial';
    $columnName = 'C_Locality';
}

$query = "SELECT DISTINCT $columnName FROM $tableName";
$result = $conn->query($query);

// Build the options for the area/city dropdown
$options = "<option value=''>Select an Area/City</option>";
while ($row = $result->fetch_assoc()) {
    $options .= "<option value='" . $row[$columnName] . "'>" . $row[$columnName] . "</option>";
}

echo $options;

$conn->close();

Answer 1

我认为您需要修改您的 AJAX POST 请求。据我所知，您的请求中缺少一些属性，例如

dataType

、

contentType

，而且您还必须对 JSON 进行字符串化，以便能够将其作为 JSON 字符串发送。

我还想知道执行获取数据调用的 php 函数的代码是什么

./conn/are_fetch_data.php

问题可能在于服务器端如何从客户端接收数据。

   function updateDropdowns() {
        var propertyType = $('#property_type').val();
        var selectedTab = $('.tab-content .tab-pane.active').attr("id");

        // Determine the URL for AJAX request based on selected tab
        var ajaxUrl = './conn/are_fetch_data.php';
        var ajaxData = { propertyType: propertyType, tab: selectedTab };

        if (selectedTab === 'rent') {
            // Additional logic if needed for the "rent" tab
            // ajaxUrl = ...
            // ajaxData = ...
        }

        // Send AJAX request to fetch location options
        $.ajax({
            type: 'POST',
            url: ajaxUrl,
             dataType: 'json',
             contentType: 'application/json; charset=utf-8',
             data: JSON.stringify(ajaxData)
            success: function(data) {
                $('#Locality').html(data);
                $('#Locality').selectpicker('refresh'); // Reinitialize the second dropdown
            },
            error: function() {
                console.log('Error fetching location options');
            }
        });
    }