Reload DIV with new images

Question

I have an employee database which includes images as well as their work location (specialty). I have created a page where I fill out a form and upload the image to a directory and the path to the database. I then load the main page where I pull in all the images from the database (into the "photos" DIV. Everything works fine.

What I would like to do is reload the images in the DIV based on a MySQL query from a button. For example, instead of showing all employees, I only want to see those who have a specific job function i.e. Management. I currently have this accomplished by redirecting to a new page, where I run a specific query and that works fine as well. However, I'd like to learn how this is done without creating a new page for each query. I've spent many days looking at AJAX and PHP tutorials, which I how I was able to accomplish what I have, but I can't find a method to do what I want. This is the relevant part of my code:

Main.php

<div class="container-fluid">
<div class="row">
<div class ="col-lg-12"  style="width: 18%; height: 100%; border:3px solid red;">

<a href = "management.php" class="btn btn-primary">MANAGEMENT</a>
<a href = "high.php" class="btn btn-primary">HIGH</a>

</div>
<?php
 include ('db_connect.php');
 //include_once ('functions.php');

 $result = $db->query("SELECT * from monctonfir order by initials ASC");

 if($result->num_rows > 0){
    while ($row = $result->fetch_assoc()){
        $imageURL = 'image/'.$row["file"];
        $initial = $row["initials"];
        $name = $row["name"];
    ?>




    <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
    <div class="card text-center" style="width: 5rem;">
    <a href = "#">
        <img class="img card-img-top" src = "<?php echo $imageURL ?>"> 
    </a>
    <div class = "card-body">
        <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
    </div>

    </div>
    </div>

    <?php }
 } ?>

</div>

Can someone point me in the right direction? Thanks!

Answer 1

You don't need jQuery for what you are doing. You can use query/GET parameters to build your sql so you don't have to create a different page. Like:

<div class="container-fluid">
    <div class="row">
        <div class ="col-lg-12"  style="width: 18%; height: 100%; border:3px solid red;">

            <a href = "?job=management" class="btn btn-primary">MANAGEMENT</a>
            <a href = "?job=high" class="btn btn-primary">HIGH</a>
            <a href = "?" class="btn btn-primary">ALL</a>

        </div>
        <?php
        include ('db_connect.php');
        //include_once ('functions.php');

        $sql = "SELECT * from monctonfir WHERE 1 ";

        if(isset($_GET['job'])) $sql .= " AND job = '".$_GET['job']."' ";


        $sql .= " order by initials ASC";

        $result = $db->query($sql);

        if($result->num_rows > 0){
            while ($row = $result->fetch_assoc()){
                $imageURL = 'image/'.$row["file"];
                $initial = $row["initials"];
                $name = $row["name"];
                ?>




                <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
                    <div class="card text-center" style="width: 5rem;">
                        <a href = "#">
                            <img class="img card-img-top" src = "<?php echo $imageURL ?>">
                        </a>
                        <div class = "card-body">
                            <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
                        </div>

                    </div>
                </div>

            <?php }
        } ?>

    </div>

Answer 2

The simplest way is to use the load function of Jquery Jquery For example:

$( "#divID" ).load( "loadEmploye.php", { parameters1: 25, parameters2:3 });