web-dev-qa-db-fra.com

Comment charger un fichier externe et m'assurer qu'il est d'abord exécuté dans JSFiddle?

J'ai un JsFiddle ici , et j'ai ajouté Microsoft AJAX à charger par le biais de la section ressource/JS externe. Comment savoir si mon code JS est exécuté après le chargement du fichier AJAX?

Il semble que le AJAX ne se charge pas non plus. :(

Voici le code dans le JSFiddle:

Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
        set_firstName: function(value) {
            this._firstName = value;
        },
        get_firstName: function() {
            return this._firstName;
        },
        set_lastName: function(value) {
            this._lastName = value;
        },
        get_lastName: function() {
            return this._lastName;
        },
        _firstName: "",
        _lastName: "",
        displayName: function() {
            alert("Hi! " + this._firstName + " " + this._lastName);
        }
    };
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);
javascriptasp.net-ajaxjsfiddle
19
Deeptechtons

Ouvrez la section "Ajouter des ressources" et ajoutez l'URL de votre script externe ...

18
Nhaga

L'onglet External Resources de jsFiddle est actuellement un peu difficile et instable à utiliser. Les ressources définies ici ne sont souvent pas correctement incluses dans le code. La reconnaissance automatique des ressources JS et CSS semble poser problème. Si cela se produit, la ressource externe n'est simplement pas ajoutée à la section d'en-tête du code résultant. Vous pouvez vérifier cela en consultant le code source du cadre de résultats de votre jsFiddle. Vous constaterez que votre ressource MS AJAX n'est simplement PAS mentionnée dans le code HTML résultant.

La reconnaissance correcte peut en réalité être forcée en ajoutant une valeur fictive à l'URL de la ressource comme ceci (voir -> docs jsFiddle pour plus d'informations): 

...&dummy=.js

Voici un exemple qui montre comment ajouter la ressource externe API Google Maps à un jsFiddle (attention, le paramètre dummy à la toute fin!):

https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js

Malheureusement, cela ne fonctionnera pas pour vous car l'URL MS AJAX échouera lorsque des paramètres supplémentaires seront ajoutés.

Une solution (et actuellement le moyen le plus sûr de charger des ressources externes) consiste à éviter complètement l'onglet Ressources externes et à charger manuellement le code externe dans les premières lignes de la fenêtre HTML de jsFiddle, comme suit:

<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>

Voici votre jsFiddle modifié pour utiliser cette méthode: http://jsfiddle.net/rEzW5/12/

En fait, cela ne fait pas beaucoup (je n'ai pas vérifié ce qui ne va pas avec le reste de votre code), mais au moins, il ne jette plus d'erreurs JavaScript.

20
Jpsy

L'approche de @ Jpsy ne semble plus fonctionner (voir mon commentaire sous sa réponse).

Pour moi, l'ajout de la ressource sous Ressources externes n'a pas fonctionné non plus. (Selon le débogueur de Firefox, il n'a pas pu trouver la ressource).

La seule façon dont j'ai pu obtenir un bit de code JavaScript externe (dans mon cas, jquery.backstretch.js), a été d'utiliser Google pour trouver un Fiddle qui utilisait cette ressource (et qui fonctionnait), Puis branchez ce Fiddle et copiez/collez tout mon code dans les panneaux HTML, CSS et JavaScript. Pouah!

1
clayRay

@clayRay, vous avez absolument subi une opération de code. Vient de résoudre cela en mentionnant la source externe en HTML simple qui dans mon cas est 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

L'utilisation de l'onglet Ressources externes n'a pas aidé un peu ...

0
Sanje