Add Item and stay in current page - php, ajax, jquery - php

Question

I am using google translator, so errors may occur.
My problem: add Item and stay in current page
I tried to use the advice from the link below but I did not succeed :-(
Add Item and stay in current page
Script code:
<?php
if( !defined( 'CUSTOMER_PAGE' ) )
exit;
require_once DIR_SKIN.'_header.php'; // include design of header
?>
<div id="product">
<?php
if( isset( $aData['sName'] ) ){ // displaying product content ?>
<script type="text/javascript">
var sTitle = "<?php echo $aData['sName']; ?>";
var fPrice = Math.abs( "<?php echo $aData['mPrice']; ?>" );
</script><?php
if( isset( $aData['mPrice'] ) || isset( $aData['sAvailable'] ) ){ // displaying box with price, basket and availability - START
echo '<div id="box">';
if( isset( $aData['mPrice'] ) && is_numeric( $aData['mPrice'] ) ){?>
<div id="price"><em><?php echo $lang['Price']; ?>:</em><strong id="priceValue"><?php echo $aData['sPrice']; ?></strong><span><?php echo $config['currency_symbol']; ?></span></div><?php
}
elseif( !empty( $aData['mPrice'] ) ){?>
<div id="noPrice"><?php echo $aData['sPrice']; ?></div><?php
}
if( isset( $aData['sAvailable'] ) ){?>
<div id="available"><?php echo $aData['sAvailable']; ?></div><?php
}
if( isset( $aData['mPrice'] ) && is_numeric( $aData['mPrice'] ) && !empty( $config['basket_page'] ) && isset( $oPage->aPages[$config['basket_page']] ) ){?>
<form action="<?php echo $oPage->aPages[$config['basket_page']]['sLinkName']; ?>" method="post" id="addBasket" class="form">
<fieldset>
<legend><?php echo $lang['Basket_add']; ?></legend>
<input type="hidden" name="iProductAdd" value="<?php echo $aData['iProduct']; ?>" />
<input type="hidden" name="iQuantity" value="1" />
<input type="submit" value="<?php echo $lang['Basket_add']; ?>" class="submit" />
</fieldset>
</form><?php
}
echo '</div>';
} // displaying box with price, basket and availability - END
}
?>
</div>
I've rewritten the code and added it below:
if( isset( $aData['sName'] ) ){ // displaying product content ?>
<script type="text/javascript">
$('#addBasket .submit').click(function() {
var keyValues = {
iProductAdd : $(this).parent().find('input[name="iProductAdd"]').val(),
iQuantity : $(this).parent().find('input[name="iQuantity"]').val()
};
$.post('<?php echo $oPage->aPages[$config['basket_page']]['sLinkName']; ?>', keyValues, function(rsp) {
// make your php script return some xml or json that gives the result
// rsp will be the response
});
return false; // so the page doesn't POST
});
</script>
But still does not work, after clicking the button, the product is added but we do not stay on the same page and go to the basket.
I will be grateful for any help
Adam

Answer 1

Can you try this ?
$('#addBasket .submit').click(function(event) {
event.preventDefault();
var keyValues = {
iProductAdd : $(this).parent().find('input[name="iProductAdd"]').val(),
iQuantity : $(this).parent().find('input[name="iQuantity"]').val()
};
$.post('<?php echo $oPage->aPages[$config['basket_page']]['sLinkName']; ?>', keyValues, function(rsp) {
// make your php script return some xml or json that gives the result
// rsp will be the response
});
return false; // so the page doesn't POST
});

Answer 2

You can use e.preventDefault() instead of return false;
<script type="text/javascript">
$('#addBasket .submit').click(function(e) {
e.preventDefault();
var keyValues = {
iProductAdd : $(this).parent().find('input[name="iProductAdd"]').val(),
iQuantity : $(this).parent().find('input[name="iQuantity"]').val()
};
$.post('<?php echo $oPage->aPages[$config['basket_page']]['sLinkName']; ?>', keyValues, function(rsp) {
// make your php script return some xml or json that gives the result
// rsp will be the response
});
});
Edit 1:
You can do one more thing. Instead of having input type as submit. keep it as button as I noticed you are making JSON manually.
So your input submit can be something like this
<input type="button" value="<?php echo $lang['Basket_add']; ?>" class="submit" />

Answer 3

The event listener is not being added to the button because the button doesn't exist when the script tag is above the form
Either put the script tag after the form or wrap the code in "ready" a call
$(function(){
$('#addBasket .submit').click(function() {
...
})