I am successfully using Colorbox and the cbox_complete function to perform a few tasks. However im a bit confused as to the reason why this function is being repetitively called once Colorbox is open.

For example a console.log in the file colorbox_style.js such as this:

Drupal.behaviors.initColorboxDefaultStyle = {
  attach: function (context, settings) {
    $(document).bind('cbox_complete', function () { ....
      console.log("REPEAT");

The repeat log will just keep repeating. Does this happen to anyone else?

Files: 
CommentFileSizeAuthor
#5 colobox_javascript_bind_1933956.patch2.92 KBfrjo
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

Status:Active» Closed (works as designed)

The cbox_complete event is fired on each new content loaded in colorbox, thus it should fire more often on a page. Moreover, when new content is loaded, e.g. via ajax, attach behaviors should be applied again. So your code gets executed not only on page load but also on ajax refreshed, e.g. in a colorbox. That's why the colorbox module itself initiates an attachBehaviors on cbox_complete.

To prevent binding multiple times, either use:
- context (will equal document on initial page load and the refreshed part of the page on ajax refreshes (in the case of
colorbox: #cboxLoadedContent)
- or once(): $(document).once('my-identifier').bind(...)

What you said is exactly what I was originally implying sorry my description was a bit vague.
I knew that some sought of context binding or once() method needed to be used, my question was to the module developers as to why it isnt in files /colorbox/styles/default/colorbox_style.js

Colorbox is acting correctly: it should call attachBehaviors on each load of new content. It is the user who should check the context and if it needs to attach behavior to elements in that context.

Category:Support request» Bug report
Issue summary:View changes
Status:Closed (works as designed)» Active

Someone came to me for this issue and I had another look at it. OP (davidd07) is right after all, this is a bug in the colorbox_style.js files in the various themes sub directories. Therefore I re-open this issue and categorize it as a bug.

IMO, all occurrences of:
$(document).bind('some_cbox_event', ...)
should be replaced by:
$(document).once('colorbox_some_cbox_event').bind('some_cbox_event', ...)
I guess, you can also start with checking if context equals document before executing the above statement but that won't probably make the once() redundant.

Version:7.x-2.3» 7.x-2.x-dev
Assigned:Unassigned» frjo
Status:Active» Needs review
StatusFileSize
new2.92 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Please test if this patch improves the situation and don't break anything else.

Status:Needs review» Needs work

+++ b/js/colorbox.js
@@ -17,13 +17,11 @@ Drupal.behaviors.initColorbox = {
+  $(context).bind('cbox_complete', function () {
-  $(document).bind('cbox_complete', function () {

This should become;
$(document).once('colorbox_cbox_complete').bind('cbox_complete', function () {

Notes:
- the cbox_complete (and other) events are triggered on document and thus the bind must be done on document as well. If context does not equal document, you would bind it to just an element on which the event will never be triggered.
- the once() is to assure that we don't bind the same handler twice to document (which is what currently happens, hence the repeated console.log's)
- the id used in once must have a valid class syntax (e.g. no points (.)) and must be unique. So, use:
* your module name to differentiate with other modules.
* the event name to differentiate with other handlers (like cbox_closed) that are bound to document.
* the location (or e..g a name for the intended feature that this handler should accomplish) to differentiate with different handlers for the same event (ther is 1 in colorbox.js and 1 in colorbox_style.js).

E.g. use colorbox_cbox_complete, colorbox_style_cbox_complete, colorbox_style_cbox_load, and colorbox_style_cbox_closed (I assume that only 1 of the colorbox_srtyle.js files will ever be loaded at the same page. If that may not always be the case, also use the sub-directory name in the ids).

I have tested using the $(document).once('colorbox-style-cbox-complete').bind('cbox_complete'… style but then the code simply do not run.

Replacing document with context does work and avoids having the function called more than needed.

Strange,

So:
- $(document).bind(...) as in the current code works.
- $(context).bind(...) as in your proposal works.
- $(document).once(...).bind(...) as in my suggestion does not work (I assume that you mean that the event handler does not run).

Did you try:
- $(context.once(...).bind(...)
or
- if (context === document) { $(context.once(...).bind(...) }

Forget the above, I ran some tests, document cannot receive css classes, so once fails on $(document) as it will fail on $(context) the 1st time that is run (as context will equal document in that case). So the once should be run on another, real, element: document.body

$(document.body).once(...).each(function() {
  $(document).bind(...)
})

I tested this with:
    $(document.body).once('test').each(function() {
      window.alert('binding');
    });

and I only saw the alert once, also after loading images,closing colorbox, reopening it with another image.

BTW: Is there a reason to do the binding outside the attach and thus on file load?

The binding outside the attach was an old mistake, fixed in the patch above.

I will do some more testing in the weekend of this. Thanks for helping making Colorbox better!

Status:Needs work» Fixed

Sorry for my late feedback. I tested with document.body but Colorbox don't work as it should with that solution.

I have committed the patch in #5 since that works in my testing and at least improves the issue.

  • Commit 68d7643 on 7.x-2.x by frjo: Issue #1933956 by frjo | davidd07: Behaviors Attach and cbox_complete.

I remain sceptical about binding cbox_complete events at any level in your dom that get refreshed, but will test the dev version against issue #2012590: attachBehaviors is also called for inline content.

Status:Fixed» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.