JQuery not replacing content after AJAX GET call (PHP) - php

Question

Once change INPUT value, content is replaced with a spinner and "Please Wait..." message, and once get response from GET I want to replace the spinner / message with new HTML returned however the new HTML returned is not replacing spinner / message.
The (dynamic PHP) HTML is below followed.
<script type="text/javascript">
$(document).ready( function() {
$( '#submit' ).click( function( e ) {
e.preventDefault();
});
});
</script>
<script type="text/javascript">
$(document).ready( function() {
$( '.basket-item' ).children( 0 ).children( 1 ).change( function( e ) {
e.preventDefault();
var q = $( this ).val();
var id = $( this ).parent().children( 0 ).val();
var elem = $( this ); // var content = elem.parent().parent().parent().html();
elem.parent().parent().parent().html( '<div class="basket-item item-border" style="width:896px;text-align:center;"><p class="para"><img src="<?php echo $this -> get( '__baseuri' ); ?>/media/images/spinner.gif" />Please wait...</p></div>' );
var url = '<?php echo $this -> get( '__baseuri' ); ?>shop/adjust/' + id + '/?quantity=' + q;
$.get( url, function( data ) {
elem.parent().parent().parent().html( data );
});
});
});
</script>
<h1>Shopping Basket</h1>
<div>
<div class="basket-item" style="width:512px;text-align:left;"><p>Product / Item</p></div>
<div class="basket-item"><p>Quantity</p></div>
<div class="basket-item"><p>Price £</p></div>
<div class="basket-item"><p>Total £</p></div>
</div>
<?php if( $this -> has( 'records' ) ): ?>
<form
method="post"
action="#"
accept-charset="utf-8">
<?php foreach( $this -> get( 'records' ) as $record ): ?>
<div>
<div class="basket-item item-border" style="width:512px;text-align:left;">
<p class="para">
<img
width="48"
height="48"
alt="<?php echo $record -> get( 'name' ); ?> (£<?php echo $record -> get( 'price' ); ?>)"
src="<?php echo $this -> get( '__baseuri' ); ?>media/images/products/generic/<?php echo $record -> get( 'image' ); ?>.jpg" />
<?php echo $record -> get( 'name' ); ?></p>
</div>
<div class="basket-item item-border">
<p>
<input type="hidden" name="product" value="<?php echo $record -> get( 'tainted' ); ?>" />
<input type="text" name="quantity" size="3" maxlength="3" value="<?php echo $record -> get( 'quantity' ); ?>" />
</p>
</div>
<div class="basket-item item-border"><p><?php echo $record -> get( 'price' ); ?></p></div>
<div class="basket-item item-border"><p> </p></div>
</div>
<?php endforeach; ?><div style="clear:both;"></div>
<div>
<div class="basket-item item-border" style="width:768px;text-align:right;"><p>Grant Total £ </p></div>
<div class="basket-item item-border" style="width:128px;text-align:center;"><p>14.91</p></div>
</div>
<div>
<div style="margin:0%;padding:16px 0%;width:896px;text-align:left;"><p>
<input id="submit" type="submit" value="Checkout&nbsp>>" />
</p></div>
</div>
</form>
<?php else: ?>
<div>
<div class="basket-item" style="width:896px;text-align:center;"><p>Please add one or more items to your shopping basket.</p></div>
</div>
<?php endif; ?>

Answer 1

Your url is not constructed correctly.
var url = '<?php echo $this -> get( '__baseuri' ); ?>shop/adjust/' + id + '/?quantity=' + q;
Probably needs to be.
var base_uri = "<?php echo $this->get('__baseuri') ?>";
var url = base_uri+'shop/adjust/' + id + '/?quantity=' + q;
The URL is quite acceptable and proper once parsed by server so no issues there, also the server returns content as expected the issue is client side only.