✔ Problem mit Prototype und der Ajax.updater class

[gehacktes]

Hallo liebe User,

Ich bin neu hier auf der Plattform und wende mich an euch mit einer Denksportaufgabe die es in sich hat.
Problembericht/Fakten:
(1) Habe mir mittels Prototype ein schickes Menü gezaubert, daß wunderbar funktioniert...
soweit so gut... [Source]

document.observe("dom:loaded", function() {
      $("navigation").select("a").invoke("observe", "click", function(event) {
        event.stop();
        this.parentNode.parentNode.select("li").invoke("removeClassName","active");
        this.parentNode.addClassName("active");

(2) Zur weiteren Erklärung benutze ich für den div container content ein animiertes accordion das den inhalt schick darstellt, ebenfalls in einer document.observe("dom:loaded" function.....bis hier her alles super
(3) Um nun meinen Content dynamisch nachzuladen entschied ich mich für die ajax.updater class und um die Animation perfekt zu machen einen globalen handler der den loading spinner zeigt während der request läuft und stoppt wenn der request abgeschlossen ist
[Source] in gänze

document.observe("dom:loaded", function() {
      $("navigation").select("a").invoke("observe", "click", function(event) {
        event.stop();
        this.parentNode.parentNode.select("li").invoke("removeClassName","active");
        this.parentNode.addClassName("active");		
        new Ajax.Updater("content", this.readAttribute("href"),{method: "get",	evalScripts: "true",});
		Ajax.Responders.register({  
    	onCreate: function(){ Element.show("inProgress")},
    	onComplete: function(){Element.hide("inProgress")}
   		});
	});
});

(4) Klappt perfekt ist Cross Browser kompatibel, (Incompetent Browsers like IE7/IE8 can handle them too) und arbeitet den Request perfekt ab und platziert den request in das content div.
(5) MEIN PROBLEM ist:
Content also der Request überschreibt nicht sondern lädt ihn direkt drauf; inseration top oder sonst was will ich net weils ******** aussieht und zwei accordions nicht gleichzeitig laufen können; desweiteren ergibt sich für mich folgende schlussfolgerung******
[1] Entweder ajax.updater dazu bringen, daß er den "alten content" ausblendet und nach dem request einblendet was der request erzeugt hat "neuen content"
Ein sehr ansprechendes Script dazu habe ich schon gefunden, bin aber anscheinend zu blöde dass ding so zu integrieren, dass es funktioniert den gewünschten effekt bringt.
SOURCE

onSuccess: function (transport) {
  var data = transport.responseText;
  new Effect.Fade('content', { afterFinish: function () {
     $('content').update(data);
     new Effect.Appear('content'); 
   });
});

[2] komplett auf nen ajax.request umstellen, würde aber bedeuten daß ich die ganze seite per request lade und nicht nur den content, bisschen blöde weil der gedanke auf meinen flash music player zu verzichten erscheint mir momentan wenig sinnvoll.
[3] Habe schon bereits onLoading / onSuccess ausprobiert klappt auch mit dem ergebnis, dass er den ganzen content ausblendet;
vielleicht übergebe ich auch die falsche anweisung mit "data" dass ich besser deklarieren sollte in der ajax.updater class.

Sinn und Zweck sollte es sein die ajax.updater class so zu pimpen dass mittels scriptaculous und dem fade und appear effect das gewünschte ergebnis erzielt wird.

Vielleicht hat einer von euch ne gute idee auf die ich noch nicht gekommen bin....
Aussagen wie mit JQuery geht´s viel einfacher weil ich per Request den div in das div laden kann helfen mir leider auch nicht weiter, denn das kenn ich schon und ich weiss, dass es wirklich funktioniert....

Leider bin ich nicht so der PROTOTYPE GURU und hoffe ihr habt ne idee was des rätsels lösung ist****?

thx

 

[Parantatatam]

Kannst du deinen Quelltext in die entsprechenden Tags setzen? So sehe ich mir das nicht an und von den Anderen bestimmt auch niemand.

 

[Parantatatam]

Bevor das hier ein Desaster wird:

document.observe("dom:loaded", function() {
    $("navigation").select("a").invoke("observe", "click", function(event) {
        event.stop();
        this.parentNode.parentNode.select("li").invoke("removeClassName","active");
        this.parentNode.addClassName("active");	
        new Ajax.Updater("content", this.readAttribute("href"), {method: "get", evalScripts: "true"});
        Ajax.Responders.register({ 
            onCreate: function(){Element.show("inProgress")},
            onComplete: function(){Element.hide("inProgress")}
        });
    });
});

 

[gehacktes]

Besser so?

 

[Quaese]

Hi,

mal sehen, ob ich dein Problem richtig verstanden habe.

Du könntest das Content-DIV oder ein darin enthaltenes wrapper-Element vor dem Senden des Requests ausfaden. In der callback-Funktion, die nach dem Beenden des Fadens aufgerufen wird, wird der Request angestossen.

In der onComplete-Funktion des Ajax-Updaters wird das Element wieder eingeblendet.

Beispiel:

document.observe("dom:loaded", function() {
  $("inProgress").hide();

  $("navigation").select("a").invoke("observe", "click", function(event) {
    event.stop();

    var _this = this;
    $('content').fade({
      duration: 1.0,
      from: 1,
      to: 0,
      beforeStart: function(){
      	$('inProgress').show();
      },
      afterFinish: function(){
        new Ajax.Updater("content", _this.readAttribute("href"), {
          method: "get",
          evalScripts: "true",
          onComplete: function(){
            $('content').appear({
              duration: 1.0,
              from: 0,
              to: 1,
              afterFinish: function(){
                $('inProgress').hide();
              }
            });
          }
        });
      }
    });

  });
});

Ciao
Quaese

 

[gehacktes]

document.observe("dom:loaded", function() {
  $("inProgress").hide();
 
  $("navigation").select("a").invoke("observe", "click", function(event) {
    event.stop();
 	this.parentNode.parentNode.select("li").invoke("removeClassName","active");
	this.parentNode.addClassName("active");
    var _this = this;
    $('content').fade({
      duration: 1.0,
      from: 1,
      to: 0,
      beforeStart: function(){
        $('inProgress').show();
      },
      afterFinish: function(){
        new Ajax.Updater("content", _this.readAttribute("href"), {
          method: "get",
          evalScripts: "true",
          onComplete: function(){
            $('content').appear({
              duration: 1.0,
              from: 0,
              to: 1,
              afterFinish: function(){
                $('inProgress').hide();
              }
            });
          }
        });
      }
    });
 
  });
});

Hey echt geiles Script sogar mit Animation echt super. Thx

Das Content Override Problem löst es noch nicht denn das accordion, also der content der übergeben wird appeared wieder mit dem alten content und dem request gleichzeitig, aber der Punkt ist es soll nur noch der neue Content reingeladen sein, damit das accordion auch funktioniert, denn dieses ist ebenfalls ne dom:function..

also ähnlich dem was ich mit den links gemacht habe auf den content bezogen. add class name old -->hide old
add class name new -->appear new
THX

 

[Quaese]

Hi,

in meinem Beispiel wird der alte Inhalt durch den neuen überschrieben. Dein Problem kann ich hier nicht nachvollziehen.

Vielleicht wäre es angebracht, das Ganze auf das Notwendigste reduziert online zu stellen, um Hilfswilligen eine Möglichkeit zu bieten, sich das anzusehen. So bleibt es ein Gestochere im Trüben.

Ciao
Quaese