drupal 7 阻止 jquery ajax 调用工作答案

【问题标题】：drupal 7 prevents jquery ajax call from workingdrupal 7 阻止 jquery ajax 调用工作
【发布时间】：2012-09-27 18:52:51
【问题描述】：

我有一些教科书般的简单 jquery 代码，可以进行 ajax 调用并将结果写入网页。它可以独立工作，但在包含在 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>

如果我把它放在常规网页中，会发生以下情况：

我点击了 ID 为“carrotlink”的链接。
我收到“正在启动 ajax 调用”的警报，紧接着是“ajax 调用完成”。
片刻之后，我收到“开始 ajax 回调”和“ajax 回调完成”的警报。
ID 为“ccbuy”的 div 淡出并随着新内容淡入。

当我在 drupal 页面中包含此代码时，单击链接会显示“正在启动 ajax 调用”和“ajax 调用完成”警报，但我从未收到回调警报，并且 div 从未更改。

我花了几个小时试图调试这个，导致上面的简化情况。显然我的 jquery 正在运行，目标链接正在按预期进行更改，并且当我单击它时会调用预期的函数。 ajax 调用只是没有发生。为什么会这样？

PS - 我知道 drupal 有自己的方法通过 ajax 和 drupal_add_js() 替换文本。但是我已经编写了我试图将其用作独立网站的一部分的功能，我宁愿将它们包含在 drupal 页面中，也不愿重新实现所有内容。而且看起来离工作很近了！

【问题讨论】：

标签： jquery ajax drupal

【解决方案1】：

您可能只是缺少行为包装器。尝试将文本包装在行为和行为附加代码中：

(function ($) {
  Drupal.behaviors.ajax_example = {
    attach:function (context) {

      // If the site name is present set it to the username.
      if ($('#site-name', context).length) {
        $.ajax({
          url: '/ajax/username',
          success: function(data) {

            // Change site name to current user name.
            $('#site-name a span').html(data + '.com');
         }
        });
      }
    }
  }
})(jQuery);

我为我的公司博客写了一篇关于在 Drupal 6 和 7 中执行 ajax 的完整博文，这可能也会有所帮助：http://clikfocus.com/blog/simple-ajax-example-drupal-6-and-7

【讨论】：