JavaScript-Funktion funktioniert innerhalb der HTML-Seite, funktioniert aber nicht von externen JS-Datei

Ich versuche, einige Javascript-Code in einer JS-Datei zu platzieren, so dass ich es aus mehreren HTML-Seiten aufrufen kann. Das Problem ist, mein Javascript-Code funktioniert gut, wenn ich es in ein Skript innerhalb der HTML-Seite platzieren, aber wenn es in eine externe .js-Datei eingefügt wird, funktioniert es einfach nicht. Ich habe diese Fragen einige Male angeschaut und kann den Fehler immer noch nicht finden.JavaScript-Funktion funktioniert innerhalb der HTML-Seite, funktioniert aber nicht von externen JS-Datei

Hier ist die HTML-Seite:

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/global.css" /> 
    <link rel="stylesheet" type="text/css" href="css/contacts.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src ="js/contactsModule.js"></script> 
    <title>Hall of Heroes</title> 
</head> 
<body onload = "contactsModule.getContacts();"> 



    <!-- Global Header Starts Here --> 
    <div class="header"> 
     <div class="cancel"> 
      <img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home --> 
     </div> 
     <h1>My Contacts</h1> 
    </div> 

    <div class="wrapper"> 
     <h3>A</h3> <!-- letter header goes here --> 

     <!-- Begin Contact Unit --> 
     <div class="feed"> 

     </div> 
     <!-- End Contact Unit --> 

    </div> 

    </body> 

    </html>

Und hier ist die JS-Datei:

var contactsModule = (function($){ 

     function getContacts() 
     { 
      dbContacts(); 
     } 

     function displayContacts(contactArray){ 
      window.alert('displayContacts now running!'); 
      var jsonObject = $.parseJSON(contactArray); 
      jsonObject.forEach(function (dat) { 
       //Begin Contact Unit 
       $('.feed') 
        .append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\ 
        </div><div class="feed-text"><p><span class="name_highlight">\ 
        ' + dat.firstName + ' ' + dat.lastName + '</span></p></div>'); 
       //End Contact Unit 
      }); 
     } 
     function dbContacts() { 
      var avatarUrl; 
      var firstName; 
      var lastName; 

      $.ajax({ 
       type: "GET", 
       url: "http://www.hallofheroesapp.com/php/contacts.php", 
       data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName}, 
       success: function (response) { 
        window.alert('AJAX ran successfully!'); 
        displayContacts(response); 
       }, 
       error: function(response){ 
        alert("Error:" + response); 
       } 
      }); 
     } 
}(jQuery));

Vielen Dank für Ihre Hilfe!

Quelle

2016-06-20 bzd91

Sind Sie sicher, dass es in der HTML-Datei funktioniert - ich sehe nichts an die 'contactsModule'-Variable zurückgegeben - wo bekommt es seinen Wert ..? –

ist das Ende dieser Funktion soll '}) sein (jQuery);'? – kirinthos

@kirinthos beide Wege arbeiten –

Sie geben nichts von Ihrem IIFE zurück. contactsModule wird dann nichts enthalten, dh gleich undefined. Auch das bloße Definieren von Funktionen macht diese Funktionen nicht zu einem Teil eines Objekts, mit Ausnahme von global definierten Funktionen. Sie müssen sie zuweisen oder sie als Teil einer wörtlichen sollte so etwas wie

var contactsModule = (function($){ 
    return { 
     getContacts: function() { 
      /* code */ 
     }, 
     displayContacts: function(contactArray){ 
      /* code */ 
     } 
     dbContacts function() { 
      /* code */ 
     } 
    }; 
}(jQuery));

Quelle

2016-06-20 21:28:08

Wie wäre es mit

$(document).ready(function(){ 
    ///// your code here... 

});

Quelle

2016-06-20 21:25:47

... ändern ...

<body onload = "contactsModule.getContacts();">

... bis ...

<body>

... und Event-Handler hinzufügen, mit jquery ...

(function($){ 

     function getContacts() 
     { 
      dbContacts(); 
     } 

     /* ... etc ... */ 

     // use jquery's onready handler 
     $(getContacts); 

}(jQuery));

Quelle

2016-06-20 21:26:20

Was ist der Zweck von $ (getContacts); nahe dem Boden? – bzd91

Hatte das gleiche Problem sein

Ihr Code Objekt definieren. Einfache Sache, wenn Sie auf Google recherchieren. Ihr Js-Code wird geladen, bevor das DOM geladen wird. Welcher sollte umgekehrt sein? So müssen Sie diese verwenden

$(document).ready(function(){ 
    //only jQuery is recommended, global JavaScript functions outside! 
});

Auch JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 
    //global function outside! 
});

Nur auf diese Weise können Sie sicher sein, dass Ihre DOM geladen wird, bevor Sie Ihre jquery Ihre Elemente findet.

Quelle

2016-06-20 22:37:51

Was meinst du, wenn du globale Funktionen draußen sagst? – bzd91

Das bedeutet, dass Ihre globalen Funktionen außerhalb dieses Ereignishandlers liegen sollten. So können Sie die Funktionen aufrufen, sonst können Sie nicht. –

JavaScript-Funktion funktioniert innerhalb der HTML-Seite, funktioniert aber nicht von externen JS-Datei

Antwort

Verwandte Themen