ajax呼び出しを行い、結果をWebページに書き込む、教科書のように単純なjqueryコードがあります。単独では機能しますが、drupal 7 サイトのページに含まれている場合は機能しません。
コードは、hook_block_view_alter() を使用してページに書き込むカスタム モジュールを介してインクルードされています。ここにあります:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script>
$(document).ready(function(){
$("#carrotlink").click(function(event){
event.preventDefault();
alert("starting ajax call.");
$.ajax({
type: "GET",
url: 'http://my.datasource.page/',
data: "parameter=5",
success: function(data) {
alert('starting ajax callback');
result = "The oracle says: " + data;
jQuery('#ccbuy').fadeOut( function() { jQuery('#ccbuy').html(result); jQuery('#ccbuy').fadeIn(); });
alert('ajax callback complete');
}
});
alert('ajax call complete');
});
});
</script>
これを通常の Web ページに配置すると、次のようになります。
- ID「carrotlink」のリンクをクリックします。
- 「ajax呼び出しを開始しています」というアラートが表示され、その後すぐに「ajax呼び出しが完了しました」というアラートが表示されます。
- しばらくすると、「ajax コールバックを開始しています」と「ajax コールバックが完了しました」というアラートが表示されます。
- ID「ccbuy」の div がフェードアウトし、新しいコンテンツでフェードインします。
このコードを drupal ページに含めると、リンクをクリックすると「ajax 呼び出しを開始しています」と「ajax 呼び出しが完了しました」というアラートが表示されますが、コールバック アラートは表示されず、div も変更されません。
これをデバッグするのに何時間も費やした結果、上記の単純化されたケースになりました。明らかに、私の jquery は機能しており、ターゲット リンクは意図したとおりに変更されており、クリックすると目的の関数が呼び出されます。ajax 呼び出しが行われていません。これはなぜですか?
PS - drupal には ajax と drupal_add_js() を介してテキストを置き換えるための独自のメソッドがあることを知っています。しかし、スタンドアロンの Web サイトの一部として使用しようとしている機能は既に作成しており、すべてを再実装するよりも、それらを drupal ページに含めたいと考えています。そして、それは仕事にとても近いようです!