[1.4.x] Tabs disappear when clicked

[espaan]

Just tried Content (4.2.0) so old style module etc with 1.4.x. Most things seem to work perfectly.
Of course layouts can be converted into col-md-x columns instead of the "hard coded" 62-38/etc% column divisions, but that is a small thing.

However the Tabs that are using {formtabbedpanel __title='Content'} is not all ok. There are 3 tabs, when you click one the 2nd the first dissappears, when you click on the 3rd the 2nd also dissappears, so in the end you're left with only the 3rd tab.

The tabs is hidden via jQuery call somehow it seems. Not checked in details where it could come from.

[craigh]

I noticed this in EL also.

[espaan]

Weird, somehow the tab as well as the content div is hidden instead of only the content div not visible.
For the rest all works great. Also page editing and drag/drop of content items (that uses jQuery UI portlet BTW).

[craigh]

@phaidon - could this have something to do with some of the "magic" you added to help jQuery and bootstrap play well together?

[cmfcmf]

Probably related to #1190.

[craigh]

refs 079df47

[cmfcmf]

Random guess: It does not work because jQuery is loaded after prototype:

<script type="text/javascript" src="http://zikula.org/javascript/ajax/proto_scriptaculous.combined.min.js"></script>
<script type="text/javascript" src="http://zikula.org/web/jquery/jquery.min.js"></script>

[espaan]

And it should :-) http://api.jquery.com/jquery.noconflict/#jQuery-noConflict-removeAll
the noconflict is always adviced to load prototype first and then jQ

[craigh]

no it doesn't work.

[craigh]

And it should :-)

but the "fix" checks for jQuery - and now this happens BEFORE jQuery exists.

[craigh]

we need the sorcerer. ping @phaidon PLEASE HELP!

[espaan]

Ah right, that makes it more difficult indeed. mmhh. Then jQuery should be loaded first for the fix, but is adviced to load after prototype in noconflict description..

[craigh]

I wonder if the fix could be extracted from it's current location and loaded later.

[espaan]

In my case jQuery is loaded before prototype, see below. But still the tabs dissappear.

<script type="text/javascript" src="/zk140/web/jquery/jquery.js"></script>
<script type="text/javascript" src="/zk140/javascript/jquery_config.js"></script>
<script type="text/javascript" src="/zk140/web/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/zk140/web/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="/zk140/javascript/ajax/original_uncompressed/prototype.js"></script>
...

[craigh]

I think this is the fix but am sort of clueless on implementation

http://softec.lu/site/DevelopersCorner/BootstrapPrototypeConflict

[espaan]

With

  jQuery('*').on('hide.bs.tab', function( event ) {
    isBootstrapEvent = true;
  });

I added that line to prototype.js (and in development mode) so that is loaded and now it works. Did you do a real re-load for JS ?

[craigh]

and not hide.bs.tabs

I don't see tabs plural in the fix?

[espaan]

No sorry, my bad. You had hide.bs.tab. Updated comment. We were only missing hide.bs.tab is seems in the prototype fix.

So going from (in prototype.js)

var isBootstrapEvent = false;
if (window.jQuery) {  
  jQuery('*').on('hide.bs.dropdown', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.collapse', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.modal', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.popover', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tooltip', function( event ) {
    isBootstrapEvent = true;
  });
}

to

var isBootstrapEvent = false;
if (window.jQuery) {  
  jQuery('*').on('hide.bs.dropdown', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.collapse', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.modal', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.popover', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tooltip', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tab', function( event ) {
    isBootstrapEvent = true;
  });
}

works here. Firefox 35.0.1 on Win7

[espaan]

So also update line 514 in https://github.com/zikula/core/blob/1.4/src/lib/util/JCSSUtil.php#L514
and remove prototype "hack"
JCSSUtil line 514 should be updated

            $scripts = array_merge($jQueryUncompressed, $jQueryUiUncompressed, $prototypeUncompressed, $livepipeUncompressed, array_slice($scripts, 5));

into

            $scripts = array_merge($prototypeUncompressed, $jQueryUncompressed, $jQueryUiUncompressed, $livepipeUncompressed, array_slice($scripts, 5));

[craigh]

closed by #2242