CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Filipe Barreto Peixoto Teles
Filipe Barreto Peixoto Teles

Reputation: 546

Dynamically show SQL query on a PHP page on click, using AJAX

Basically, I want to retrieve a certain product after clicking on an element. I'm using AJAX to pass the variable, and PHP to display the SQL query. I will use the product id on a WHERE statement, to retrieve and display the correct product.

Here is part of my code so far:

<html>
<head>
    <title>Left Frame</title>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery-1.11.2.js">
</script>
</head>

<body>
<div class="container">

    <div id="bottomHalf">
        <img id="blank" src="assets/bottom_half.png" style= "z-index: 5" >
        <img src="assets/frosen_food.png"
        usemap="#Map2"
        border="0"
        id="frozen"
        style="z-index: 0;
        visibility:hidden;" >

        <map name="Map2">
            <area shape="rect" coords="7,95,126,146" alt="Hamburger Patties" href="#" id="hamburgerPatties">

     </div>
</div>
<script language="javascript">

  $("#hamburgerPatties").click(function(){
         var hamburgerPatties = "1002";
      $.ajax({
          type:"GET",
          url: "topRightFrame.php",
          data: "variable1=" + encodeURIComponent(hamburgerPatties),
          success: function(){
          //display something if it succeeds
          alert( hamburgerPatties );
      }
      });
  });

</script>
</body>
</html>

Part of my PHP code:

<?php

$product_id =(int)$_GET['variable1'];
$servername = "************";
$username = "************";
$password = "*************";
$dbname = "poti";
$tableName = "products";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

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

// Display all products on the database
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "Product ID: " . $row["product_id"]. " - Product Name: " . $row["product_name"]. " Unit Price:" . $row["unit_price"]. "<br>";
    }
} else {
    echo "0 results";
}

    // Display product I clicked on the other frame
    if (isset($GET['variable1'])) {

    $sql = "SELECT * FROM $tableName WHERE product_id = " . $_GET['variable1'];
    $result = $conn->query($sql);

        if ($result) {
        echo '<table>';

            while ($row = $result->fetch_assoc())
            {
            echo '<tr>';
            echo '<td>', "Product ID: " . $row["product_id"]. " - Product Name: " . $row["product_name"]. " Unit Price:" . $row["unit_price"]. "<br>";
            echo '</tr>';
            }
        echo '</table>';
        }
}
$conn->close();
?>

I'm able to display all the products. But starting from the ifsset statement, the code no long works. I get no error message or anything. How can I solve this? I'm pretty new to PHP.

EDIT: Ok, I managed to get the product I want when I hard code the product id. Now I need to get this variable using javascript.

Upvotes: 2

Views: 2005

Answers (2)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

You have syntax error in if block. use {} for if block also use echo instead of pure html tag(table). This error prevents successful state of ajax request. also don't forget to close table.

if ($result)
{
 echo '<table>';

 while ($row = $result->fetch_assoc()) 
   {
    echo '<tr>';
    echo '<td>', $row['product_id'], '</td><td>'; // and others
    echo '</tr>';

  }
 echo '</table>';
}

and the ajax code to display php result instead of test alert would be this:

<script language="javascript">

  $("#hamburgerPatties").click(function(){
         var hamburgerPatties = "1002";
      $.ajax({
          type:"GET",
          url: "topRightFrame.php",
          data: "variable1=" + encodeURIComponent(hamburgerPatties),
          success: function(data){
          alert(data);
      }
      });
  });

</script>

Upvotes: 0

Artur Filipiak
Artur Filipiak

Reputation: 9157

You have syntax errors in your if statements.

When you're setting if, you should enclose the statement in braces:

instead of if something : do if(something): and then end it with endif; (when using colons :)

// Display product I clicked on the other frame
if (isset($GET['variable1'])):
    $query = "SELECT * FROM $tableName WHERE product_id = " . $_GET['variable1'];
    $result = mysqli_query($conn, $query);
    if ($result):
        echo '<table>';
        while ($row = $result->fetch_assoc()) {
            echo '<tr>';
            echo '<td>', $row['product_id'], '</td>'; // and others
            echo '</tr>';
        }
        echo '</table>';
    endif;
endif;

Or, use {} braces instead of colons :

// Display product I clicked on the other frame
if (isset($GET['variable1'])){
    $query = "SELECT * FROM $tableName WHERE product_id = " . $_GET['variable1'];
    $result = mysqli_query($conn, $query);
    if ($result){
        echo '<table>';
        while ($row = $result->fetch_assoc()) {
            echo '<tr>';
            echo '<td>', $row['product_id'], '</td>'; // and others
            echo '</tr>';
        }
        echo '</table>';
    }
}

Upvotes: 1

Related Questions