Использование окна выбора для обновления запроса на просмотр

Question

Я просто изучаю Ajax и пытаюсь обновить запрос выбора mysql для фильтрации результатов. Я думаю, что запрос работает нормально, но не уверен, что я правильно работаю.

Вот мой HTML с выбором;

  <div class="volunteers"> 
      <h1>Volunteers</h1> 
      <div class="volunteerSelection"> 
       <select id="vtSelect" name="volunteerS"> 
        <option value="1">Comittee</option> 
        <option value="2">Day of Event</option> 
       </select> 
      </div> 
      <div id="volunteers"> 
      </div> 
     </div> 

Это сценарий, который отображает данные;

Я обновил это до предложения, и он отлично работает. Затем я начал работать над своим PHP и mysql-запросом. Смотри ниже;

 $(document).ready(function(){ 
      $('#vtSelect').change(function (e) { 
       e.preventDefault(); 
       var selectedOption = $(this).find('option:selected'); 
       $('#vtSelect option').removeAttr('selected'); 
       $(selectedOption).attr('selected', 'selected'); 
       var selectedOptionValue = $(selectedOption).val(); 

       $.ajax({ 
        type: "POST", 
        url: "includes/backDataProcess.php", 
        data: { 
         data: selectedOptionValue 
        }, 
        success: function (data) { 
         $("#volunteers").html(data); 
        } 
       }); 
      }); 
     }); 

Это PHP с выбранным запросом; У меня есть обновление, и я получаю данные. Я обновил имя в теге select, но я не получаю значение тега select в запросе. Когда я комментирую данные сообщения и просто добавляю значение, которое он публикует. Я не получаю никаких ошибок, он просто отображает 0 результатов.

 <?php 
     include('readerConnect.php'); 
     $sql = "SELECT * FROM contacts prc 
     JOIN states as st 
     ON (prc.stateId = st.idStates) 
     INNER JOIN volunteers as v 
     ON (prc.idContacts = v.contactId) 
     INNER JOIN volunteerType as vt 
     ON (v.volunteerTypeId = vt.idVolunteerType) 
     WHERE (volunteerTypeId = 1 /*`mysql_real_escape_string('$_POST[volunteerS]')`*/)"; 

     $result = $conn->query($sql); 

     if ($result->num_rows > 0) { 
      // output data of each row 
      while($row = $result->fetch_assoc()) { 
       echo 
       "<div class='contacts'> 
       <div class='contactName'>" . $row["firstName"] ." " . $row["lastName"] ."</div>" 
       ."<div class='contactAddress'>" .$row["address1"] ." " .$row["address2"] ."<br>" 
       .$row["city"] ." " .$row["state"] ." " .$row["zip"] ."</div>" 
       ."<div class='contactVolunteer'>" .$row["volunteerTypeId"] 
       ."</div>"; 
      } 
     } else { 
      echo "0 results"; 
     } 
     $conn->close(); 
     ?> 

Я не уверен, что именно там, где речь идет, я попытался как изменение и OnChange для обновления, мне нужно сделать кнопку обновления? Я думал, что jquery сможет сделать это без обновления. Любая помощь приветствуется.

Answer 1

В коде jQuery имеется несколько очевидных проблем. Если вы откроете консоль своего браузера, вы увидите ошибку onChange is not a function, так как такого метода jQuery нет. Вы хотите change() или on()

Также вы создаете функцию showVolunteers(), но ее никогда не вызывают.

попробовать:

$('#vtSelect').change(function (e) { 
    e.preventDefault(); 
    var selectedOption = $(this).find('option:selected'); 
    $('#vtSelect option').removeAttr('selected'); 
    $(selectedOption).attr('selected', 'selected'); 
    var selectedOptionValue = $(selectedOption).val(); 

    $.ajax({ 
     type: "POST", 
     url: "includes/backDataProcess.php", 
     data: { 
      data: selectedOptionValue 
     }, 
     success: function (data) { 
      $("#volunteers").html(data); 
     } 
    }); 

}); 

Если вы столкнулись с больше проблем, использование браузера вкладка консоли сети для проверки AJAX запрос, и всегда использовать консоль, чтобы проверить на наличие ошибок