Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 27
  1. #1
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Tag, suche schon seit einigen Tagen nach einem passenden Script und bin heute somit hier im JS Forum angekommen, also erstmal "Hallo!".

    Ich hatte mit diesem Begriff im Titel schon die Suche benutzt und auch in der JS Suchmaschine geschaut, jedoch nichts gefunden. Ein Problem ist auch daß Ich ggf. nicht den richtigen Begriff nutze/kenne.

    Ich suche ein Script welches einen "Ajax Ladevorgang" simuliert. Das heißt, es gibt einen Button welcher bei Klick ein typisches Ajax Loading Gif startet und mit einer Verzögerung von 2 bis 4 Sekunden nach dem Anzeigen des Bildes einen Text darstellt. Es gibt ja "echte Ajax Scripts" die genauso arbeiten und aus einer externen Datei, z.B. HTML, dann diesen Inhalt nach dem Laden anzeigen.

    Das ist somit nicht notwendig, hier soll es nur der Effekt sein, d.h. der Text oder Inhalt der nach dem Laden angezeigt werden soll, befindet sich auf der gleichen Seite die in HTML geschrieben ist.

    Rein vom "Aussehen her" sollte es somit dann so wie dieses Script hier:

    http://www.electrictoolbox.com/load-...loading-image/


    Es muß somit nichts aufwendiges sein.

    Vielen Dank schon einmal im voraus!

    P.S.: So gut wie keine Ahnung von Javascript Coding direkt, leider.

  2. #2
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Wie wäre es mit der Suche nach einem Ladebalken?
    javascript+ladebalken - Google-Suche

  3. #3
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Vielen Dank für die Antwort. Weiß jedoch nicht ob das das ist was Ich suche. Habe durch die Googlesuche diesen Thread gefunden:

    http://forum.jswelt.de/javascript/34270-ladebalken.html (Ladebalken)

    Nur wenn Ich es richtig verstehe, generiert das Script auch den Balken, dieses sollte jedoch einfach ein gif sein, siehe www.ajaxload.info.

    Es muß demnach nur ein Script sein was:

    1. Einen Button anzeigt und einen festen Standartext (z.B. Klicke auf Button um Text zu zeigen)
    2. Bei Klick auf den Button dieses gif lädt und 2 bis 4 Sekunden anzeigt
    3. Danach dort wo das gif sich befand einen weiteren Text anzeigt (der sich in einen anderen div befindet?) und das gif verschwinden läßt

    Ist das das gleiche? Erneut vielen Dank im voraus!
    Geändert von noidea001 (21-02-2010 um 16:45 Uhr)

  4. #4
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Dann brauchst du halt ein animiertes GIF. Außerdem die Funktionen "Set-Timeout":
    http://de.selfhtml.org/javascript/ob...tm#set_timeout
    Den Eventhandler onclick:
    http://de.selfhtml.org/javascript/sp...er.htm#onclick
    Und du musst den Inhalt des DIVs verändern:
    http://de.selfhtml.org/javascript/ob...htm#inner_html
    Sowie, um das DIV ein- und auszublenden
    document.getElementById('xyId').style.display="block"; //wird angezeigt
    oder aber
    document.getElementById('xyId').style.display="none"; //wird nicht angezeigt

    Versuch mal damit die Funktion zu erstellen, bei Fragen dazu greifst du wieder auf das Forum zurück.

  5. #5
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Okay, erneut vielen Dank! Damit Ich es auch verstehe, habe nämlich bei einigen Punkten keine genaue Ahnung wie das einzubauen, stelle Ich es mal vor...denn so funktioniert es schon mal im Ansatz ganz gut.

    Ich nehme also dieses Script aber statt dem Text "Anderer Text" baue Ich dort ein Bildbutton ein:

    Code:
    <script type="text/javascript">
    var Neu = "neuer Antwort <b>fetter<\/b> Text";
    function Aendern () {
      document.all.meinAbsatz.innerHTML = Neu;
    }
    </script>
    
    <a href="javascript:Aendern()"><img src="button.gif"/></a>
    <p id="meinAbsatz">Standard-Text</p>
    Das Ergebnis ist dann das bei Klick auf den Button, dartunter der Standard-Text mit dem neuen ersetzt wird, das ist schonmal perfekt

    Okay, nur habe Ich jetzt meine Probleme dieses "setTimeout" oben in das Script einzubauen, wo muß Ich das einsetzen?

    Und ganz wichtig, wie baue Ich dann dort das Lade-Gif ein und wie stelle Ich die Funktion richtig ein, damit es nur 2 Sekunden zwischendurch das gif anzeigt und dann den "neuer Antwort <b>fetter<\/b>Text" anzeigt und nicht wie im Beispiel dann ein Alert-Window öffnet und so weiter. Dann halt einfach nur den neuen Text anzeigt???

    Wie gesagt, habe zuvor noch nichts direkt in JS geschrieben, wenn dann nur Scripts die schon funktionierten eingebaut oder minimale Änderungen gemacht wie z.B. "10000 ms" auf "2000 ms" umstellen und so weiter.

  6. #6
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    "var Neu" solltest du in die Funktion mit einbauen, da es sonst ein globale Variable ist die auch in anderen Funktionen bestand hat.

    z. B.
    Code:
    var Neu='ABC';
    function eins() {
      alert(Neu);
    }
    function zwei() {
      var Neu='EFG';
    }
    
    <a href="javascript:eins();">klick</a><br />
    <a href="javascript:zwei();">klick</a><br />
    <a href="javascript:eins();">klick</a>
    Nun zu der Grafik:
    Aus
    Code:
    <a href="javascript:Aendern()"><img src="button.gif"/></a>/></a>
    wird
    Code:
    <img src="button.gif" id="imgToChange" onclick="Aendern();" class="pseudoLink" /></a>
    Nun können wir mittels
    Code:
    document.getElementById('imgToChange').src='';
    auf den Inhalt der Grafik zugreifen und diese abändern.
    Den Link-Tag brauchen wir nicht mehr da wir den Event-Handler onclick verwenden.
    Um trotzdem noch eine Veränderung des Mouse-Zeigers wie bei einem Link zu erreichen haben wir die Class "pseudoLink" eingefügt. In einem CSS vermerken wir dazu:
    [code]
    .pseudoLink:hover {
    cursor: pointer;
    }
    Soweit so gut gehen wir den rest an. So wird aus
    Code:
    var Neu = "neuer Antwort <b>fetter<\/b> Text";
    function Aendern () {
      document.all.meinAbsatz.innerHTML = Neu;
    }
    ein
    Code:
    function Aendern () {
      var Neu = "neuer Antwort <b>fetter<\/b> Text";
      document.getElementById('meinAbsatz').innerHTML = Neu;
      with (document.getElementById('imgToChange')) {
        src='ladeBild.gif';
        className='';
    		onclick='';
    	}
    }
    So weit so gut, jetzt soll aber der Text erstmal nicht erscheinen, sondern erst nach einer Extrarunde von 2sek.
    Hierfür lassen wir das Div "meinAbsatz" gänzlich verschwinden:
    Dafür wird aus
    Code:
      document.getElementById('meinAbsatz').innerHTML = Neu;
    ein
    Code:
      document.getElementById('meinAbsatz').style.display = 'none';
    Und wir blenden ihn nach 2 Sekunden wieder ein. hierfür brauchen wir ein timeout:
    Code:
    window.setTimeout("showNewText('"+Neu+"')", 2000);
    Wie man sieht brauchen wir auch noch eine neue Funktion.
    Diese sieht wie folgt aus:
    Code:
    function showNewText(tTs) {
      with(document.getElementById('meinAbsatz')) {
      	innerHTML=tTs;
    		style.display='block';
    	}
    }
    That's it. Hier das ganze nochmal in einem Guss:
    PHP-Code:
    <head>
    <
    script type="text/javascript">
    function 
    Aendern () {
      var 
    Neu "neuer Antwort <b>fetter<\/b> Text";
      
    document.getElementById('meinAbsatz').style.display 'none';
      
    with (document.getElementById('imgToChange')) {
        
    src='ladeBild.gif';
        
    className='';
            
    onclick='';
        }
      
    window.setTimeout("showNewText('"+Neu+"')"2000);
    }
    function 
    showNewText(tTs) {
      
    with(document.getElementById('meinAbsatz')) {
          
    innerHTML=tTs;
            
    style.display='block';
        }
    }
    </script>
    </head>
    <body>
    <img src="button.gif" id="imgToChange" onclick="Aendern();" class="pseudoLink" />
    <p id="meinAbsatz">Standard-Text</p>
    </body> 

  7. #7
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Wow, schon jetzt erstmal danke für die Mühen mir das so im Detail auch zu erklären! Hier kann Ich auch gleich sehen und verstehen, was genau was macht, schonmal danke erneut!

    Werde mich jetzt einmal ran setzen und schauen wie es läuft!!! Ehrlich gesagt noch völlig verwirrend das ganze...
    Geändert von noidea001 (21-02-2010 um 20:00 Uhr)

  8. #8
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Okay, habe das Script nun einmal so eingebaut, und es genauso, ohne Änderungen übernommen. Es entsteht jedoch nun folgendes:

    Der Button erscheint und auch der Text darunter. Wenn man nun aber auf den Button klickt, dann verschwindet der Text unten UND auch der Button(?), dort wo der Button war erscheint nun das ladegif und lädt ohne aufzuhören(?). Dort wo der Text war, ist nichts mehr.

    Eigentlich sollte ja der Button da bleiben wo er ist und statt dem Text dann das Ladegif für 2 Sekunden kommen und dann der neue Text...

    Hier nochmal das Script so wie es bei mir eingebaut ist:

    Code:
    <script type="text/javascript">
    function Aendern () {
      var Neu = "NEUER TEXT";
      document.getElementById('meinAbsatz').style.display = 'none';
      with (document.getElementById('imgToChange')) {
        src='loader.gif';
        className='';
            onclick='';
        }
      window.setTimeout("showNewText('"+Neu+"')", 2000);
    }
    function showNewText(tTs) {
      with(document.getElementById('meinAbsatz')) {
          innerHTML=tTs;
            style.display='block';
        }
    }
    </script>
    
    <img src="button.gif" border="none" id="imgToChange" onclick="Aendern();" class="pseudoLink" />
    
    <p style="margin-bottom:-15px;" id="meinAbsatz">ALTER TEXT</p>
    An dem border="none" für das Bild / Button im IE sollte es ja nicht liegen, hatte es auch schon ohne versucht.


    UPDATE:

    Zur Zeit funktioniert die "Funktion selber" nur wenn der alte und neue Text der gleiche sind. Ansonsten verschwindet der alte Text und kein neuer erscheint. Mit gleichem Text verschwindet der Text für 2 Sekunden und wird dann "wieder eingeblendet"(???).

    - Jedoch wird dort wo der Button war das ladegif angezeigt und "lädt" sozusagen auch noch nachdem die 2 Sekunden vorbei sind. Wie kann man jetzt noch das Script so ändern:

    ...daß das Ladegif nicht dort wo der Button ist angezeigt wird, jedoch dort wo der Text ist und nur für die Zeit von 2 Sekunden angezeigt wird, danach eben der neue Text??? (Alter Text ---> Ladegif für 2 Sekunden ---> Neuer Text)

    - Ein 2. Punkt wäre, wie kann man es so einstellen, daß man nach dem Laden, immer wieder auf den Button klicken kann und es lädt erneut? Jetzt kann man das ja nur wieder wenn man die Seite neu lädt.

    Erneut vielen Dank für die Hilfe!!!
    Geändert von noidea001 (21-02-2010 um 21:43 Uhr)

  9. #9
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Schau mal was ich in dem Post davor geschrieben hatte. Da habe ich ziemlich genau erklärt welche Reihe was macht. Sinn war es nicht das Script einfach zu kopieren sondern sich auch damit zu beschäftigen.
    Ich denke mit der obrigen Beschreibung solltest du in der Lage sein das Bild in den DIV zu legen wo der Text ist. Es ist einfach nur ein kombinieren der oben genannten Möglichkeiten.

  10. #10
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Hallo und danke für die Antwort. Ich hatte aber "nicht nur" kopiert, denn Ich wollte ja im Grunde genommen sehen ob es funktioniert und wie es funktioniert. Daraufhin habe Ich im Endeffekt bemerkt, daß es zur Zeit so funktioniert wie beschrieben.

    Was mich jedoch wundert ist, warum der Text verschwindet wenn es nicht der gleiche Text ist. Es sieht zur Zeit so aus, daß wenn Ich verschiedene alte und neue Texte habe, der alte Text verschwindet und nach den 2 Sekunden laden der neue nicht erscheint.

    Noch mehr wundert mich, daß wenn Ich den gleichen Text für beides nehme, also neuer und alter Text das gleiche, dann verschwindet der Text für die 2 Sekunden und dann erscheint "der neue Text" wieder, aber in diesem Fall eben der gleiche wie der alte, da beide Texte sich ja gleichen.

    Woran kann das liegen?

    Das 2. Problem daß zwischem dem Wechsel von alten und neuen Text das Ladebild genau dort wo der Text sonst ist erscheinen muß ist für mich noch ein Verständnisproblem(?).

    Von der Logik her ist doch dieser container außerhalb des Scripts selber, zur Zeit ist aber diese Funktion "imgToChange" so eingebaut, daß sie dort ansetzt wo der Button sitzt.

    Heißt das im Grunde genommen, daß Ich die id="imgToChange" nur in den container unten einbauen muß???

    Das ist für mich ein Riesenproblem, da Ich nicht verstehe wie Ich "einen solchen Warteeffekt da reinbekomme", eigentlich müßte man doch dann in den Container mit der ID meinAbsatz wo der Text erscheint, einen weiteren div oder img container einbauen, der für die Zwischenzeit, erscheint?

    Nur, benötigt man dazu nicht eine weitere "setTimeout Variable" oder gibt es eine Variable die sagt "während Laden zeige nicht nichts sondern das Ladegif" und dann eine die sagt "laß den Button dort wo er ist und wechsle dort nicht das bild mit "imgToChange"???
    Geändert von noidea001 (22-02-2010 um 12:40 Uhr)

  11. #11
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Ok
    Also was den Text angeht, so denke ich dass da bei dir ein paar Variablen nicht passen. Gehe davon aus, dass das obrige Script nur ein minimalisiertes ist um die Funktion zu verdeutlichen. Das Script in dem das Problem auftritt ist sicherlich ausführlicher. Hier würde beim Firefox ein Blick in die Fehlerkonsole (Strg+Umschalt+J) helfen um ggf. Javascript fehler aufzudecken.

    Was das Ladebild angeht: Anstatt des display.style="none" setzt du erneut auf ein .innerHTML="";
    Als Wert für den innerHTML gibst du den IMG-Tag für das Ladebild an.
    Der Inhalt wird dann nach 2 Sek. durch das neue Bild überschrieben.

  12. #12
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Danke für die Antwort! Mir wird gerade mal bewußt daß Javascript teils wie ein "komprimiertes" html o.ä. funktioniert, heißt die letzte Änderung mit dem innerHtml wird direkt reingeschrieben. Denke mal daß war das Problem mit JS daß Ich mich zuvor gar nicht erst damit versucht habe, denn es ist ellenlang "auf den ersten Blick" komplizierter, aber wie es aussieht sogar weniger komplizierter als html wenn man die Logik verstanden hat.


    Zurück zum Thema:

    Also das mit Text ist für mich eben nicht verständlich, ABER es handelt sich wirklich um kein anderes Script als das obige, an den Javascriptcodes ist nichts verändert worden von mir.

    Da hapert es wieder, da es "mir so vorkommt" als ob das Script es verlangt, daß beide Texte die gleichen sind, ansonsten sagt es nein und zeigt nichts an, denn der neue gleiche Text scheint ja auch der neue Text zu sein, denn mit anderem neuen Text wird ja nichts angezeigt(?)

    UPDATE: Sind non breaking spaces a la "&nbsp;Text" dort wo die beiden Texte stehen ggf. das Problem???

    Werde mich jetzt nochmal ransetzen an das Problem mit dem Ladegif und berichten wie es klappt!

  13. #13
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Verschiedene Texte sind auf keinen Fall der Grund für den Abbruch. Die non breaking spaces eigentlich auch nicht.
    Hier wäre es ganz gut, wenn du uns die Texte dann mal im Klartext zeigst, da könnte man dann sicherlich die Fehlerquelle sehen.

  14. #14
    noidea001 ist offline Mitglied
    registriert
    21-02-2010
    Beiträge
    27

    Thumbs up AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Okay, super!

    Fasse Ich es nochmal zusammen, kann ja sein, daß es andere Newbies2JS gibt, die das auch hinbekommen wollen...

    Ich habe also den Code

    Code:
    document.getElementById('meinAbsatz').style.display = 'none';
    gegen den folgenden ersetzt....

    Code:
    document.getElementById('meinAbsatz').innerHTML="";
    Dann ergab sich jedoch erstes Problem, wenn Ich nur den Pfad zum Bild eingetragen habe, erschien dort wo das Bild sein sollte, ein Text mit dem Pfad. Aber es klappte schon mal im Ansatz. Danach habe Ich dann den img Tag herumgesetzt, natürlich wie man es sonst in html macht mit " " Klammern um den Pfad drum herum, heißt

    Code:
    document.getElementById('meinAbsatz').innerHTML="<img src="bild.gif"/>";
    und es kam sofort ein JS Fehler, es tat sich gar nichts mehr.

    Da Ich das jedoch "irgendwie schon wußte, Ich hatte es mal zuvor gesehen", hatte Ich dann die " " Klammern um den Pfad mit ' ' ersetzt und die Sache funktioniert.

    Code:
    document.getElementById('meinAbsatz').innerHTML="<img src='bild.gif'/>";
    So, aber da es jetzt klappt, sollte man doch eingentlich den Code "imgToChange" wieder herausnehmen können, da ja der Button bleiben soll wie er ist???

    Code:
    with (document.getElementById('imgToChange')) {
        src='loader.gif';
    Man könnte diesen jedoch drin lassen um nach dem Klick einen Button anzuzeigen der "Button wurde gedrückt" anzeigt. Das wäre eine Lösung, also kann man es erstmal drin lassen!

    So, das letzte Problem (abgesehen vom komischen Textproblem, daß nur wenn gleiche Texte genutzt werden, auch der neue Text angezeigt wird) wie sieht es nun aber damit aus, daß man nachdem man den Button geklickt hat und alles richtig geladen hat, den Button nochmal klicken kann und es lädt noch einmal???

    "Von der Logik" her müßte man ja eigentlich nur ein "Repeat Loading oder Switch etc." einbauen, denn jetzt tut sich ja gar nichts beim erneuten Klicken auf den Button...
    Geändert von noidea001 (22-02-2010 um 13:45 Uhr)

  15. #15
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Suche Dummy Ajax Loader / Ajax Style Ladevorgang

    Gratuliere hast du gut hinbekommen.
    Was den Button angeht, so musst du aus:
    Code:
      with (document.getElementById('imgToChange')) {
        src='loader.gif';
        className='';
            onclick='';
        }
    das onclick=''; entfernen.
    Also:
    Code:
      with (document.getElementById('imgToChange')) {
        src='loader.gif';
        className='';
        }
    Jetzt solltest du auch beim erneuten Klick auf den Button das Resultat sehen.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Ajax Suche verschönern
    Von schischi im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 15-04-2009, 17:30
  2. DIV mittels JS immer an Browser-Top ausrichten ?!
    Von flashfreak im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 11-04-2007, 09:05
  3. Suche ajax script
    Von ambience im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 08-01-2007, 21:44

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •