rgtabs & mootools

Hallo zusammen!
Die aktuellen Version von rgtabs(2.2.3) und t3mootools(1.3.0) arbeiten leider nicht zusammen. Mit einer älteren Version der Mootools läuft es aber. Hat jemand eine Idee?

-----------
TYPO3 4.2.6

Hallo,

hast Du inzwischen was heruasgefunden? Ich hab dasselbe Problem und auch in diesem Posting wird das Problem behandelt.

Gruß, Johannes.

Hi Jochla,

wenn du nicht gerade auf die neueste Mootools angewiesen bist, dann probier mal ne ältere Version. Vielleicht klappts ja.

Ciao'
Sefer

Hallo,

das Problem besteht leider immer noch. Aktuelle Version von rgtabs(2.2.3) und t3mootools(1.3.0) produzieren einen Javascript Fehler. Abhilfe schafft derzeit nur eine ältere Version der Mootools.

Grüße

Danke für Eure Antworten.

Ich habe inzwischen t3mootools v.1.2.3 installiert. Damit funktioniert nun rgtabs, aber leider noch nicht rgaccordion: http://t3test.jochla.de/index.php?id=rgaccordion, auch nicht zusammen mit rgtabs.

Wichtig ist auf jeden Fall, dass rgaccordion1.js erst nach der JS Library von t3mmotools eingebunden wird, das habe ich im typo3forum.net gefunden und mit folgendem TypoScript erreicht:

# rgAccordion nach t3mootools einbinden
page.includeCSS.file57 = EXT:rgaccordion/res/rgaccordion1.css
page.15 = HTML
page.15.value = <script type="text/javascript" src="typo3conf/ext/rgaccordion/res/rgaccordion1.js"></script>

Trotzdem funktioniert das ganze noch nicht. Folgenden Javascript-Fehler habe ich ausgemacht:

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 3
Zeichen: 1
Code: 0
URI: http://t3test.jochla.de/typo3conf/ext/rgaccordion/res/rgaccordion1.js

Die Meldung bezieht sich auf diese Zeile:

window.addEvent( 'domready', function() {...

Hat den Fehler schon mal jemand gehabt und konnte diesen auch beheben?

Muss ich vielleicht eine noch ältere Version t3mootools-einbinden? Ich werd's mal testen und wieder berichten.

Bin aber auch für jeden anderen Hinweis dankbar!

Gruß, Johannes.

Ich bin bis zur t3mootols-Version 1.1.0 zurückgegangen - ohne Erfolg! Das Problem bleibt bestehen: rgtabs funktioniert, rgaccordion nicht!

Wer weiss Rat und kann mir weiterhelfen - komme in meinem Projekt einfach nicht weiter und bräuchte wirklich beide Extensions.

Gruß, Johannes.

Hallo,

hoffe es hilft jemandem von euch. Ich habe das meiste des rgtabs-JS auf die neuen mootools-Versionen angepasst. Leider funktioniert es nur, solange man auf AJAX verzichtet. Vielleicht hat jemand die Zeit und Lust den AJAX-Request umzuschreiben..

Viele Gruesse,
MStarr

/res/scripts/rgtabs.js:

/**
 * SimpleTabs - Unobtrusive Tabs with Ajax
 * 
 * Simple and clean Tab plugin for MooTools 1.1
 * including support for Ajax content and various
 * custom Events to customise the appearance.
 * 
 * To use the Ajax feature simply use an anchor
 * with an href attribute as entry. The Ajax will
 * inject the response of this url into the tab.
 * 
 * @example
 * 
 *	var tabs = new SimpleTabs($('tab-element'), {
 * 		entrySelector: 'h2.tab-entry'
 *	});
 * 
 * @version		1.0rc0
 * 
 * @see			Events, Options
 * 
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	2007 Author
 */
var SimpleTabs = new Class({
	Implements: Options,
	/**
	 * Options
	 * 
	 * show: Number, default 0: index for the initial selected tab
	 * entrySelector: String, default ".tab-entry". Selector to find the tab elements under the given parent element
	 * classMenu: String, default "tab-menu". className for the ul that hold the tab items
	 * classWrapper: String, default "tab-wrapper". className for the wrapper that holds the container elements
	 * classContainer:  String, default "tab-container". className for the single container elements
	 * onShow: Event. Fires when a container is shown, arguments: (tabElement, containerElement, tabIndex, tabElementOld, containerElementOld, tabIndexOld)
	 * onHide: Event. Fires when a container is hidden, same arguments
	 * onRequest: Event. Fires when Ajax request starts, same arguments
	 * onComplete: Event. Fires when Ajax request is completed successfully, same arguments
	 * onFailure: Event. Fires when a Ajax request fails, same arguments
	 * getContent: Function. Callback to return the tab content element for an entry element, default is Element::getNext()
	 * 
	 */
	options: {
		show: 0,
		delay:0,
		showMenuBelow:0,
		entrySelector: '.rgtabs-entry',
		classWrapper: 'rgtabs-wrapper',
		classMenu: 'rgtabs-menu',
		classContainer: 'rgtabs-container',
		onShow: function(toggle, container, index) {
			toggle.addClass('rgtabs-selected');
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.addClass('sel');
			});
			container.setStyle('display', '');
		},
		onHide: function(toggle, container, index) {
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.removeClass('sel');
			});
			toggle.removeClass('rgtabs-selected');
			container.setStyle('display', 'none');
		},
		onRequest: function(toggle, container, index) {
			container.addClass('rgtabs-ajax-loading');
		},
		onComplete: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		onFailure: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		getContent: null
	},

	/**
	 * Constructor
	 * 
	 * @param {Element} The parent Element that holds the entry elements
	 * @param {Object} Options
	 */
	initialize: function(el, options) {
		this.setOptions(options);
		this.element = $(el);
		this.current = 0;
		this.selected = null;
		this.build();
		this.loadActive();
		this.prepareTimer(this.options.show+1);
	},

	build: function() {
	/*
	var list = $$('.rgtabswrap');
list.each(function(element) {
element.removeClass("rgtabswrap");
element.style.display="block";
});
*/

		this.entries = [];
		var count =0;
		var count2 =0;
		this.menu = new Element('ul', {'class': this.options.classMenu});
		this.wrapper = new Element('div', {'class': this.options.classWrapper});
		
    this.element.getElements(this.options.entrySelector).each(function(el) {
			count++
		});
		this.count = count;
		
		this.navPrev = new Element('a', {
  				'href': 'javascript:void(0)',
  				'class': 'rgtabs-nav prev',
  				'events': {
					'click': this.moveNav.bindWithEvent(this, 'prev')
  				}
  			}).set('html','&laquo; Previous Page');

		this.navNext = new Element('a', {
  				'href': 'javascript:void(0)',
  				'class': 'rgtabs-nav next',
  				'events': {
					'click': this.moveNav.bindWithEvent(this, 'next')
  				}
  			}).set('html','Next Page &raquo;');
		
		
		this.element.getElements(this.options.entrySelector).each(function(el) {
		  

			if (count2==0) {
        classname="tabfirst";
      } else if (count2+1==count) {
        classname="tablast";
      } else {
        classname="tabmiddle";
      }
      count2++;
			var content = el.href || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
			this.addTab(el.innerHTML, el.title || el.innerHTML, content,classname);
		}, this);
		
		// change position of tabs to below
		if (this.options.showMenuBelow==1) {
			this.menu2=  this.menu.clone();
				this.element.empty().adopt(this.wrapper).adopt(this.menu);
//			this.element.empty().adopt(new Element('div').addClass('topmenu').adopt(this.menu2)).adopt(this.wrapper).adopt(this.menu);
// 			this.element.empty().adopt(this.wrapper).adopt(this.menu).adopt(new Element('div').addClass('rgtabs-pageswrapper').adopt(this.navPrev).adopt(this.navNext));			
		} else {
			this.element.empty().adopt(this.menu).adopt(this.wrapper);
		}

		if (this.entries.length) {
      this.select(this.options.show);
      this.current = this.options.show;
    }
	},
	foo: function(index) {
	 	alert(index);
	},
	/**
	 * Add a new tab at the end of the tab menu
	 * 
	 * @param {String} inner Text
	 * @param {String} Title
	 * @param {Element|String} Content Element or URL for Ajax
	 */
	addTab: function(text, title, content,classname) {
		if ($type(content) == 'string' && !$(content)) var url = content;
		var container = $(content) || new Element('div');
/*
		this.entries.push({
			container: container.setStyle('display', 'none').addClass(this.options.classContainer).inject(this.wrapper),
			toggle: new Element('li').addClass(classname).adopt(new Element('a', {
				href: 'javascript:void(0)',
				title: title,
				events: {
					//mouseover: this.onClick.bindWithEvent(this, [this.entries.length]),
					click: this.onClick.bindWithEvent(this, [this.entries.length])
					
				}
			}).setHTML(text)).inject(this.menu),
			url: url || null
*/
 		var linkElement = new Element('a', {
 				href: 'javascript:void(0)',
 				title: title,
 				events: {
 					click: this.onClick.bindWithEvent(this, [this.entries.length])
 				}
 			});
 		if(typeof Element.setHTML != 'undefined')linkElement.set('html',text);
 		else linkElement.set('html',text);
 		
 		
 		this.entries.push({
 			container: container.setStyle('display', 'none').addClass(this.options.classContainer).inject(this.wrapper),
 			toggle: new Element('li').addClass(classname).adopt(linkElement).inject(this.menu),
 			url: url || null
		});
		return this;
	},

	onClick: function(evt, index) {
		evt.stop();
		this.select(index);
	},

	/**
	 * Needed by navigation prev/next functionality
	 * @author adrian@foeder.de
	 * @see declaration of "this.navPrev" and "this.navNext"
	 */
	moveNav: function(evt, dir) {
		evt.stop();
		var stepDir = ('prev'==dir ? -1 : 1);
		var newStep = 0;

		if (dir=='prev') {
			if (this.selected==0) newStep = this.count-1;
			else newStep= this.selected-1; 		
		} else {
			if (this.selected+1==this.count) newStep = 0;
			else newStep= this.selected+1; 		
		}
		
		this.select(newStep);
	},
	
	/**
	 * Select the tab via tab-index
	 * 
	 * @param {Number} Tab-index
	 */
	select: function(index) {

    if (this.selected === index || !this.entries[index]) return this;
		var entry = this.entries[index];
		var params = [entry.toggle, entry.container, index];
		if (this.selected !== null) {
			var current = this.entries[this.selected];
			if (this.ajax && this.ajax.running) this.ajax.cancel();
			params.concat([current.toggle, current.container, this.selected]);
			this.fireEvent('onHide', [current.toggle, current.container, this.selected]);
		}
		this.fireEvent('onShow', params);
		if (entry.url && !entry.loaded) {
			this.ajax = new Request(entry.url, $merge({
				method: 'get',
				onRequest: this.fireEvent.pass(['onRequest', params], this),
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onSuccess: function(resp) {
					entry.loaded = true;
					entry.container.empty().set('html', resp);
					this.fireEvent('onComplete', params);
				}.bind(this)
			}, this.options.ajaxOptions)).send();
		}
		this.selected = index;

		this.prepareTimer(this.selected+1);
		
		return this;
	},
	
	loadActive: function() {
	  var show = -1;
    
    this.element.getElements('.rgtabs-wrapper .rgtabs-container a[id^="c"]').each(function(anchorid, i) {
        if (window.location.hash.test(anchorid.id)) {
          show = i;
          //alert(i);
        }
    });    
    
    if (show!=-1) {
          this.select(show);
          //alert('2222'+show);    
    }
  },
	prepareTimer: function(index) {
	    if (this.options.delay>0) {
        if (index >=this.count) index = 0;
        this.select.delay(this.options.delay, this,index);
      }
	}  

});

SimpleTabs.implement(new Events, new Options);

Hallo

Hat jemand den Request mal umgeschriben

Könnte das gehen. Ich bin leider eine Niete in JS
Wie kann man denn sowas testen?

if (entry.url && !entry.loaded) {
			this.ajax = new Request($merge({
				onRequest: this.fireEvent.pass(['onRequest', params], this),
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onComplete: function(resp) {
					entry.loaded = true;
					entry.container.empty().set('html',resp);
					this.fireEvent('onComplete', params);
				}.bind(this)
			}, this.options.ajaxOptions)).addEvent('success', function(response, xml) {
				$('update-div').set('html', response);}).send(entry.url);
		}

gruss

Sebastian