Refresh Tabelle nach Ajax POST basierend auf Suchkriterien

Question

Alle,

Ich habe eine modal, die eine Tabelle mit den Ergebnissen aus einer PHP-Abfrage enthält unter Verwendung von PHP enthalten, das Problem ist, wie die modale geladen wird, wenn die Seite, wenn zum ersten Mal geöffnet , Scheint es mir später unmöglich zu sein, einen AJAX-Post zu verwenden, um die Tabelle basierend auf einer Textfeldvariable zu aktualisieren.

Hier ist mein Code

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>'; 
} 

Das Ergebnis, das ich ge bin Tting ist jedes zurückgegebene Datenbankelement. Ich habe alert(output) in meinem AJAX-Erfolg verwendet, um zu bestätigen, dass die Variable tatsächlich übergeben wird, also denke ich, dass ich jetzt nur herausfinden muss, wie man die Tabelle aktualisiert.

Irgendwelche Ratschläge?

Dank

Answer 1

Sie umfassen Ihre PHP-Datei nicht in HTML, sondern eine ID zu dem Element zuweisen, wo man seinen Ausgang haben möchten. Dann füllen Sie in JavaCsript den Inhalt mit den Daten, die von AJAX-Aufruf zurückgegeben werden.

<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> 

Und der Javascript-Code:

$(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(); 
        } 
       }); 
    }); 
}); 

BTW, Ihre PHP-Code ist unsicher, wie es seine Parameter direkt in SQL-Abfrage verwendet, ohne Validierung oder Typ (SQL-Injection) und gibt Daten aus der Datenbank Gießen ohne Escape HTML (gespeicherte HTML/Javascript-Injektion). Überlegen Sie, PDO mit Parametern zu verwenden - http://php.net/manual/en/pdostatement.bindparam.php und umbrechen Sie die Ausgabewerte der Datenbank in htmlspecialchars() Aufruf