Help creating an ajax method to add to basket - php

Question

I have the following code that I want to turn into a silent ajax function so the page does not need to refresh, when a user adds a product the basket.
Currently I have the following code,
PHP
function showProduct($productId)
{
if (!$productId > 0)
{
redirect('home');
}
$this->load->model('Product_model');
$this->load->model('Checkout_model');
$this->data['items'] = $this->Checkout_model->GetProducts();
// Check to see if the Add To Bag button has been clicked.
if ($this->input->post('btnAddToBag'))
{
$derivativeId = $this->input->post('selDerivative-1');
$quantity = $this->input->post('selQuantity');
$derivative = $this->Product_model->GetProducts(array('pdId' => $derivativeId), 'small');
// Add item to shopping bag.
$attributes = $this->Product_model->GetProductDerivatives(array('pdId' => $derivativeId));
$this->Checkout_model->AddProduct($derivative, $attributes, $quantity);
$this->data['message'] = 'Item added to Shopping Bag.';
// Update Delivery Price
$this->Checkout_model->updateDelivery(49);
//get the bag details
}
$this->data["product_details"] = $this->Product_model->GetProducts(array('productId' => $productId, 'pdOrdering' => 1), 'detail');
$this->data['product_images'] = $this->Product_model->GetProductImages(array('productId' => $productId, 'ipPosition' => 'detail'));
//send the new filename to the view
//die(print_r($this->data['product_images']));
//die(print_r($this->data['sliderUrl']));
// Retrieve images for initial derivative.
$this->load->model('Attribute_model');
$this->data['derivative_images'] = $this->Attribute_model->GetAttributeValues(array('pdavProductDerivativeId' => $this->data["product_details"]->pdId), 'small', TRUE);;
$derivatives = $this->Product_model->GetProductDerivatives(array('pdProductId' => $productId));
$this->data["product_derivatives"] = $derivatives['derivatives'];
$this->data["product_attribute_names"] = $derivatives['attributeNames'];
// Retrieve details of this range.
$subRangeId = $this->data["product_details"]->productRangeId;
$this->data["sub_range_details"] = $this->Range_model->GetRanges(array('range.rangeId' => $subRangeId));
$rangeId = $this->data["sub_range_details"]->rangeParentId;
$this->data['active_menu_item'] = "subrange";
if ($rangeId == 0)
{
$rangeId = $subRangeId;
$this->data['active_menu_item'] = "full";
}
$this->data["range_details"] = $this->Range_model->GetRanges(array('range.rangeId' => $rangeId, 'range.rangeParentId' => 0), 'navigation');
if ($rangeId != $subRangeId)
$this->template->set_breadcrumb($this->data["range_details"]->rangeTitle, $this->data["range_details"]->rangePath);
//$this->data["rangePath"] = $this->uri->segment(1).'/';
$this->data["rangeId"] = $rangeId;
$this->data["subRangeId"] = $subRangeId;
// Retrieve list of sub ranges in this range.
$this->data["sub_ranges"] = $this->Range_model->GetRanges(array('range.rangeParentId' => $rangeId));
$this->data["individual_products"] = $this->Product_model->GetProducts(array('psiParentId' => $productId), 'small');
$this->data["related_products"] = $this->Product_model->GetRelatedProducts(array('product_related.prProductId' => $productId, 'ordering' => 'productActualPrice'), 'small');
$this->data['bestsellers'] = $this->Product_model->GetProducts(array('productBestSeller' => '1', 'range.rangeParentId' => $rangeId, 'ordering' => 'range.rangeOrder'), 'small');
$this->data["multibuy"] = $this->Product_model->GetProducts(array('psi.psiChildId' => $productId, 'productSavingType' => 'multi-buy'));
//$this->load->view('collection', $data);
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
$this->template
->build('product/quickview', $this->data); // views/product/product.php
}else{
$this->template
->set_layout('default') // application/views/layouts/default.php
->title(($this->data["product_details"]->productMetadataTitle != '' ? $this->data["product_details"]->productMetadataTitle : $this->data["product_details"]->productTitle))
->set_metadata('keywords', $this->data["product_details"]->productMetadataKeywords, 'meta')
->set_metadata('description', ($this->data["product_details"]->productMetadataDescription != '' ? $this->data["product_details"]->productMetadataDescription : $this->data["product_details"]->productShortDesc), 'meta')
->set_metadata('', site_url('assets/js/product.js'), 'js')
->set_metadata('', site_url('assets/js/jquery.nivo.slider.js'), 'js')
->set_metadata('', site_url('assets/js/slider.js'), 'js')
->set_partial('left-nav', 'blocks/ranges_sub_menu') // application/views/blocks/ranges_sub_menu.php
->set_breadcrumb($this->data["sub_range_details"]->rangeTitle, $this->data["sub_range_details"]->fullRangePath)
->set_breadcrumb($this->data["product_details"]->productTitle, $this->data["product_details"]->fullProductPath)
->build('product/product', $this->data); // views/product/product.php
}
}
HTML FORM
<?php echo form_open(current_url(), array('id' => 'frmProducts'), array('submitted' => '1')); ?>
<div class="formRow">
<label for="rattanType"><?php echo $product_attribute_names; ?> </label><br />
<?php
$options = array();
foreach ($product_derivatives as $derivative) :
$options[$derivative['derivativeId']] = $derivative['attributeValues'];
endforeach;
?>
<?php echo form_dropdown('selDerivative-1', $options, $product_details->pdId, 'class="select clear" id="selDerivative-1"'); ?>
</div>
<?php if (count($individual_products) > 0) : ?>
<div class="formRow">
<label for="itemType">Item</label><br />
<select class="select clear" id="selURL-1" name="selURL-1">
<option value="<?php echo current_url(); ?>">Full Set</option>
<?php foreach ($individual_products as $product) : ?>
<option value="<?php echo site_url($product->fullProductPath); ?>"><?php echo $product->productTitle; ?> - £<?php echo ($product->productSavingType != 'none' ? $product->productSavingPrice : $product->productPrice); ?></option>
<?php endforeach; ?>
</select>
<input id="btnGo-1" name="btnGo-1" type="submit" value="GO" />
</div>
<?php endif; ?>
<div class="formRow">
<label for="addQty">Quantity</label><br />
<?php
$options = array();
for ($i = 1; $i < 10; $i++) :
$options[$i] = $i;
endfor;
?>
<?php echo form_dropdown('selQuantity', $options, '1', 'class="small select clear"'); ?>
</div>
<input type="submit" value="add to bag" name="btnAddToBag" id="btnAddToBag" />
<?php echo form_close(); ?>
// Reset action of form when add to bag button is clicked.
$("#btnAddToBag").click(function () {
$("#frmProducts").attr("action","<?php echo current_url(); ?>");
});
How can I change this code that it makes an ajax request and updates the cart without refreshing the page?

Answer 1

You need to split off your basket display into another file so that you can use:
$.load()
Example basic usage:
$('#ShoppingCart').load('Cart.php', function() {
alert('Load was performed.');
});
<div id="ShoppingCart"> </div>
Or a little more like youve currently got it set up:
$("#btnAddToBag").click(function () {
$('#ShoppingCart').load('Cart.php', function() {
alert('Load was performed.');
});
});
Edit:
Re-reading your post, do you not want the cart to update atall?
In that case you would need to use $.post()
See: http://api.jquery.com/jQuery.post/

Answer 2

I have already answered a question for JSP/SERVLET here this one should work by changing the URL to a PHP page...
You need to make an XML Http request to the Servlet for that you need to make a XML Http object in the javascript in your HTML/PHP page
var myxmlhttpobj=new GetXmlHttpObject();
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
Now you need to make a request to the PHP from the javascript
var url="urlofPHPpage";
var para="parmeter1=value1&parameter2=valu2;
myxmlhttpobj.open("POST",url,true);
myxmlhttpobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myxmlhttpobj.setRequestHeader("Content-length", para.length);
myxmlhttpobj.setRequestHeader("Connection", "close");
myxmlhttpobj.onreadystatechange=ajaxComplete;
myxmlhttpobj.send(para);
At the PHP page you need to process the result and sent it back as string:
When the request comes back the myxmlhttpobj.onreadystatechange=ajaxComplete; will be called
function ajaxComplete(){
if(myxmlhttpobj.readyState==4){
///Display the result on the HTML/PHP Page BASKET
}
}
That should help...
Also have a look at jQuery Ajax API.