CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Federico Marinelli
Federico Marinelli

Reputation: 25

Passing a var in the same php page without refresh

I have a problem with my website. I have a list of products that i get from database. These products have Image and Name camps. Now i want that, when i click to someone of this products, into my webpage appears a new box where there is the description of the product, the price etc.. This is the code for the products list

<?php
  include 'php/dbmanager.php';
  $result = DBManager::getInstance()->getProducts();
  if($result->num_rows > 0){
    $i = 0;
    while($row = $result->fetch_assoc()){
      echo "<div class=\"wrap effect8 open\" onclick>";
      echo "<h1>".$row['product_name']."</h1>";
      echo "<div class=\"left\">";
      echo "<img src=".$row['product_image']."  width=150  height=150  >";
      echo "</div>";
      echo "<div class=\"right\">";
      echo $row['product_description'];
      echo "<div class=\"prodSelection\">";
      echo '<a href="catalogo.php?prodID=';
      echo $row[product_id];
      echo '"';
      echo 'class="button">Acquista</a>';
      echo '<label>';
      echo '<select class="selectBoxCat">';
      echo '<option selected> 1 </option>';
      echo '<option>2</option>';
      echo '<option>3</option>';
      echo '</select>';
      echo '</label>';
      echo '</div>';
      echo '</div>';
      echo '</div>';

    }
  }
?>

How can i get the ProductID ($row[product_id]) from a single product that i click and use it for a new query for select the database's rows of this single product (and use this query for make another php like that)?

I dont want to refresh the page.

Could i use the pushstate method (HTML5)?

Upvotes: 1

Views: 750

Answers (1)

bzrk
bzrk

Reputation: 105

If you want to get additional data when the user clicks, you will need to make an ajax request to update your DOM without refreshing the page.

On the PHP side, you'll want to create a script that returns a json-encoded value.

On the JS side, you'll want to create a click event listener. Inside the listener, you'll want to make an ajax request to your PHP script.

When your data is successfully returned from your ajax call, you'll want to manipulate your DOM to display your product's details.

Example of a click listener:

$("#button").on("click", function(){
    // make your ajax request here
});

Example of an ajax call:

$.ajax({
    method: "POST",
    url: "scriptThatReturnsProductDetails.php",
    data: 
    {
        productID: $("#myProduct").attr('id')
    }
})
.done(function( msg ) {
    // Do some DOM manipulation
});

Upvotes: 1

Related Questions