Display data on selecting a particular value

Question

I wish to create a layout where i get a list of items/name from database, and when i click on a name/item from that list information reated to that name/item should get displayed For this i divided the page into 2 half. The first half has a list of data and the second half will be displaying the details of a particular data. view would be something like this:

sample view of the required data

code that i am using till now is:

<div class="panel-body">
<?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {
            echo $row['firstname'];
            echo "<br>";
        }
    }
?>
</div>

<div class="col-md-9">
    <section class="tile">
        <div class="table-responsive">
            //display data here after clicking on a particular name/item
        </div>
    </section>
</div>

Can anyone please tell me how i can carry the id from left view to right view and display data according to it.

Answer 1

On click of user, take the id of the user, and call an ajax by passing the user id.

With that is fetch the data from database and display where you want to display that.

Give class="users" for the list of users.

$(document).on("click",".users",function(e){          
var url = "path to php file";
var id = "id of the user.";
     $.ajax({
        url:url,
        type:'POST',
        data:{id:id}
        success:function(data){          
            $('.table-responsive').html(data);
        }
     });
 e.preventDefault(); 
 return false;
});

Answer 2

<div class="panel-body">
    <?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {?>
            // Here, i'm assuming 'id' as primary key column. Change according to your requirement.
            <span class='ListId' data-id="<?php echo $row['id'];?>">
                <?php echo $row['firstname'];?>
            </span> 
          <?php echo "<br>";?>
        <?php }
    }?>
</div>

<div class="col-md-9">
  <section class="tile">
    <div class="table-responsive">
        <div class='ShowData'>
            //display data here after clicking on a particular name/item
        </div>
    </div>
  </section>
</div>

<script>
    $('.ListId').click(function(){
        var Id=$(this).attr('data-id');
        $.ajax({url:"Ajax_ShowDetails.php?Id="+Id,cache:false,success:function(result){
            $(".ShowData").html(result);
        }});
    });
</script>

Ajax_ShowDetails.php (Create one page of any name. But, make sure if you change page name here, you have to change in <script></script> tag too because both are related). In this page, Through 'Id' fetch all details.

<?php

$Id=$_GET['Id'];

Through this '$Id', fetch all required details. It will automatically sit in 'ShowData' Div.

// Write Your Query

?>

Answer 3

You can make a data attribute to identify which user is clicked and then you can use that id for what ever you want.

while($row = mysqli_fetch_assoc($result))
                        {
                            echo"<div class='users' data-id='".$row['id']."'>";
                            echo $row['firstname'];
                            echo"</div>"; 
                        }

and in js do like this..

$(document).on("click",".users",function(e){          
var url = "getInfo.php";//your file
var id = $(this).attr("data-id");
     $.ajax({
        url:url,
        type:'POST',
        data:{id:id}
        success:function(data){          
           //you will get all infor
           $(".table-responsive").html(data);//make layout according to your requirement  
        }
     });
 e.preventDefault(); 
 return false;
});

Edited: Check this its working(clicked)

 $(document).on("click",".users",function(e){ alert($(this).attr("data-id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='users' data-id='user123'> User 123 </div>