CODEWITHSUNDEEP
javascriptphpjqueryajax
web-tiki
web-tiki

Reputation: 103780

jquery/ajax request to server and display selected record

I am wondering how jquery/ajax can send a query to the server and then let the server (php) calculte the response, and append it to the webpage with jquery/ajax again?

Example : I have 3 products in database with the details for each product (name, description and image). I have a page with links to these 3 products and I want to display only the clicked product details with jquery/ajax :

html :

<nav>
    <ul>
        <li><a href="#prod1">prod1</a></li>
        <li><a href="#prod2">prod2</a></li>
        <li><a href="#prod3">prod3</a></li>
    </ul>
</nav>
<div></div>

JS

$(document).ready(function() {
    $('a').click(function(){
        $('div').load("products.php");
    });
});

this is what my products.php file looks like :

<?php
try
    {$bdd = new PDO('mysql:host=localhost;dbname=ddb', 'root', '');}
catch (Exception $e)
    {die('Error : ' . $e->getMessage());}
$reponse = $bdd->query('SELECT * FROM products ORDER BY id DESC') or die(print_r($bdd->errorInfo()));
?>

<div class="prod_details">
    while ($data = $reponse->fetch()){ ?>
        <h1><?php echo $products['name']; ?></h1>
        <p><?php echo $products['description']; ?></p>
        <img src="<?php echo $products['image_path']; ?>">
    <?php }?>
</div>

This displays all the products, how can I get only the clicked product to be displayed?

Upvotes: 0

Views: 1276

Answers (2)

Mike Oram
Mike Oram

Reputation: 765

there is a few things wrong here. First of all your js:

$('.div').load("products.php");

will try to load products.php into an element with the class of div not into the div element.

secondly it will try to load products.php from the same directory location as your js script. you probably want to do /products.php and then place products.php in the root.

Finally your HTML is incorrect as you need a UL or OL tag around your LI tags.

To get the php to return the individual product you will need to pass the product Id to your PHP and then amend the SQL query to accept a WHERE id clause. something like this:

HTML:

<nav>
    <ul>
    <li><a href="#prod1" data-id="1">prod1</a></li>
    <li><a href="#prod2" data-id="2">prod2</a></li>
    <li><a href="#prod3" data-id="3">prod3</a></li>
    </ul>
</nav>
<div></div>

JS:

$(document).ready(function() {
    $('a').click(function(){
        $('div').load("products.php?id=" + $(this).attr('data-id'));
    });
});

Then your PHP query should be:

$id = $_GET['id'];
query("SELECT * FROM products WHERE `id` = '$id' ORDER BY id DESC")

That should do it for you, with a bit of fiddling.

Upvotes: 3

Rajesh
Rajesh

Reputation: 3778

Add an id to tag which will be product id, then pass the product id to jquery's load as below:

$('.div').load("products.php?prodid=" + $(this).attr('id'));

In php, do a $_GET['prodid'] to get the clicked product id, and modify your query to use WHERE clause.

Now, dont expect complete solutions, you can take it off from here.

Upvotes: 2

Related Questions