jQuery Colorbox - Drupal Javascript

DarkLight posted this at 16:03 — 30th March 2010.

Joined: Oct 2007

Hey guys. Long time since I've posted here, but I've finally found something to post about. I am trying to integrate the jQuery Colorbox plugin into my Drupal site (which i've done and works great) but I cannot find a way to load the javascript on the Drupal page being displayed in the Dialog. So the dialog is displaying the html/css, but not the javascript, with me?

I really need advice on this. Thanks in advance.

All the best news here: https://newsbotnet.com

JeevesBond posted this at 12:00 — 1st April 2010.

He has: 3,956 posts

Joined: Jun 2002

Hi, good to see you around the place again.

Think I understand what you're getting at, have you got an example page though? It's nearly impossible to debug this kind of stuff without the HTML/Javascript concerned.

By the way, have you seen the alpha of the up-coming Drupal 7? It's rather nice.

a Padded Cell our articles site!

DarkLight posted this at 14:53 — 1st April 2010.

He has: 287 posts

Joined: Oct 2007

Hey Thanks. And yeah, the Drupal7 looks amazing. I have it installed on a DEV Server. It's already pretty stable, too. Admin looks very clean, and it has built- in EVERYTHING

Pretty much any page on my site will work as an example, but here's the DEV page... Click "Dev-TWF" link... It will try to load a page on which there's supposed to be JavaScript, but although the page renders perfectly, the JS does not.

http://www.coldcast.co.uk/page/general-development

All the best news here: https://newsbotnet.com

webwiz posted this at 16:50 — 6th April 2010.

He has: 629 posts

Joined: May 2007

I'm not seeing any obvious errors, nor a link in that page that suggests it would open a lightbox, so am a bit confused as to what you expect. I am seeing four minified scripts on that page - all seem to have the correct MIME type despite the odd file names...

FWIW the id="announcement" appears three times on that page. Dunno if this is related.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

DarkLight posted this at 21:26 — 6th April 2010.

He has: 287 posts

Joined: Oct 2007

Hey, yeah don't worry about the announcement ID. That page is a test page. Also, the scripts are compressed so they have a generated filename. The dialog loads as expected, but doesn't load the required script into the dialog content.

All the best news here: https://newsbotnet.com

JeevesBond posted this at 15:38 — 10th April 2010.

He has: 3,956 posts

Joined: Jun 2002

Sorry for not replying to this sooner.

The problem is that Fivestar is being loaded into the page after Javascript behaviours have been attached to elements, which happens immediately after the page is loaded.

If you click your test 'Dev - TWF' link then open a Javascript console and type Drupal.attacheBehaviors();, you'll see Fivestar starts working.

Do you know of a way to get some Javascript to run after Colorbox has finished loading a page, try looking at the Colorbox API docs (if there are any).

a Padded Cell our articles site!

DarkLight posted this at 21:49 — 13th April 2010.

He has: 287 posts

Joined: Oct 2007

OMG JeevesBond, ur a star m8!

onComplete:function(){
Drupal.attachBehaviors();
}

I used this, and it worked like a charm. Thanks a bunch

DarkLight posted this at 22:21 — 13th April 2010.

He has: 287 posts

Joined: Oct 2007

Is there a way to do this for AJAX content? Such as Flags and Pagers?

JeevesBond posted this at 01:19 — 15th April 2010.

He has: 3,956 posts

Joined: Jun 2002

Hmmm, Drupal.attachBehaviors should cover all eventualities. Those modules must need some special treatment.

I'm going to need an example page or two to see why they're not working.

a Padded Cell our articles site!

DarkLight posted this at 12:42 — 15th April 2010.

He has: 287 posts

Joined: Oct 2007

Okay sure thing. Try the link again... I've updated it to point to a photo node... If you're logged in, there will be a link underneeth saying "Favourite" which when clicked, should be ajax. You use the same module on this website, it's called Flag.

The problem is that it doesn't use the ajax while in a dialog. Also, the other JS-powered features such as the Show link for Share, Description and Tags doesn't work.

http://www.coldcast.co.uk/page/general-development

Thanks.

All the best news here: https://newsbotnet.com

nicols posted this at 20:24 — 18th May 2010.

They have: 2 posts

Joined: May 2010

Hello,
I have the same problem on my website, I want to open an add node form in Colorbox, but in my node I have a filefield for example, and upload doesn't work.
I've tried Drupal.attachBehaviors but it doesn't work, even the fieldset collapsible effect doesn't work.

I've already forced to modify colorbox.module for loading add node form, code is next :

in colorbox.pages.inc :

function colorbox_form_page($form_id) {
  $GLOBALS['devel_shutdown'] = FALSE; // Prevent devel module from spewing.

  switch ($form_id) {
    case 'contact_mail_page':
      module_load_include('inc', 'contact', 'contact.pages');
      print contact_site_page();
      break;
    default:
	  if(strpos($form_id,'node_form') === false) {
	    $form = drupal_get_form($form_id);
	  }
	  else {
	    // required for Drupal 6
            module_load_include('inc', 'node', 'node.pages'); 
            // maybe add current users info
            global $user;
            // create a blank node
            $node->uid = $user->uid;
            $node->name = (isset($user->name) ? $user->name : '');
            $node->type = str_replace('_node_form','',$form_id);
            
            // Invoke hook_nodapi and hook_node
            node_object_prepare($node);
            // Or you can also use an exiting node, for example
            // $node = node_load(123);
            // and the display the form:
            $form = drupal_get_form($form_id, $node);
	  }
	  
	  if (!empty($form)) {
        print $form;
      }
  }

  exit;
}

in colorbox.module :

function _colorbox_form_page_access($form_id) {
  switch ($form_id) {
    case 'contact_mail_page':
      $access = user_access('access site-wide contact form');
      break;
    case 'user_register':
      $access = user_register_access();
      break;
    case 'user_pass':
    case 'user_login':
    case 'user_login_block':
      $access = user_is_anonymous();
      break;
    default:
      // All other forms get no access.
      $access = !user_is_anonymous();
  }

  return $access;
}

The access is surely not very secured and rights are not verified, but it's just for testing in first time.
And I've added in colorbox.form.js the Drupal.attachBehaviors function in the onComplete callback.

I think I've told everything.

[edit]I think the colorbox open mode is in iframe with forms, and drupal js were not added, so the solution may be around this, but I've no idea to do this.

[edit2]I've tried to add iframe:true in the settings in colorbox.form.js and the form is loaded in iframe what it didn't do before, but it seems the css isn't loaded. I don't know if this help someone, but I tell you (I search my words...)

Sorry for the english, I'm french , but I hope you understand my post, and you can help me
Thanks a lot
Nicolas

DarkLight posted this at 22:14 — 18th May 2010.

He has: 287 posts

Joined: Oct 2007

Hey. This looks like you're using the drupal Module for Colorbox, am I right? If so, I'm not sure of anything with that. I integrated the plugin myself, without a module and I'm nearly certain it works differently.

Good luck, though

All the best news here: https://newsbotnet.com

nicols posted this at 22:49 — 18th May 2010.

They have: 2 posts

Joined: May 2010

Yes, I use Colorbox module, but I've seen the code and it's not really complex, but the problem is that JS for collapse effect and image field in my case, are not loaded.
So, if someone know how I can refresh the drupal js or how I can modify the headers of colorbox iframe in the module, I'll be very happy it's 2 differents solutions, and it's not only about jquery colorbox directly, but my problem seems to come from the same thing, I think.
Thanks anyhow for the precision

brayanaustin posted this at 10:45 — 15th July 2010.

They have: 5 posts

Joined: Jul 2010

The problem is that Five Star will be loaded into the page after the JavaScript behavior has been linked to elements that occur immediately after the page is loaded..

JeevesBond posted this at 03:37 — 16th July 2010.

He has: 3,956 posts

Joined: Jun 2002

Took me a while to work out what was going on here, sorry I never posted the answer!

The issue is that the page being opened includes Javascript files that aren't in the page it's being opened from*. So let's say you're on an article page then open a Create content form in Colourbox, which includes an imagefield, there's no Javascript file include on the article page for imagefield so the form doesn't work correctly.

The way around this should be easy though: find the names of the Javascript files that need to be included in pages loaded by Colourbox -- filefield.js for example -- and add them to every page.

To add some Javascript to every page, in a way that still allows Drupal to merge and compact the files, open template.php in your theme directory, search for preprocess_page, add a call to drupal_add_js() to load the Javascript file and you should end up with something like this in your template.php:

<?php
template_name_preprocess_page(&$variables) {
  drupal_add_js(drupal_get_path('module', 'filefield') . '/filefield.js', 'module', 'header', TRUE);
  $variables['scripts'] = drupal_get_js();
}
?>

If your template.php doesn't have a preprocess_page function included, just copy and paste the one above (making sure to replace 'template_name' with the name of your Drupal template).

* Even if the performance settings compact JS (if I remember correctly).

a Padded Cell our articles site!

Harkin85 posted this at 04:35 — 16th September 2010.

They have: 1 posts

Joined: Sep 2010

I am so lost with JavaScript functions. How do you include "location.href = URL in a JavaScript function?
Plz tell me.
link removed