When Aloha is enabled it is impossible to use Panels IPE. Panels IPE loads fine and I can see buttons like "Add new pane", after clicking on it Panels overlay opens with "Loading..." title and then I get some output on white page, along the lines of...

[ {"command":"settings", "settings":{"basePath":"\u002Fmaga\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"maga", "theme_token":"9EpEMBHlBNaxJUnhjF9eqSa5_uYRFqOw1NixdQZ-45Q"}, "overlay":{"paths":{"admin":"field

This is probably because of ExtJS as noted in readme.txt. So can/should I use jQuery version of Aloha? Should it work? If not, how do you usually deal with this kind of incompabilities in Aloha module? This should not be the first if I understand subtext of readme.txt.

CommentFileSizeAuthor
#10 aloha-remove.png135.82 KBmansspams
#3 aloha-ipe-errors.png112.61 KBmansspams
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

muhleder’s picture

muhleder CreditAttribution: muhleder commented

It *may* be because of ExtJS. Actually we haven't had a single report that turned out to be because of ExtJS yet. Do you have admin module installed?

If you could open the console in Firefox or Chrome and let us know if you see a js error. You should be able to set errors to persist so that you will still be able to see the error on the new page load.

mansspams’s picture

mansspams CreditAttribution: mansspams commented

I opened support request in Panels queue #1593652: Make modal.js more robust, maybe someone will visit this queue and suggest where to look first. Please close it if you feel that it is not needed.

Here are also some errors from watchdog.

Type	page not found
Location	http://localhost/maga/content/panels/ajax/ipe/unlock_ipe/panelizer:node:35
Message	content/panels/ajax/ipe/unlock_ipe/panelizer:node:35

4x this one (same number as panes)

Location	http://localhost/maga/panels/ajax/ipe/select-content/panelizer%3Anode%3A35/heading
Message	Notice: Undefined offset: 1 in panels_renderer_editor->get_category() (line 589 of C:\wamp\www\maga\sites\all\modules\panels\plugins\display_renderers\panels_renderer_editor.class.php).

Location	http://localhost/maga/panels/ajax/ipe/select-content/panelizer%3Anode%3A35/heading
Message	Warning: Invalid argument supplied for foreach() in include() (line 28 of C:\wamp\www\maga\sites\all\modules\panels\templates\panels-add-content-modal.tpl.php).
mansspams’s picture

mansspams CreditAttribution: mansspams commented
FileSize
aloha-ipe-errors.png112.61 KB

I don't have admin module installed.

Attached are errors I noticed in Firebug. Top one is actual error, second one is after page reload and code dump.

It seems that aloha somehow is influencing paths somewhere in ajaxland. It's wild and uneducated guess.

muhleder’s picture

muhleder CreditAttribution: muhleder commented

Is there a stack trace available with that error? Looks like that comes from within jquery so really we'd like to know what called the function where the error happens.

mansspams’s picture

mansspams CreditAttribution: mansspams commented

Im sorry, how do I get stack trace? Im not very familiar with js debug. Should I paste here some more text from what you saw in screenshots or should I add some debug line somewhere in code?

muhleder’s picture

muhleder CreditAttribution: muhleder commented

You should be able to see the stack trace by clicking onto the error, here's a little help page from the ExtJS site.

http://www.sencha.com/learn/debugging-ext-js-applications

mansspams’s picture

mansspams CreditAttribution: mansspams commented
Project: Aloha Editor » Chaos Tool Suite (ctools)
Component: Code » Modal

This could be ctools bug. I finally got that stack trace and did not notice aloha.js in there. But I notice modal.js from ctools, in particular, line 403 which reads

var position = $(parents[i]).css('position');

If I uncomment whole FOR block and modals work as expected. Wonder what in aloha.js would trigger this error.

I will move this to ctools queue and see what folks there has to say.

muhleder’s picture

muhleder CreditAttribution: muhleder commented

It could be that something in ExtJS is messing with javascript prototypes, so the javascript environment isn't what ctools expects.

I think this should probably be back in the aloha queue until we can rule that out.

mansspams’s picture

mansspams CreditAttribution: mansspams commented
Project: Chaos Tool Suite (ctools) » Aloha Editor
Component: Modal » Code

Ok, back and some more info... i think I found immediate problem.

Ctools -dev version modal.js has this FOR block around line 403. Without aloha it iterates 2 times without error, with aloha it iterates 3 times, because third time it runs with "i" value of "remove" (first two times are with values 0 and 1 and produces same correct result).

I noticed that ExtJS added body id, maybe it changes something else in DOM?

mansspams’s picture

mansspams CreditAttribution: mansspams commented
FileSize
aloha-remove.png135.82 KB

This "remove" is not there without Aloha. Now question is - in which module there is a bug? Is this "remove" has a right to exist there? If yes, we should probably move to ctools again.

muhleder’s picture

muhleder CreditAttribution: muhleder commented

My money is on the problem being ExtJS. There is some workaround code in our aloha.js to remove the 'remove' from Array prototypes which ExtJS puts in.

Maybe this isn't being called early enough or the 'remove' is added to another object type. You could try decreasing the weight of aloha module in the system table to try to get this code called before ctools.

    // Workaround for http://drupal.org/node/1404584
    fixExtJsArrayPrototypeOverride: function () {
      if (Array.prototype.remove) {
        delete Array.prototype.remove;
        Ext.applyIf(Array.prototype, {
          remove:function (o) {
            if (!this.indexOf) return this;
            var index = this.indexOf(o);
            if (index != -1) {
              this.splice(index, 1);
            }
            return this;
          }
        });
      }
    },
mansspams’s picture

mansspams CreditAttribution: mansspams commented

Updated hook_install, uninstalled/installed aloha, checked db if weight correct, clear caches, still same problem.

  $weight = db_select('system', 's')
    ->fields('s', array('weight'))
    ->condition('name', 'ctools', '=')
    ->execute()
    ->fetchField();
  db_update('system')
    ->fields(array('weight' => $weight -10))
    ->condition('name', 'aloha', '=')
    ->execute();
muhleder’s picture

muhleder CreditAttribution: muhleder commented

Ok, so the Array prototype now has a method 'remove' due to ExtJs. The ctools js iterates over an array using the for in technique, which is technically incorrect.

http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript

You should be able to change the iteration technique to something more robust and fix this. jQuery.each , or 

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

should work.

Basically ctools js needs to be more robust to deal with the bad practices in ExtJs. The aloha library is looking to switch to the jquery-ui version in June which should also fix this issue.

muhleder’s picture

muhleder CreditAttribution: muhleder commented

Just to clarify this is in the code in ctool's modals.js#403

Summit’s picture

Summit CreditAttribution: Summit commented

Hi,
Having same problems 

[ {"command":"settings", "settings":{"basePath":"\u002Fmaga\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"maga", "theme_token":"9EpEMBHlBNaxJUnhjF9eqSa5_uYRFqOw1NixdQZ-45Q"}, "overlay":{"paths":{"admin":"field

Not only using Panels IPE. But when enabled Aloha I am not able to add content to a panel-page.
The error is than occuring.

greetings, Martijn

mansspams’s picture

mansspams CreditAttribution: mansspams commented
Status: Active » Closed (works as designed)

Try patch over at #1593652: Make modal.js more robust