ウェブサイト: http://mercury.demomycms.co.uk/account.php (アカウント登録タブ)。
私は AJAX ハンドラーを作成しているので、Web サイト用に 1 つの AJAX JavaScript ファイルを作成し、すべての AJAX 呼び出しをそれを介して渡すことができます。
これまでのところ、すべてがうまく機能しています。AJAX 要求を適切なファイルに送信し、データを JSON 形式で受け取ることができますが、ページ上の HTML の更新に関しては問題があります。
IDHTML を配置するオブジェクトの変数を返します。
また、そのオブジェクトに配置する HTML を含む別の変数を返しています。AJAX 呼び出しからのすべてのデータが正常に返されます。ただし、ページの HTML はまったく更新されません。
これは私のコードです:
/**
* $value contains an array of the following
*
* content The HTML code that is replacing the content of the specified div.
* fade Whether to fade out the ID or not before changing the content.
* fadeOut Whether to fade out the div after a certain amount of time.
* function Function to call at the end of the case.
* restore Restore the original content in the div. Only used if fadeOut is set.
* targetId The ID of the target div that is having it's content replaced.
*/
case 'html':
console.log(value);
var $target = $('#' + value.targetId);
var original = '';
if(value.restore) original = $target.html();
if($target.length > 0) {
if(value.fade) {
$target.fadeOut(500);
setTimeout(function() {
$target.html(value.content).fadeIn(500);
}, 510)
} else {
$target.html(value.content);
}
}
if(value.fadeOut > 0) {
setTimeout(function() {
$target.fadeOut(500);
}, value.fadeOut);
}
if(value.fadeOut > 0 && value.restore) {
$target.html(original);
}
if(value.function != false) {
window[value.function]();
}
break;
console.log(value)期待どおりの結果が生成され、正しいIDHTML が返されます。そうconsole.log($target)であれば、長さ 1 の jQuery オブジェクトが返されます。
はfadeOut正常に動作しているので、問題なく操作できることはわかっているのに$target、なぜ HTML を置き換えられないのでしょうか。
ここで jsfiddleを作成しましたが、動作します。
では、なぜ私の AJAX で機能しないのでしょうか?
アップデート
@nrabinowitz のコメントの後、HTML を更新するだけでなく、すべてのコードを削除したところ、機能しました。このコードは機能します：
case 'html':
console.log(value);
var $target = $('#' + value.targetId);
$target.html(value.content);
break;
if else ステートメントで動作を停止する可能性のある原因は何ですか?
更新 2
ケースを分解して再度組み立てると (コピー アンド ペーストなどではなく、元に戻すを使用して、削除を元に戻すだけで) 動作します。コードは私が最初に投稿したものと同じで、突然動作します >.< ... 図に移動します。助けてくれてありがとう。