Обновить таблицу после POST AJAX на основе критериев поиска

Question

Все,

У меня есть модальное, который содержит таблицу с результатами РНР запроса с помощью PHP включают в себя, то проблема заключается в загрузке модальный, когда страница, если первый открыт , Я, кажется, не могу позже использовать сообщение AJAX для обновления таблицы на основе переменной текстового поля.

Вот мой код

HTML

<div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">x</span> 
    </div> 

    <div class="modal-body">  
     <div id="divSearchResultsTable"> 
      <table class="tblSearchResults" id="tblSearchResults">  
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Home</th> 
        <th>Mobile</th> 
        <th>City</th> 
        <th>Country</th> 
        <th>Company</th> 
       </tr> 
       </thead> 
       <tbody> 
        <?php 
         include("sql_search.php"); 
        ?> 
       <tbody> 
      </table> 
     </div> 
     <div id="divSearchResultsButtons"> 
      <input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/> 
      &nbsp 
      <input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/> 
     </div> 
</div> 
</div> 

JavaScript

$(function(){ 
    $('#btnSearch').click(function(e){ 
     var modal = document.getElementById('modal'); 
     var value = $("#txtSearch").val(); 
       $.ajax({ 
        type : "POST", 
        url : "sql_search.php",     
        data : {value:value}, 
        success : function(output) { 
        alert(output); 
         modal.style.display = 'block'; 
         modal.focus(); 
        } 
       }); 
    }); 
}); 

PHP (sql_search.php)

$value = (isset($_POST['value']) ? $_POST['value'] : null); 

if ($value == null){ 
$sql = "SELECT * FROM helpdesk"; 
} 

else{ 
$sql = "SELECT * FROM helpdesk WHERE ID = $value"; 
} 

$result = mysqli_query($conn, $sql); 

while($row = mysqli_fetch_array($result)) 
{ 
    echo '<tr>'; 
    echo '<td>'.$row['ID'].'</td>' . '<td>'.date("d/m/Y g:i:s A", strtotime($row['DateCreated'])).'</td>' . '<td>'.$row['Priority'].'</td>' . '<td>'.$row['Company'].'</td>' . '<td>'.$row['Name'].'</td>' . '<td>'.$row['Subject'].'</td>' . '<td>'.$row['Name'].'</td>'; 
    echo '</tr>'; 
} 

В результате я GE tting - каждый возвращаемый элемент базы данных. Я использовал alert(output) в моем успехе AJAX, чтобы подтвердить, что переменная действительно передается, поэтому я думаю, что мне просто нужно выяснить, как получить таблицу для обновления.

Любые советы?

Благодаря

Answer 1

Не включать файл PHP в HTML, но присвоить идентификатор для элемента, в котором вы хотели бы иметь свой выход. Затем в Javacsript заполните содержимое данными, возвращаемыми вызовом AJAX.

<div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">x</span> 
    </div> 

    <div class="modal-body">  
     <div id="divSearchResultsTable"> 
      <table class="tblSearchResults" id="tblSearchResults">  
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Home</th> 
        <th>Mobile</th> 
        <th>City</th> 
        <th>Country</th> 
        <th>Company</th> 
       </tr> 
       </thead> 
       <tbody id="modalContent"> 
        <!-- note, no content and tbody has an ID --> 
       <tbody> 
      </table> 
     </div> 
     <div id="divSearchResultsButtons"> 
      <input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/> 
      &nbsp 
      <input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/> 
     </div> 
</div> 
</div> 

И Javascript код:

$(function(){ 
    $('#btnSearch').click(function(e){ 
     var modal = document.getElementById('modal'); 
     var value = $("#txtSearch").val(); 
       $.ajax({ 
        type : "POST", 
        url : "sql_search.php",     
        data : {value:value}, 
        success : function(output) { 
        alert(output); 
         $('#modalContent').html(output); // <------ 
         modal.style.display = 'block'; 
         modal.focus(); 
        } 
       }); 
    }); 
}); 

Кстати, ваш PHP код является небезопасным, как он использует свой параметр непосредственно в SQL запросе без проверки или типа литья (инъекции SQL) и выводит данные из базы данных без escaping html (хранимая HTML/Javascript инъекция). Рассмотрите использование PDO с параметрами - http://php.net/manual/en/pdostatement.bindparam.php и завершите вывод данных базы данных в вызов htmlspecialchars()