Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] "element.dispatchEvent is not a function" in prototype.js, wie lösen?

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    [Erledigt] "element.dispatchEvent is not a function" in prototype.js, wie lösen?

    Hey Jungs,

    habe ein kleines JS Problem. Der genannte Fehler "element.dispatchEvent is not a function" taucht beim Ausführen eines Gliders aus (+glider.js, +effects.js zusammen mit prototype.js).

    Fehler: element.dispatchEvent is not a function
    Quelldatei: localhost/prototype.js
    Zeile: 3972

    Der genaue Code in der Zeile

    Code:
          if (document.createEvent) {
        element.dispatchEvent(event);
      } else {
        element.fireEvent(event.eventType, event);
      }
    Ich habe in anderen Foren bereits gelesen, dass der Fehler öfters in Zusammenhang mit jQuery.js auftaucht und das hier öfters ein Konflict mit prototype.js besteht und man jQuery im noConflict-Mode betreiben müsste. jQuery benutze ich aber nicht, wo kann der Fehler dann also liegen?

    Kleine Info: Der Fehler taucht nur auf, sobald ich den Glider innerhalb einer Seite basierend auf Drupal ausführe. Benutze ich den Glider alleinstehend in einer HTML, dann funktioniert er.

    Könnte es also sein, dass sich js-Dateien von Drupal mit prototype hier in die Haare kriegen? Oder liege ich grundlegend falsch?

    Bin gespannt auf eure Antworten.

    Danke im Voraus,
    Fry

    EDIT: ich sehe gerade, ich habe in Drupal jQuery aktiviert, d.h. wird benutzt (ist standardmäßig aktiviert und kann nicht ausgeschaltet werden. wie löse ich das probelem?

    ich habe jetzt jQuery.noConflict(); in jquery.js an den anfang gepackt. mein glider geht dann. allerdings zieht das neue fehler im gesamten system nach sich.

    Fehler: jQuery is not defined
    Quelldatei: localhost/jquery.js
    Zeile: 1

    Fehler: $ is not defined
    Quelldatei: localhost/drupal.js
    Zeile: 205
    Stichworte: -
  • #2
    Hallo fryswe,
    was heißt "ich habe jetzt jQuery.noConflict(); in jquery.js an den anfang gepackt." genau? Du kannst natürlich jQuery.noConflict() erst aufrufen, nachdem jQuery definiert wurde, also jQuery.js in die Seite eingebunden wurde...

    Wenn jQuery im noConflict()-Modus läuft, musst du außerdem darauf hoffen, dass alle verwendeten Plugins bzw. Scritpe die Drupal einbindet sauber programmiert sind. Wenn dort einfach $ statt jQuery verwenet wird, dann klappt's natürlich nicht....

    Kommentar

    • #3
      also erst mal danke für deine antwort. ich bin nicht 100% fit in der jquery sache, in drupal schon eher. ich hoffe daher, ich verstehe hier nichts falsch.

      auf jeden fall ist jquery ein bestandteil von drupal und wird für mehrere module und funktionen benutzt. von daher ist die jquery.js auch definitiv in die seite eingebunden.

      um meinen glider (der über eine glider.js, effects.js und die prototype.js läuft) zum laufen zu kriegen, habe ich den tipp mit dem noconflict in anderen foren gelesen und das jQuery.noConflict(); naiver weise einfach mal an den anfang der besagten jquery.js gepackt.

      wie bereits erwähnt funktioniert der glider dann, allerdings werden neue fehler laut firefox fehlerkonsole ausgelöst. darunter eben:

      Fehler: jQuery is not defined
      Quelldatei: localhost/jquery.js
      Zeile: 1

      Fehler: $ is not defined
      Quelldatei: localhost/drupal.js
      Zeile: 205

      ich weiß leider nicht, wie ich jetzt weiterverfahren soll.

      deutet der zweite fehler daraufhin, dass in der drupal.js in besagter zeitel ein $ statt iquery verwendet wird und dies das problem ist?

      Zeile 205 der durpal.js sieht wie folgt aus:

      Code:
      // Global Killswitch on the <html> element
if (Drupal.jsEnabled) {
  $(document.documentElement).addClass('js');
}

      Kommentar

      • #4
        Ich weiss nicht welches JS Framework Drupal nutzt.

        Wenn du jQuery im NoConflict Mode nutzen willst musst du folgende vorgehen:

        Code:
        var J = jQuery.noConflict();
        So alle jQuery aufrufe haben nun ein J anstatt dem $ als aufrufenden Namen.
        Ich weiss nicht in wie fern sich da Prototype verhält, falls auch das $ Zeichen genutzt wird, umgehst du das so.

        Oft ist bei jQuery das Problem, dass viele Scripte / Plugins per se einfach das $ Zeichen nutzen, die musst du dann per Hand anpassen.

        Kommentar

        • #5
          ich habe das mit

          Code:
          var J = jQuery.noConflict();
          mal probiert in der jQuery.js

          Wieder ein ähnliches Ergebnis. Mein Glider funktioniert dann, allerdings gibt's neue Fehler laut Konsole.

          Und zwar:

          Code:
          Fehler: jQuery is not defined
Quelldatei: localhost/jquery.js
Zeile: 1
          und

          Code:
          Fehler: $(document.documentElement).addClass is not a function
Quelldatei: localhost/drupal.js
Zeile: 205
          Dieses Mal in Zeile 205 statt "$ is not defined" jetzt eben "$(document.documentElement).addClass is not a function", weiß nicht, ob es da einen nennenswerten Unterschied gibt.

          Soweit ich das hier sehe, setzt Drupal auf jQuery v.1.2.3

          Wie sieht das aus, wenn ich alle notwendigen $ per Hand ersetzen müsste? 1. was genau muss ich da ersetzen und finde ich die entsprechenden Stellen und 2. durch was muss ich es ersetzen?

          Danke schon mal

          Kommentar

          • #6
            Das "jQuery is not defined" deutet immernoch darauf hin, dass du dein jQuery.noConflict() vor die Definition des JQuery-Objekts gesetzt hast. Du musst ZUERST jQuery (und Prototype) einbinden und danach noConflict() aufrufen.
            Das ganze ist auch ziemlich gut in der jQuery-Doku beschrieben:
            Using jQuery with Other Libraries - jQuery JavaScript Library

            Danach musst du dir den JavaScript-Code anschauen und alle direkten Aufrufe von $(...) in jQuery(...) ändern (bzw. den Alias den du verwenden möchtest).


            Meinst du mit "Glider" eigentlich "Slider"? Soetwas gibt es sicher auch für jQuery. Vielleicht ist es einfacher und sinnvoller, wenn du - statt zusätzlich noch Prototype&Scriptaculous einzubinden - einfach nach einem passenden Ersatz sucht der jQuery verwendet....

            Kommentar

            • #7
              ja, slider, glider, in dem fall heißt das teil wirklich von haus aus "glider"

              auf die idee, einen "slider" auf jquery-basis zu verwenden, bin ich noch gar nicht gekommen. das werde ich selbstverständlich gleich mal tun. sicher dienlicher, als mich mit dem prototype-jquery-konflikt rumzuschlagen.

              besten dank für den anstoß!

              Kommentar

              • #8
                ich versuche jetzt einen jquery slider zu benutzen. der nutzt die "slider.js" und die "jquery.js", die beide im selben verzeichnis liegen.

                der slider wird aufgerufen per:

                Code:
                <script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").eSlider();
	});
</script>
                allerdings erhalte ich wieder

                Code:
                Fehler: jQuery is not defined
Quelldatei: localhost/slider.js
Zeile: 94
                Zeile 94 ist die letzte zeile des scripts und lautet

                Code:
                })(jQuery);
                Ich habe nun auch schon probiert das $ durch ein jQuery zu ersetzen und die function in der slider.js von $ auch in jQuery geändert. bringt aber den gleichen fehler.

                was mache ich hier denn noch falsch?

                Kommentar

                • #9
                  Vermutlich hast du zuerst die slider.js und dann die jquery.js eingebunden.
                  Du musst aber zuerst jQuery einbinden und danach kannst du dann Plugins einbinden die auf jQuery aufsetzen.

                  Kommentar

                  • #10
                    Zitat von agrajag Beitrag anzeigen
                    Vermutlich hast du zuerst die slider.js und dann die jquery.js eingebunden.
                    Du musst aber zuerst jQuery einbinden und danach kannst du dann Plugins einbinden die auf jQuery aufsetzen.
                    hm, fehler:

                    Code:
                    Fehler: $("#slider").eSlider is not a function
                    oh man ey.....

                    Kommentar

                    • #11
                      Hast du die Seite irgendwo im Netz, wo man sich das ganze mal "live" anschauen kann?
                      Wie sieht der aktuelle Code der Seite aus, auf der dieser Fehler kommt?

                      Kommentar

                      • #12
                        Zitat von agrajag Beitrag anzeigen
                        Hast du die Seite irgendwo im Netz, wo man sich das ganze mal "live" anschauen kann?
                        Wie sieht der aktuelle Code der Seite aus, auf der dieser Fehler kommt?
                        nee leider nicht. wie gesagt, das ist eine ziemlich komplex drupal seite und solche sachen teste ich ausschließlich aufm localhost, bevor sowas live geht.

                        ich habe die ganze sache jetzt aber mal eigenständig gemacht, da funktioniert alles einwandfrei. also scheint es wohl konflikte mit drupal oder einem befehl dort zu geben.

                        Kommentar

                        • #13
                          Aber du kannst doch wenigstens mal die fertige HTML-Ausgabe samt JavaScript mal irgendwo hochladen. Es muss ja nicht gleich Drupal sein. Die Ausgabe reicht uns, mit dem PHP-Code könnten wir eh nichts anfangen, da dieser auf dem Server bleibt.

                          Kommentar

                          • #14
                            Zitat von Manko10 Beitrag anzeigen
                            Aber du kannst doch wenigstens mal die fertige HTML-Ausgabe samt JavaScript mal irgendwo hochladen. Es muss ja nicht gleich Drupal sein. Die Ausgabe reicht uns, mit dem PHP-Code könnten wir eh nichts anfangen, da dieser auf dem Server bleibt.
                            ich werde das morgen mal tun. ich schreibe dann hier wieder! danke

                            Kommentar

                            • #15
                              PHP-Code:
                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                              <                              html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
                              <                              head>
                              <                              title>Benutzerkonto | xxx.de</title>
                              <                              meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                              <                              meta name="copyright" content="xxx.de" />
                              <                              meta name="robots" content="index,follow" />
                              </                              head>
                              <                              body>
                              <                              div id="page"><!-- begin page -->
                              <                              div id="header"><!-- begin header -->

                              <                              div id="logo"><a href="/xxx/" title=""><img src="/themes/xxx/logo.gif" width="177" height="52" alt="xxx.de" /></a></div>
                              </                              div><!-- end header -->
                              <!--                               begin menu --><div id="primary"><ul class="links"><li  class="first menu-1-1-2"><a href="/xxx/" class="menu-1-1-2"><span>Startseite</span></a></li>
                              <                              li  class="menu-1-2-2"><a href="/xxx/aktuelles" class="menu-1-2-2"><span>Aktuelles</span></a></li>
                              <                              li  class="menu-1-3-2"><a href="/xxx/artikel" class="menu-1-3-2"><span>Artikel</span></a></li>
                              <                              li  class="menu-1-7-2"><a href="/xxx/forum" class="menu-1-7-2"><span>Forum</span></a></li>
                              <                              li  class="last menu-1-8-2"><a href="/xxx/ratgeber" class="menu-1-8-2"><span>Ratgeber</span></a></li>

                              </                              ul></div><!-- end menu -->
                              <!--                               beginn searchbar --><form action="/xxx/user/register"  accept-charset="UTF-8" method="post" id="search-theme-form">
                              <                              div>
                              <                              div class="welcome"><div>Bitte <a href="/xxx/user">Einloggen</a> oder <a href="/xxx/user/register">Registrieren</a></div><div><a href="/xxx/user/password">Passwort vergessen?</a></div></div>
                              <                              div class="search-form">
                              <                              div class="form-item"><input type="text" maxlength="128" id="edit-processed-keys" name="processed_keys" size="20" value="Suchbegriff eingeben &amp; Enter dr&uuml;cken" onclick="this.value='';this.onclick=null;this.style.color = '#fff';" title="Suchbegriff eingeben &amp; Enter dr&uuml;cken" class="form-text" /></div>
                              <                              input type="submit" name="op" id="edit-submit" value=""  class="form-submit" />
                              <                              input type="hidden" name="form_token" id="edit-search-theme-form-form-token" value="a6bd58403e9c46f75c355689186a6eff"  />
                              <                              input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"  />
                              </                              div>
                              </                              div></form>

                              <!--                               end searchbar -->

                              <!--                               beginn content -->
                              <                              div id="contentframe">

                              <                              div id="sl-top"><div id="sl-bottom">
                              <                              div id="mainbox">
                               
                              <                              div class="breadcrumb"><a href="/xxx/">Startseite</a></div><br /> 
                              <                              h1 class="title">Benutzerkonto</h1><table border="0" cellpadding="0" cellspacing="0" width="625" class="table-tabs"><tbody<tr><td><ul class="tabs"><li><a href="/xxx/user"><span>Anmelden</span></a></li>
                              <                              li><a href="/xxx/user/password"><span>Neues Passwort anfordern</span></a></li>
                              <                              li class="active"><a href="/xxx/user/register" class="active"><span>Registrieren</span></a></li>

                              </                              ul></td></tr></tbody></table><form action="/xxx/user/register"  accept-charset="UTF-8" method="post" id="user-register">
                              <                              div><script type="text/javascript" src="/xxx/misc/jquery.js"></script>
                              <script type="text/javascript" src="/xxx/misc/easySlider.packed.js"></script>
                              <script type="text/javascript">
                                  $(document).ready(function(){    
                                      $("#slider").easySlider();
                                  });
                              </script>

                              <style>


                              #slider ul, #slider li{
                                  margin:0;
                                  padding:0;
                                  list-style:none;
                                  }
                              #slider, #slider li{ 
                                  width:500px;
                                  height:250px;
                                  overflow:hidden; 
                                  }
                              span#prevBtn{}
                              span#nextBtn{}    


                              </style>

                                  <div id="slider">
                                      <ul>                
                                          <li><img src="/xxx/files/register/xxx-1.png" alt="Css Template Preview" /></li>
                                          <li><img src="/xxx/files/register/xxx-2.png" alt="Css Template Preview" /></li>

                                          <li><img src="images/03.jpg" alt="Css Template Preview" /></li>    
                                      </ul>
                                  </div>

                              <span id="prevId"><a href="javascript:void(0);">Previous</a></span> 
                              <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
                              </div></form>
                              </div>
                              </div></div>

                              <!-- begin sidebar-right -->
                              <div id="sidebar-right">
                              <div id="block-views-neueste_forum" class="block-right block-views first">

                              <!-- end sidebar-right -->

                              </div>
                              <!-- end content -->

                              <div id="footer"><!-- start footer -->
                              <p>Copyright &copy; 2008-2009 xxx.de</p>
                              </div><!-- end footer -->

                              <!-- end page -->
                              <script type="text/javascript" src="/xxx/misc/jquery.js"></script>
                              <script type="text/javascript" src="/xxx/misc/drupal.js"></script>
                              <script type="text/javascript" src="/xxx/sites/all/modules/jquery_update/compat.js"></script>
                              <script type="text/javascript" src="/xxx/sites/all/modules/panels/js/panels.js"></script>
                              <script type="text/javascript" src="/xxx/files/googleanalytics/ga.js"></script>
                              </div>
                              </body>
                              </html> 

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X