ralfG: jQuery extern?

Hallo.

Ich möchte einen jQuery-Code extern einbinden und habe nun folgendes:

index.html [Zusammenfassung]:

<head>  
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>  
 <script type="text/javascript" src="js/jQueryCode.js"></script>  
</head>  
  
<body>  
 <div id="draggable">  
  2  
 </div>  
</body>

js/jQueryCode

$(function() {  
 $( "#draggable" ).draggable();  
});

Aber dies funktioniert nicht: Der Div-Block wird nicht "draggable". Binde ich aber den Code direkt in die HTML-Datein ein, funktioniert es. Woran liegt das?

MfG

  1. Hallo,

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

    jQuery UI basiert auf jQuery. Wo bindest du jQuery selbst ein?

    Mathias

    1. Oh sorry.

      Habe die Zeile vergessen:
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

      Ralf

      1. Pseudocode macht keinen Sinn, da die Wahrscheinlichkeit, dass du den Fehler "wegrazionalisiert" hast, sehr gross ist.

        Poste entweder den kompletten Code oder stell ein Beispiel online.

  2. Moin!

    Hallo.

    Ich möchte einen jQuery-Code extern einbinden und habe nun folgendes:

    index.html [Zusammenfassung]:

    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jQueryCode.js"></script>
    </head>

    <body>
    <div id="draggable">
      2
    </div>
    </body>

    
    >   
    > js/jQueryCode  
    > ~~~javascript
    
    $(function() {  
    
    >  $( "#draggable" ).draggable();  
    > });
    
    

    Aber dies funktioniert nicht: Der Div-Block wird nicht "draggable". Binde ich aber den Code direkt in die HTML-Datein ein, funktioniert es. Woran liegt das?

    Zu dem Zeitpunkt, wo der Javascript-Code ausgeführt wird, nämlich im HEAD, existiert noch kein DIV mit der ID #draggable.

    Grundsätzlich gilt: Du kannst im DOM erst herumoperieren, wenn es vollständig geladen ist. Das ist mit jQuery einfach, denn dafür gibts eine passende Funktion, die schnellstmöglich, aber nicht zu früh, am DOM arbeiten lässt:

    $(document).ready(function() {
      // hier Dinge mit dem DOM tun, nachdem es geladen ist
    });

    Siehe http://api.jquery.com/ready/

    - Sven Rautenberg

    1. $(function() {

      $( "#draggable" ).draggable();
      });

        
      `$(function () {})`{:.language-javascript} ist eine Kurzschreibweise für `$(document).ready(function () {})`{:.language-javascript}  
        
      Mathias
      
  3. Servus,

    entweder dein JavaScript liegt nicht da wo du es dem HTML-Dokument gesagt hast oder dein Browser hat ein PlugIn wie

    https://addons.mozilla.org/de/firefox/tag/request policy
    oder
    https://addons.mozilla.org/de/firefox/addon/noscript/
    oder
    dein Browser verhindert intern schon das Nachladen domänenfremder Inhalte
    oder
    was ganz anderes

    beim IE gibt es wohl die IE-Developer-Toolbar (F12 drücken?), da kannst du solche Sachen nachverfolgen. Beim Firefox die Webkonsole.

    HTH