How can I make a link to show more datas in my DB when clicking an item which is made after query of-CodePudding

I am trying to build an web application of showing restaurant lists & informations

If you click any button on the id="category_lists" (I will mention it as "list 1"), SQL query works and shows another additional list of restaurants in that specific category (I will mention it as "list 2").

I succeeded until this point.

I want my users to click specific restaurants name among the "list 2" and to check out specifications of the clicked restaurant without reloading a webpage. (like name, phone number, specific location,, etc)

I already have informations about those specific informations in my DB. But I cannot set up my app to query again from 'clicking' an item among the list which is also been queried from a DB.

I couldn't figure out how to set up my link on the line 46..

Thank you for reading this.

Here is my code.

<?php
  $hostname = "hostname";
  $admin_id = "admin_id";
  $admin_pw = "admin_pw";
  $db_name = "db_name";
  $conn = mysqli_connect($hostname, $admin_id, $admin_pw);
  mysqli_select_db($conn, $db_name);
?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=8u4miwdm7j"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="zulmoc.css?after">
    <title>Zulmoc</title>
  </head>
  <body>

    <center>
      <h1><a href="./index.php">Zulmoc!</a></h1>
    </center>

    <nav>
      <ol>
        <li id="category_lists"><a href="./index.php?id=1">Beef</a></li>
        <li id="category_lists"><a href="./index.php?id=2">Pork</a></li>
        <li id="category_lists"><a href="./index.php?id=3">Chicken</a></li>
        <li id="category_lists"><a href="./index.php?id=4">Seafood</a></li>
        <li id="category_lists"><a href="./index.php?id=5">Noodles</a></li>
        <li id="category_lists"><a href="./index.php?id=6">Bread</a></li>
        <li id="category_lists"><a href="./index.php?id=7">Meal</a></li>
        <li id="category_lists"><a href="./index.php?id=8">Table</a></li>
        <li id="category_lists"><a href="./index.php?id=9">Course</a></li>
      </ol>
    </nav>

    <article id="lists_of_one_category">
      <?php
      $sql = "SELECT rest_lists.name FROM rest_lists WHERE rest_lists.category=".$_GET['id'];
      $result = mysqli_query($conn, $sql);
        while( $row = mysqli_fetch_assoc($result)){
          echo '<li><a href="XXXXXXXXXXXXX'.$row['id'].'">'.$row['name'].'</a></li>'."\n";
        }
      ?>
    </article>

    <div id="map" style="width:50%;height:200px;"></div>

    <div id="rest_images">Images</div>
    <div id="rest_description">Description</div>

    </div>

    <script type="text/javascript" src="map.js"></script>
  </body>
</html>

CodePudding user response：

first, you need to escape the user inputs to prevent SQL INJECTION attacks please use mysqli_real_escape_string to protect your query.

for the restaurant info, you can use ajax request to get the restaurant info something like this.

<script>
    function getResturantInfo(resturantId) {

        $.ajax('/resturant.php', {
            type: 'POST',
            data: {
                resturant_id: resturantId
            }, // data to submit
            success: function(data, status, xhr) {
                // here you can handle where you want to display the resturant data 
            },
            error: function(jqXhr, textStatus, errorMessage) {

            }
        });

    }

</script>

and in line 46 replaced with event onclick something like this

      echo '<li><a onclick="getResturantInfo('. $row['id'] .')" href="javascript:void(0);">'.$row['name'].'</a></li>'."\n";

I hope it's helpful