Update Cart With Jquery / Ajax - php

Question

I've just build shopping cart here
The add to cart button work perfectly adding the product to the cart without refreshing the entire page.
My question is, how to make the basket update the content after hit the add to cart link without refresh the pages
I have code to handle adding a product to the cart and to show the cart content.
<?php
if($what=="addtocart")
{
if ($cart)
{
$cart .= ','.$_GET['product_id'];
}
else
{
$cart = $_GET['product_id'];
}
$_SESSION['cart'] = $cart;
}
echo writeShoppingCart();
?>
and here are the writeShoppingCart() function
function writeShoppingCart() {
$cart = $_SESSION['cart'];
if (!$cart) {
return '<p>You have no items in your shopping cart</p>';
} else {
echo "<table class=table cellpadding=5 cellspacing=0 width=87% border=0>";
echo "<tr class=bold>";
echo "<td width=65>ID Product</td>";
echo "<td>Pattern</td>";
echo "<td>Inst Type</td>";
echo "</tr>";
include "config.php";
global $dbhost,$dbusername,$dbpassword;
$id_mysql = mysql_pconnect($dbhost,$dbusername,$dbpassword);
mysql_select_db($dbname, $id_mysql);
$cart = $_SESSION['cart'];
$items = explode(',',$cart);
$contents = array();
foreach ($items as $item) {
$contents[$item] = (isset($contents[$item])) ? $contents[$item] + 1 : 1;
}
foreach ($contents as $id=>$qty) {
$view2 = "SELECT * FROM $table_product WHERE id='$id'";
$result2 = mysql_query($view2);
while
($baris=mysql_fetch_row($result2))
{
echo "<tr>";
echo "<td>$baris[1]</td>";
echo "<td>$baris[2]</td>";
echo "<td>$baris[3]</td>";
echo "</tr>";
}
}
echo "</table>";
echo "<span class=\"go_cart\">» View Complete Basket</span>";
}
}
is there any clue to make the echo writeShoppingCart(); reload after adding a product to the cart?

Answer 1

you forgot to add session_start() after opening your <?php tag
so I think you're referencing an empty variable when you do this: $_SESSION['cart'] = $cart;
$_SESSION['cart'] stays empty
to use the session variable you ALWAYS have to put session_start right at the top of the page;
<?php session_start();
//your stuff here
?>
I just checked your page out now and I noticed you're working within wordpress, wordpress doesn't support using session variables, so you'll have to look for the page in your theme that receives first control, it's usually the header.php inside your theme directory: /yourroot/wp-content/themes/yourthemename/header.php, you'll have to add the code above right at the top of that page.
also: I alerted the resp returned from the "add-link" and it returns an entire webpage, the php script you call should be outside of wordpress, prefereably in a file you access directly, so that when the result is returned you have only the output of the function you're echo-ing
Please comment if you're still having errors
//code to dynamically change item table;
$(document).ready(function(){
$('a#add-link').bind("click", function(event) {
event.preventDefault();
var url = $(this).attr("href");
$.get(url, function (resp) {
jAlert('Product Has Been Added to Shopping Cart');
//to do the following you have to put your shoppingcart table in a div with the id="shoppingcart"
$("#shoppingcart").html(resp)
});
});
});
PS: because I think you'll forget about this since I'm doing all your code for you.
right now your post page: "http://ksul.kittenpile.com/product.php" is return an entire webpage, which you will notice if you add the line alert(resp); above your jAlert() function.
It shouldn't return an entire webpage, so it shouldn't be printed to the browser the same way your other pages are printed! only the result of writeShoppingCart() should be echoed and NOTHING ELSE!