За последние 24 часа нас посетили 37205 программистов и 1721 робот. Сейчас ищут 611 программистов ...

Выпадающие списки + форма поиска + AJAX

Тема в разделе "PHP для новичков", создана пользователем graf_vorontsov, 12 июн 2017.

  1. graf_vorontsov

    graf_vorontsov Активный пользователь

    С нами с:
    12 фев 2011
    Сообщения:
    183
    Симпатии:
    1
    Адрес:
    Украина, Харьков
    Проблема следующая: есть выпадающий список, он берёт данные из БД, потом строится на основании выбранных данных и в конце выводится окончательная таблица.
    Есть поиск тоже по БД.
    Так вот если воспользоваться поиском, то результат никуда не уходит со страницы если начинаю пользоваться выпадающими списками.
    Списки работают на AJAX
    Помогите, не могу сообразить как сделать чтоб результат очищался. unset не помогает, т.к. страница не перегружается при пользовании выпадающим списком.

    PHP:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Выбор марки и модели автомобиля</title>
    5.     <!-- Подключаем библиотеку jQuery -->
    6.     <script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script>
    7.     <!-- Подключаем таблицу стилей -->
    8.     <link rel="stylesheet" type="text/css" href="css/style.css" />
    9.     <!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
    10.     <script src="js/custom.js"></script>
    11.     <script src="js/table.js"></script>
    12.    
    13. </head>
    14. <body>
    15. <?php require_once('php/db.php'); ?>
    16.     <h1>Подбор амортизаторов по каталогу</h1>
    17.    
    18.     <?php
    19.             $marki = pobierzMarki();
    20.     ?>
    21.    
    22. <div id="form">  
    23.     <form>
    24.         <div id="marki">
    25.         <select id="select_marka">
    26.             <option value="">Выберите марку</option>
    27.             <?php foreach($marki as $marka): ?>
    28.                     <option value="<?php echo $marka['marka_id'];?>"><?php echo $marka['marka_name'];?></option>
    29.             <?php endforeach; ?>
    30.         </select>
    31.         </div>
    32.         <div id="modele">
    33.        
    34.         </div>
    35.         <div id="cars">
    36.         </div>
    37.     </form>
    38.  
    39.     <div id="search">
    40.         <form class="search" action="<?echo $PHP_SELF?>" method="post">
    41.             <input name="search" placeholder="Поиск по номеру..." type="search" required>
    42.             <button type="submit"></button>
    43.         </form>
    44.     </div>
    45.         <div id="info">
    46.        
    47.         </div>
    48.  
    49.     <?php if(isset($_POST['search']) && $_POST['search'] != ""): ?>
    50.     <?php
    51.         $search = $_POST['search'];
    52.        
    53.         $amortizators = search($search);
    54.        
    55.         //print_r ($amortizators);      
    56.     ?>
    57.     <hr/>
    58.     <div class="tbl-header">
    59.         <table cellpadding="0" cellspacing="0" border="0">
    60.             <thead>
    61.                 <tr>
    62.                     <th>AUTO</th><th>YEAR</th><th>RANGE_TYPE</th><th>INSTALL</th><th>NUMBER</th>
    63.                 </tr>
    64.             </thead>
    65.         </table>
    66.     </div>
    67.     <div class="tbl-content">
    68.         <table>
    69.            
    70.             <?php foreach($amortizators as $amort): ?>                  
    71.             <?php            
    72.                 if($amort['correction'] != ''){
    73.                     echo "<tr><td colspan='5'><hr /></td></tr>";
    74.                     echo "<tr><td>". ucfirst($amort['marka_name']). " " . ucfirst($amort['model_name']). "</br>".$amort['car_name'] ."</br>". $amort['correction']."</td><td>"
    75.                     . $amort['year'] . "</td><td>"
    76.                     . $amort['range_type'] . "</td><td>"
    77.                     . $amort['install'] . "</td><td>"
    78.                     . $amort['art_number'];
    79.                     }else{
    80.                     echo "<tr><td>". ucfirst($amort['marka_name']). " " . ucfirst($amort['model_name']). " ".$amort['car_name'] ."</td><td>" .
    81.                     $amort['year'] . "</td><td>"
    82.                     . $amort['range_type'] . "</td><td>"
    83.                     . $amort['install'] . "</td><td>"
    84.                     . $amort['art_number'];
    85.                 }
    86.             ?>  
    87.         </td>
    88.     </tr>
    89.    
    90.     <?php endforeach; ?>
    91. </table>
    92. </div>
    93.     <?php endif; ?>      
    94. </div>
    95.  
    96.    
    97. </body>
    98. </html>
    Тут формируются 3 выпадающих списка из базы данных
    PHP:
    1. <?php
    2. include('db.php'); ?>
    3. <?php if(isset($_POST['marka_id']) && $_POST['marka_id'] != ""): ?>
    4.     <?php
    5.         $marka_id = $_POST['marka_id'];
    6.        
    7.         $modele = pobierzModeleMarki($marka_id);
    8.        
    9.     ?>
    10.     <select id="select_model">
    11.             <option value="">Выберите модель</option>
    12.             <?php foreach($modele as $model): ?>
    13.                     <option value="<?php echo $model['model_id'];?>"><?php echo $model['model_name'];?></option>
    14.             <?php endforeach; ?>
    15.     </select>
    16.    
    17. <?php endif; ?>
    18.  
    19.  
    20. <?php if(isset($_POST['model_id']) && $_POST['model_id'] != ""): ?>
    21.     <?php
    22.         $model_id = $_POST['model_id'];
    23.        
    24.         $cars = pobierzSamochodyModelu($model_id);
    25.        
    26.     ?>
    27.     <select id="select_car">
    28.             <option value="">Выберите авто</option>
    29.             <?php foreach($cars as $car): ?>
    30.                     <option value="<?php echo $car['car_id'];?>"><?php echo $car['car_name'];?></option>
    31.                    
    32.             <?php endforeach; ?>
    33.        
    34.     </select>  
    35.  
    36.  
    37. <?php endif; ?>
    38.    
    39. <?php if(isset($_POST['car_id']) && $_POST['car_id'] != ""): ?>
    40.     <?php
    41.         $car_id = $_POST['car_id'];
    42.        
    43.         $autos = pobierzAmort($car_id);
    44.        
    45.        
    46.     ?>
    47.             <hr/>
    48.             <div class="tbl-header">
    49.                 <table cellpadding="0" cellspacing="0" border="0">
    50.                     <thead>
    51.                     <tr>
    52.                        <th>AUTO</th><th>YEAR</th><th>RANGE_TYPE</th><th>INSTALL</th><th>NUMBER</th>
    53.                     </tr>
    54.                   </thead>
    55.                 </table>
    56.             </div>
    57.             <div class="tbl-content">
    58.             <table>
    59.             <?php foreach($autos as $auto): ?>
    60.             <?php
    61.                 if($auto['correction'] != ''){
    62.                     echo "<tr><td colspan='5'><hr /></td></tr>";
    63.                     echo "<tr><td>". ucfirst($auto['marka_name']). " " . ucfirst($auto['model_name']). "</br>".$auto['car_name'] ."</br>". $auto['correction']."</td><td>"
    64.                          . $auto['year'] . "</td><td>"
    65.                          . $auto['range_type'] . "</td><td>"
    66.                          . $auto['install'] . "</td><td>"
    67.                          . $auto['art_number'];
    68.                          }else{
    69.                                 echo "<tr><td>". ucfirst($auto['marka_name']). " " . ucfirst($auto['model_name']). " ".$auto['car_name'] ."</td><td>" .
    70.                               $auto['year'] . "</td><td>"
    71.                              . $auto['range_type'] . "</td><td>"
    72.                              . $auto['install'] . "</td><td>"
    73.                              . $auto['art_number'];
    74.                          }
    75.             ?>  
    76.                     </td>
    77.                 </tr>
    78.            
    79.             <?php endforeach; ?>
    80.             </table>
    81.             </div>
    82. <?php endif; ?>  
    83.  
    84. <script>
    85. $('#select_model').change(function(){
    86.        
    87.             $.post(
    88.                 'php/populate_select.php',
    89.                 { model_id:$('#select_model').val()},
    90.                 function(res){
    91.                     $('#cars').html(res);
    92.                    
    93.                    
    94.                 }
    95.             )
    96.         });
    97. </script>
    98.  
    99. <script>
    100. $('#select_car').change(function(){
    101.        
    102.             $.post(
    103.                 'php/populate_select.php',
    104.                 { car_id:$('#select_car').val()},
    105.                 function(res){
    106.                     $('#info').html(res);
    107.                    
    108.                    
    109.                 }
    110.             )
    111.         });
    112. </script>
     
  2. graf_vorontsov

    graf_vorontsov Активный пользователь

    С нами с:
    12 фев 2011
    Сообщения:
    183
    Симпатии:
    1
    Адрес:
    Украина, Харьков
    или если сделать поиск тоже на AJAX.... проблема остаётся.
    Т.е. мне надо убирать результат поиска или результат Select из выпадающего списка.
    А так получается 2 результата одновременно показываются.
     
  3. graf_vorontsov

    graf_vorontsov Активный пользователь

    С нами с:
    12 фев 2011
    Сообщения:
    183
    Симпатии:
    1
    Адрес:
    Украина, Харьков
    [​IMG]

    вот наглядная картинка как получается

    вверху - это выбранное выпадающим списком,
    внизу - поиском.
    И то и другое на Аяксе(т.е. страницу не перегружаю)
     
  4. graf_vorontsov

    graf_vorontsov Активный пользователь

    С нами с:
    12 фев 2011
    Сообщения:
    183
    Симпатии:
    1
    Адрес:
    Украина, Харьков
    сделал.
    Код (Javascript):
    1. function(res){
    2.     $('#modele').html(res);
    3.     $('#search-result').empty();
    4. }
    5.  
    6.  
    7. document.getElementById('search-result').innerHTML = response;
    8. document.getElementById('modele').innerHTML = '';