CODEWITHSUNDEEP
phpjquery
glokul
glokul

Reputation: 77

Displaying SQL Data With jQuery

In a PHP file, I'm running a query on my database that returns specific values from every new record inserted into a table. Using a while loop, the query fetches the data and echos it out in a table I have created.

Now, using jQuery's ajax load method with setInterval on 1 second, the data from the php file appears on my page the way I want it to.

However, the problem I'm having now is figuring out how to display more details about individual users when their respective "table" is clicked. These details would appear via jQuery's show/hide. How would I link the ID of the record to what I click so it shows details about that specific user?

I've created a diagram explaining what I'm trying to do, as I'm relatively new to PHP and not sure if I'm explaining myself correctly.

Working Demo

container.php

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Show and Hide User Info</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  body {
    background-color: #000;
    color: #fff;
    font-family: tahoma, arial, verdana;
    font-size: 12px;
  }

  #users {
    background-color: #828282;
    width: 300px;
  }

  #userdetails {
    background-color: #828282;
    width: 300px;
    margin-top: 10px;
  }

  .user {
    padding: 5px;
    border-bottom: 1px solid white;
    width: 300px;
    background-color: #828282;
  }

  .user:hover {
    background-color: #282828;
    cursor: pointer;
  }

  #back:hover {
    background-color: #ffcc00;
    cursor: pointer;
    color: #000;
  }

  </style>

</head>

<body>

<div id="userlist"></div>

<div id="userdetails"></div>

<script>
setInterval(function(){
   $("#userlist").load("userlist.php");
}, 1000);
$('#userdetails').hide();
$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('#userlist').hide();
  });
})
$(document).on("click","#back", function() {
  $('#userlist').show();
  $('#userdetails').hide();
});
 </script>


</body>
</html>

userlist.php

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2");

?>

  <table data-id="<?php echo $row['id']; ?>" class="user">
    <tr>
      <td align="left"><?php echo $row['address']; ?></td>
      <td align="right"><?php echo $row['zip']; ?></td>
    </tr>
    <tr>
      <td align="left"><?php echo $row['city']; ?></td>
      <td align="right"><?php echo $row['state']; ?></td>
    </tr>
    <tr>
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td>
      <td align="right">"member since..."</td>
    </tr>
  </table>

<?php
  }
}
?>

userdetails.php

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]);

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

?>
<div>
<span id="back">BACK</span>
</div>
<table data-id="<?php echo $row['id']; ?>" class="user">
<tr>
  <td align="left">First Name:</td>
  <td align="right"><?php echo $row['first_name']; ?></td>
</tr>
<tr>
  <td align="left">Last Name:</td>
  <td align="right"><?php echo $row['last_name']; ?></td>
</tr>
<tr>
  <td align="left">Age:</td>
  <td align="right"><?php echo $row['age']; ?></td>
<tr>
</tr>
  <td align="left">Sex:</td>
  <td align="right"><?php echo $row['sex']; ?></td>
</tr>
</table>

<?php
 }
}
?>

Upvotes: 0

Views: 1078

Answers (3)

Pratyush
Pratyush

Reputation: 535

I think your userlist gets loaded after one second, so your table click may not be triggering. Can you try this.

$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('.user').hide();
  });
})

Even your userdetails's table class name is same as userlist's table class name.

Upvotes: 0

Damilola Olowookere
Damilola Olowookere

Reputation: 2383

You can add data-id and class attributes to each <table style='width: 295px; border-bottom: 1px solid white;'> such that you can now have onclick handlers set for the table's class.

e.g.

Your table tag will now be something like:

"<table style='width: 295px; border-bottom: 1px solid white;' data-id='" . $row['user_unique_id'] . "' class='user_entry' >..."

and you will now have handler set like:

$('.user_entry').click( function()
{
   var data_id = $( this ).attr( "data-id" );
   $.get
   ( "get_user_details.php" , { user_id: data_id } ).done( function( data )
    {
        $( '#container_for_viewing_html' ).html( data );
    });
   })

You now use $_GET['user_id'] in the get_user_details.php script to know the unique user to get the data from your db and return your beautifully escaped html (don't forget you may need to do things like encoding html characters to prevent XXS and related attacks)

Upvotes: 0

liquidacid
liquidacid

Reputation: 118

Use Java to get the I'd of the div you want to display the data. Use the XML function to open the phone file. W3SCHOOLS has a good tutorial.

W3SCHOOLS tutorial

Upvotes: 1

Related Questions