CODEWITHSUNDEEP
javascriptphphtmlajax
Perpetual_OOMM
Perpetual_OOMM

Reputation: 135

How to create or populate a table with data returned by an AJAX call

I have a webpage where I have a user enter in a search and when they enter the search I want data returned by my PHP script to be displayed as a table below the search area. My AJAX call successfully calls my PHP script which retrieves the data successfully. However the HTML elements/data aren't displayed. What is the proper way to generate HTML elements? Is the correct approach to have a PHP script generate them or is it possible to pass the results into some JavaScript function which creates the elements instead?

$sql = "SELECT supplierName, about FROM suppliers";

if ($res = mysqli_query($myConnection, $sql)) {
    if (mysqli_num_rows($res) > 0) {
        echo "<table>";
        while ($row = mysqli_fetch_array($res)) {
            //error_log('row');
            echo "<tr>";
            echo "<td>".$row['supplierName']."</td>";
            echo "<td>".$row['about']."</td>";
            echo "</tr>";
        }
    }
    echo "</table>";
}
mysqli_close($myConnection);

The commented out error_log outputs the expected amount.

Rough HTML code

    <head>
            <meta charset="utf-8">
        </head>
        <body>
            <main>
                <div id="searchQuery">
                    <form>
                        <form action="" method="post" id="form">
      <fieldset>
      <table>
        <tr>
          <td>
        Food Type*: 
        <select name = "type" id = "type" style="width:100%">
        <option value="Meat">Meat</option>
          <option value="Produce">Produce</option>
          <option value="Dairy">Dairy</option>
          <option value="Grain">Grain</option>
      </select>
          </td>
          <td>
            Price: <br>
            <select name = "price" id = "price" style="width:100%">
              <option value="none">None</option>
              <option value="Low to High">Low to High</option>
              <option value="High to Low">High to Low</option>
           </select>
          </td>
        </tr>
        <tr>
          <td>
        Food Grade*:
        <select name="grade" id="grade" style="width:100%">
        <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="F">F</option>
      </select>
        </td>
        <td>
            Organic: 
            <select name="organic" id="organic" style="width:100%">
              <option value="Yes">Yes</option>
              <option value="No">No</option>
           </select>
          </td>
      </tr>
      <tr>
        <td>
        Supplier Name: <br>
        <input type="text" name="name" id="name" style="width:95%">
        </td>
        <td>
          <button  type="submit" id = "submit" class="button1" form="form" value="Submit" name="submit" style="width:50%">Submit</button>
        </td>
      </tr>
    </table>
   </form>
   </fieldset>
                    </form>
                </div>
                //data displays here <-
            </main> 

        </body>
    </html>

Edit: here is the ajax call/form code

'''

$(function() {
    $(".button1").click(function() {

      var type = $("select#type").val();
      var grade = $("select#grade").val();
      var organic = $("select#organic").val();
      var price = $("select#price").val();
      var name = $("input#name").val();

      var submit = $("button#submit").val();

  $.ajax({
    type: "POST",
    url: "searchQuery.php",
    data: {submit:submit, type: type, grade:grade, organic:organic, price: price, name: name},
   success: function() {
    console.log('query submitted');
    }
  });

Upvotes: 1

Views: 2873

Answers (2)

JesusTCS
JesusTCS

Reputation: 168

To anwser your first question: the elements aren't displayed because they occur in an "Asynchronous JavaScript And XML" call (AJAX) which happens outside your page and the only thing you are doing after calling it is:

console.log('query submitted');

you need to somehow send the information back to your page and the way most easy to mantain would be to use PHP to return a JSON (or XML if that's your thing) with something like this:

PHP :

if (mysqli_num_rows($res) > 0) {
    $table= array();
    while ($row = mysqli_fetch_array($res)) {
        array_push($table,array(
            'supplierName'=>$row['supplierName'],
            'about'=>$row['about']
        ));
    }
    echo json_encode($table)
}

And then you can use javascript to generate the table based on the returned json with something like this:

JAVASCRIPT:

success: function(data) {
    var myTable = document.getElementById('myTable');
    for (i in data) {
        var tr = myTable.appendChild(document.createElement('tr'));
        for (key in data[i]){
            var td = tr.appendChild(document.createElement('td'));
            td.title = key;
            td.innerHTML = data[i][key];
        }
    }
}

HTML

//data displays here <-
<table id="myTable"></table>

Some relevant links:

Please feel free to add any comment if you would like further clarification.

Upvotes: 1

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4015

Yes it is possible

Add success: function(data){} where data is the already defined variable has value is the result you can perform functions using this variable:

$.ajax({
    type: "POST",
    url: "searchQuery.php",
    data: {submit:submit, type: type, grade:grade, organic:organic, price: price, name: name},
   success: function(data) {
    console.log('query submitted');
    document.querySelector("main")[0].append(data);
    }
  });

Upvotes: 1

Related Questions