nested tabs: javascript actions get wrongly executed for children when parents have bound actions

[koopa]

Description

I was experimenting around with lazy loading tabs in a nested tab setup and discovered that for example "tabsactivate" (QTabs_ActivateEvent) gets executed for all child tabs, even if it was bound to the parent tab only.

Fix

Below is a fix that works, but not sure if it's the right way nor the right place to do this.
Please review and share your thoughts.

--- a/includes/base_controls/_actions.inc.php
+++ b/includes/base_controls/_actions.inc.php
@@ -386,8 +386,14 @@
                                }
                        }

-                       return sprintf("qc.pA('%s', '%s', '%s#%s', %s, '%s');",
-                               $objControl->Form->FormId, $objControl->ControlId, get_class($this->objEvent), $this->strId, $this->getActionParameter($objControl), $strWaitIconControlId);
+                       $strCondition = '';
+                       if($objControl instanceof QTabs){
+                               $strCondition = 'if(event.target !== this){ return false; }';
+                       }
+                       $strReturn = sprintf("%s qc.pA('%s', '%s', '%s#%s', %s, '%s');",
+                               $strCondition, $objControl->Form->FormId, $objControl->ControlId, get_class($this->objEvent), $this->strId, $this->getActionParameter($objControl), $strWaitIconControlId);
+                       return $strReturn;
+
                }
        }

Simple test form + tmpl

nested_tab.php:

<?php
    require_once('qcubed.inc.php');
    class NestedTabForm extends QForm {
        /**
         * @var QTabs
         */
        protected $tabs;
        /**
         * @var QPanel
         */
        protected $log;
        /**
         * @var QPanel[]
         */
        protected $panels = [];

        protected function Form_Create() {
            $this->log = new QPanel($this);
            $this->tabs = new QTabs($this);
            $this->tabs->Headers = ['one', 'two'];
            $this->panels[] = $this->CreatePanel("hi", $this->tabs);
            $pnl = new QPanel($this->tabs);
            $pnl->AutoRenderChildren = true;
            $this->panels[] = $pnl;
            $tabs = new QTabs($this->panels[0]);
            $tabs->Headers = ['three', 'four'];
            $this->CreatePanel("aaa2", $tabs);
            $this->CreatePanel("bbb", $tabs);
            $this->tabs->AddAction(new QTabs_ActivateEvent(), new QAjaxAction('tabs_Load'));
        }

        public function CreatePanel($strContent, $objTab){
            $pnl = new QPanel($objTab);
            $pnl->AutoRenderChildren = true;
            $pnlContent = new QPanel($pnl);
            $pnlContent->Text = $strContent;
            return $pnl;
        }

        public function tabs_Load($strForm, $strControl, $strParam){
            /**
             * @var $objControl QTabs
             */
            $objControl = $this->GetControl($strControl);
            if(!$objControl){
                return;
            }
            $this->log->Text = $objControl->SelectedId.' activated';
            if($objControl->Active == 1){
                $pnlParent = $this->GetControl($objControl->SelectedId);
                if(count($pnlParent->GetChildControls()) > 0){
                    return;
                }
                $pnlContent = new QPanel($this->panels[1]);
                $pnlContent->Text = "there ";
                $this->tabs->Refresh();
            }
        }

    }
    NestedTabForm::Run('NestedTabForm', dirname(__FILE__).'/nested_tab.tpl.php');

nested_tab.tpl.php:

<?php $this->RenderBegin() ?>
<?php $this->log->Render(); ?>
<?php $this->tabs->Render(); ?>
<?php $this->RenderEnd() ?>

[spekary]

gets executed for all child tabs, even if it was bound to the parent tab only.

You have opened a big can of worms here. The problem is that the tabsactive event is bubbling up through the parent controls. The parent control is looking for the event, gets it from child controls, and so fires. It may be unexpected in this situation, but it is standard javascript behavior.

To change it could break code, and would be some effort. In other words, there are scenarios where someone wants this behavior. This is a much bigger issue than QTabs.

Possible fixes include:

• Do nothing in the framework. You should set "event.target.id" as the Js Return Parameter of your action so that you can test what was clicked on and determine how to handle it.
• Changing qcubed.js so that the target id of the control that was originally sent the event is always passed back to the event handler, so that you can test it.
• Adding a parameter to QEvent that allows you to turn off bubbling. This would both make sure received bubbled events did not fire an event, and that any time an event fired off an ajax action, the event would no longer bubble to parent objects.

I think for now we leave this alone, and if it becomes a bigger issue we try one or a combination of the above.

Thoughts?

[spekary]

Changing this to feature request since there is a workaround you can do without changing the framework.