Question

I’m submitting a form using a call to this JavaScript function:

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();
}

This form opens another form located at /emailfriend/compare. The second form is the one that I am trying to popup in colorbox. The above code works to open the form, but it returns an error $.colorbox is not a function and then opens the target form in the same window/tab.

I am using Drupal 7 with the colorbox module installed and enabled. The colorbox aspect works throughout the site when using it for links, images, etc.

Can anyone tell me what I’m doing wrong?

Answer 1

To avoid collisions with other libraries jQuery is no longer initialised with the $ variable as of Drupal 7 (this is common practice in other system as well, not just Drupal). You need to provide a context for the $ variable, or change $.colorbox to 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);

or:

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();
}

Personally I’d just use the second way as you already have that code written out 🙂