web-dev-qa-db-fra.com

Uncaught TypeError: Object # <Object> n'a pas de méthode 'movingBoxes'

J'essaie d'utiliser le plugin movingBoxes avec mon site asp.net mvc et il ne fonctionne pas (évidemment). J'ai les movingboxes.js importés dans ma balise head dans le site.master comme si

    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>

et le navigateur obtient ce script avec succès. Maintenant, j'ai une vue régulière qui hérite du site.master qui a ce petit peu de jquery en elle qui appelle le plugin movingBoxes

<script type="text/javascript">
    $(document).ready(function () {
        $($('#slider-one'));
        $('#slider-one').movingBoxes({
            startPanel: 1,      
            panelWidth: .5,     
            fixedHeight: false
        });

        $('#slider-two').movingBoxes({
            startPanel: 1,     
            panelWidth: .5,     
            fixedHeight: false
        });
    });
</script>

Quand je regarde la page. Tout fonctionne bien (y compris d'autres choses jquery) à l'exception de ce plugin et j'obtiens cette erreur

enter image description here

Et voici la description de l'erreur enter image description here

Toute aide serait appréciée

MODIFIER

Donc, apparemment, j'avais ceci: 

    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js" />
    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>

Et cela fonctionne maintenant en le changeant en ceci: 

    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>
javascriptjquerytypeerror
36
Collin O'Connor

Vous pouvez essayer de faire en sorte que cela fonctionne.

  1. Assurez-vous ABSOLUMENT que votre script est bien inséré dans la page. Pour vérifier, utilisez l'onglet "sources" du débogueur Chrome et recherchez le fichier.

  2. Assurez-vous que vous avez inclus le script après jQuery, car il dépend très certainement de cela.

En dehors de cela, j'ai vérifié l'API et vous faites absolument tout correctement, à ma connaissance. Bonne chance ami!

EDIT: Assurez-vous de fermer votre balise de script. La réponse ci-dessous indique que c'est la solution.

40
Hacknightly

N'oubliez pas que seuls quelques éléments peuvent se fermer automatiquement, la plupart des autres doivent être fermés en ajoutant une balise de fin explicit. Dans le cas ci-dessus, la première balise de script n'a pas été fermée correctement. La balise de script de fin du second script a ensuite fermé la section de script. Seul le premier script a été chargé en tant que source de script externe et le second a été ignoré.

Pour plus d'informations sur les balises pouvant être fermées automatiquement, consultez les brouillons du W3C pour HTML5 (bien que la définition ne soit pas différente dans les versions HTML précédentes):

http://www.w3.org/TR/html5/syntax.html#end-tags (8.1.2.1, point 6)

14
SaschaM78

J'ai eu le même problème. J'ai changé l'ordre des scripts dans head part, et cela a fonctionné pour moi . Chaque script dont le plugin a besoin doit rester proche.

Par exemple:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#slider').cycle({
            fx: 'fade' 
        });
    });
</script>
4
Gazu

Je viens d'avoir ce même problème avec le plugin jquery Responsive Slides ( http://responsive-slides.viljamis.com/ ). 

Je l'ai corrigé en n'utilisant pas la version courte jQuery $(".rslides").responsiveSlides(.. mais plutôt la version longue: jQuery(".rslides").responsiveSlides(...

Donc, passer de $ à jQuery afin de ne pas causer de conflit ou d’utiliser le mode jQuery sans conflit approprié ( http://api.jquery.com/jQuery.noConflict/ )

4
racl101

Lorsque j'ai eu ce problème, c'est parce que j'essayais d'utiliser une fonction réelle à la place d'une fonction anonyme.

Incorrect:

$(document).on('change', "#MyId", MyFunction());

Correct

$(document).on('change', "#MyId", MyFunction);

ou également correct et si vous avez besoin de transmettre un objet événement ou d’autres paramètres.

$(document).on('change', "#MyId", function(e) { MyFunction(e); });
2
Valamas

J'ai eu un tel problème aussi parce que j'utilisais les balises IMG et UL. 

Essayez d'appliquer le plug-in 'corners' à des éléments tels que $('#mydiv').corner(), $('#myspan').corner(), $('#myp').corner() mais PAS pour $('#img').corner()! Cette règle est liée à l'ajout de DIV enfants dans l'élément spécifié pour l'effet de coin arrondi d'émulation. Comme nous le savons, l’élément IMG ne peut avoir d’élément enfant.

J'ai résolu ce problème en encapsulant un élément nécessaire dans la div et en modifiant IMG en DIV avec la propriété background: CSS.

Bonne chance!

1
Serhii Matrunchyk

j'ai eu le même problème que j'avais lié jquery deux fois. La dernière version remplaçait mon plugin.

Je viens de supprimer le jQuery plus tard, il a commencé à fonctionner.

1
Aakash Agrawal

En fait, je pense que vous avez téléchargé seulement une partie du script . Essayez de cocher la case "Core" avant de télécharger le script complet sur le site jQuery.

1
Victor Augusto

C'est aussi une bonne idée de vous assurer que vous utilisez la bonne version de jQuery. J'avais récemment acquis un projet utilisant jQuery 1.6.2 qui ne fonctionnait pas avec le plugin hoverIntent. La mise à niveau vers la version la plus récente a corrigé le problème.

0
Rob Erskine

J'ai constaté que j'utilisais un sélecteur pour mon rendorTo div que j'utilisais pour afficher le graphique des graphiques de grandeurs de colonnes. Apparemment, il ajoute le sélecteur pour vous, il vous suffit donc de passer id. 

renderTo: $ ('# myGraphDiv') en une chaîne 'myGraphDiv' ce qui a corrigé l'erreur d'espérer que cela aiderait aussi quelqu'un d'autre. 

0
vikingben