How to display image with selected dropdown in PHP, AJAX and JQuery

Question

This involves PHP, AJAX, JQuery. Hopefully this is an easy question.

I have a dynamic dropdown menu that displays content when the dropdown is selected. The content i am trying to display is an image. I am using two tables - One is my table for teams, and the other table is for my logos.

team

|id|name |
|--| --- |
|1 | MTL |
|2 | BOS |
|3 | CGY |
|4 | EDM |

gallery

|id|name      |**filename**  |
|--| ---      |              |
|1 | Montreal |habs-svg.svg  |
|2 | Boston   |bruins-svg.svg|
|3 | Calgary  |flames-svg.svg|
|4 | Edmonton |oilers-svg.svg|

It works perfectly. When I select MTL in dropdown menu from 'team' for example, it will display the corresponding file name in text format which is 'habs-svg.svg'. So all my Jquery and AJAX is working great.

How can i get the actual image to display instead of the image name? Please see code below for my index.php, getJS.js & getlogo.php:

**index.php**
<div class="container">
    <h2>Drop-down Selection Data Load with ajax, PHP & MySQL</h2>       
    <div class="page-header">
        <h3>
            <select id="employee" class="form-control" >
                <option value="" selected="selected">Select Employee Name</option>
                <?php
                $sql = "SELECT id, name FROM team";
                $resultset = mysqli_query($conn, $sql);
                while( $rows = mysqli_fetch_assoc($resultset) ) { 
                ?>
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["name"]; ?></option><?php } ?>
            </select>
        </h3>   
    </div>  
    <div class="hidden" id="errorMassage"></div>
    <table class="table table-striped hidden" id="recordListing">
        <thead>
          <tr>
            <th>Team Name</th>
            <th>Logo</th>
          </tr>
        </thead>
        <tbody>
          <tr> //My images that are dynamically printing will show here 
            <td id="empName"></td>
            <td id="empFileName"></td>
          </tr>
        </tbody>            
    </table>       
</div>

**getJS.js**
$(document).ready(function () {
  $("#employee").change(function () {
    var id = $(this).find(":selected").val();
    var dataString = "empid=" + id;
    $.ajax({
      url: "getlogo.php",
      dataType: "json",
      data: dataString,
      cache: false,
      success: function (empData) {
        if (empData) {
          $("#errorMassage").addClass("hidden").text("");
          $("#recordListing").removeClass("hidden");
          $("#empId").text(empData.id);
          $("#empName").text(empData.name);
          $("#empFileName").text(empData.filename);
        } else {
          $("#recordListing").addClass("hidden");
          $("#errorMassage").removeClass("hidden").text("No record found!");
        }
      },
    });
  });
});

**getlogo.php**
<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
    $sql = "SELECT name, filename 
    FROM gallery 
    WHERE id='".$_REQUEST['empid']."'";
    $resultSet = mysqli_query($conn, $sql); 
    $empData = array();
    while( $emp = mysqli_fetch_assoc($resultSet) ) {
        $empData = $emp;
    }
    echo json_encode($empData);
} else {
    echo 0; 
}
?>

I know how to insert images using PHP, but I feel it has something to do with my AJAX specifically on this line:

$("#empFileName").text(empData.filename);

So far it seems as if I need to use 'attr' instead of 'text'? I tried this below but did not seem to work:

$("#empFileName").attr("filename", empData.filename);

Thank you in advance!

Answer 1

You display an image in a HTML document using an <img tag with the URL of the image file as its src. So

$("#empFileName").html('<img src="' + empData.filename + '" />');

should put the image inside the table cell you wanted (assuming the image file is stored in the same folder on the website as the page you're loading it into).

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img