How to display php output into a specific div?

Question

I am trying to display an output into a specific div without placing the php code into the same section (see below example). How do I do this from elsewhere e.g. another page using php/AJAX?

  <div class="flex-box">
     <div class="flex-container">flex-container 1</div>
     <div class="flex-container">
     <div class="flex-card-full" id="full"><header>full card</header></div></div>
     <div class="flex-container"><h2></h2>

 <?php
  if(isset($_GET['submit-search'])){
    $search = mysqli_real_escape_string($conn, $_GET['search']);
    $sql = "SELECT * FROM builders2000 WHERE Suburb LIKE '%$search%' OR Postcode LIKE '%$search%' OR Trading_name LIKE '%$search%' OR Categories LIKE '%$search%' OR State LIKE '%$search%' OR Address LIKE '%$search%'";

    $results = mysqli_query($conn, $sql);
    $queryResults = mysqli_num_rows($results);

    echo "There are '.$queryResults.' results.";

    if($queryResults > 0) {
      while($rows = mysqli_fetch_assoc($results)) {

        $name = $rows['Trading_Name'];
        $address = $rows['Address'];
        $suburb = $rows['Suburb'];
        $state = $rows['State'];
        $postcode = $rows['Postcode'];
        $phone = $rows['Phone'];
        $email = $rows['Email'];
        $website = $rows['Website'];
        $categories = $rows['Categories'];

    echo "<div class='flex-card' id='card'><div class='card-container'><section class='section-content'><h6>$name</h6>
                                                                                                <p class='text-content'>$address $suburb $state $postcode</p>
                                                                                                <p class='text-content'>$categories</p></section></div>    
                                  <div class='card-container'><a href='tel:$phone' name='phone' class='social-icon'><i class='fas fa-phone'></i></a> 
                                                              <a href='mailto:$email' name='email'class='social-icon'><i class='fa fa-envelope'></i></a> 
                                                              <a href='$website' name='website' class='social-icon'><i class='fab fa-edge'></i></a></div></div></div>";
        } } else {  echo "There are no results matching your search";  }}
 ?>

Putting output into a specific div from AJAX from the same page is straightforward and there are numerous examples. — ryantxr, May 20 '19 at 15:23
Maybe this will help you. https://stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html — ryantxr, May 20 '19 at 15:33

score 0 · Answer 1 · answered May 20 '19 at 22:07

Hi here is a simple example but I think is quite easy to understand the approach:

The index.php file:

<form method="post" id="myformid">
  Name :<input type="text" id="name" name="name">
  <input type="submit"  value="Test">
  </form>
  <br>
  <div id="myDiv">
  </div>

Here is a simple form and div, this div is where you are going to append the data.

The javascript:

function _ajax(action,data){
      return $.ajax({
        url: 'request.php',
        type: 'POST',
        dataType: 'JSON',
        data: {action: action, data: data}
      })
    }
    var result;
    //your form submit event
    $("#myformid").on('submit', function(event) {
      //prevent post
      event.preventDefault();
      //validate that name is not empty
      if ($("name").val() != "") {
        //parameters INS is insert data is the array of data yous end to the server
        var action = 'INS';
        var data = {
          name: $("#name").val()
        };
        console.log(data);
        //run the function and done handle the function
        _ajax(action,data)
        .done(function(response){
          console.log(response);
          //anppend name to the div
          $("#myDiv").append("<p>"+response.name+"</p>");
        });
      }
    });

and finally the request.php file:

<?php
//includes and session  start here
//validate that request parameters are set
if (isset($_POST["action"]) && isset($_POST["data"])) {
  //getters
$action = $_POST["action"];
$data = $_POST["data"];
//switch to handle the action to perfom maybe you want to update with the form too ?
switch ($action) {
  case 'INS':
    // database insert  here..
    //return a json object
    echo json_encode(array("name"=>$data["name"]));
    break;
}
}
 ?>

Result:

If you want to replace the data displayed inside the div just empty it before the data is appended to it =)

Hope it helps

How to display php output into a specific div?

1 Answers1