如何在 Drupal 7 中为 AJAX 表单提交启动 Colorbox？

Question

我正在使用对这个 JavaScript 函数的调用提交一个表单：

function emailFriend(){
  jQuery("form[name='comparisons']").attr("action", "/emailfriend/compare");
  jQuery("form[name='comparisons']").bind('submit', function() {
    jQuery.get(jQuery("form[name='comparisons']").attr("action"),
    jQuery("form[name='comparisons']").serialize(),
    function(data){                // send to colorbox
      $.colorbox({                 // this is where the error comes from
        html:   data,
        open:   true,
        iframe: true               // use iframe
      });
    },
    "html");
  });
  jQuery("form[name='comparisons']").submit();
}

此表单打开位于 /emailfriend/compare 的另一个表单。第二种形式是我试图在颜色框中弹出的形式。上面的代码可以打开表单，但它会返回错误$.colorbox is not a function，然后在同一窗口/选项卡中打开目标表单。

我正在使用安装并启用了 colorbox 模块的 Drupal 7。当将其用于链接、图像等时，颜色框方面适用于整个网站。

谁能告诉我我做错了什么？

Answer 1

为了避免与其他库的冲突，从 Drupal 7 开始，jQuery 不再使用 $ 变量进行初始化（这在其他系统中也是常见的做法，而不仅仅是 Drupal）。您需要为$ 变量提供上下文，或者将$.colorbox 更改为jQuery.colorbox：

(function($) {
  function emailFriend(){
    $("form[name='comparisons']").attr("action", "/emailfriend/compare");
    $("form[name='comparisons']").bind('submit', function() {
      $.get($("form[name='comparisons']").attr("action"),
      $("form[name='comparisons']").serialize(),
      function(data){                // send to colorbox
        $.colorbox({                 // this is where the error comes from
          html:   data,
          open:   true,
          iframe: true               // use iframe
        });
      },
      "html");
    });
    $("form[name='comparisons']").submit();
  }
})(jQuery);

或：

function emailFriend(){
  jQuery("form[name='comparisons']").attr("action", "/emailfriend/compare");
  jQuery("form[name='comparisons']").bind('submit', function() {
    jQuery.get(jQuery("form[name='comparisons']").attr("action"),
    jQuery("form[name='comparisons']").serialize(),
    function(data){                // send to colorbox
      jQuery.colorbox({                 // this is where the error comes from
        html:   data,
        open:   true,
        iframe: true               // use iframe
      });
    },
    "html");
  });
  jQuery("form[name='comparisons']").submit();
}

就我个人而言，我只会使用第二种方式，因为您已经写出了该代码:-)