0
INPUTの値が変更されると、コンテンツはスピナーと「Please Wait ...」メッセージに置き換えられ、GETから応答を受け取ると、スピナー/メッセージを新しいHTMLが返されましたが、返される新しいHTMLはスピナー/メッセージを置き換えるものではありません。AJAX GETの呼び出し後にJQueryがコンテンツを置き換えない
(動的PHP)HTMLは以下のとおりです。
<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" />
<a href="<?php echo $this -> get('__baseuri'); ?>products/<?php echo $record -> get('tainted'); ?>/"><?php echo $record -> get('name'); ?></a></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 >>" />
</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; ?>
あなたはfirebugやchromeの開発ツールを使って簡単なデバッグを行うことでこの問題を突き止めることができます。あなたのjquery関数は、第三者の目のためにちょっと汚いです。 –
javascriptが幾分汚れているのを知っていますが、この時点でデバッガの問題を理解できません:( – ElizabethQ
'' console.log $ .get'を実行して何が得られるかを確認してください。また、コンソールにエラーが表示されていますか? –