2016-07-22 4 views
0

Я пытаюсь реализовать simpleWeather.js на моем сайте.

К сожалению, когда я помещаю HTML в моем сайте, я получаю

Uncaught TypeError: $.simpleWeather is not a function

Я ссылки simpleWeather.js в верхней части моего HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 

И загружается на веб-сайте :

enter image description here

Он отлично работает на codepen.io:/Любые идеи?

EDIT:

Мой полный код выглядит следующим образом:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
<script type="text/javascript"> 
    //copied javascript from codepen.io 
</script> 
<style type="text/css"> 
    //copied css from codepen.io 
</style> 
//copied html from codepen.io 
+0

Где ваш JQuery сценарий тег по отношению к вашему simpleweather тега сценария? (Они должны быть в таком порядке: сначала jQuery, затем simpleweather.) –

+0

Я думаю, что вы пытаетесь вызвать 'simpleWeather' перед загрузкой плагина ... –

+0

' jquery.min.js' ссылка находится чуть выше 'jquery. simpleWeather.min.js'. Я сделал все как в примере codepen.io:/ –

ответ

0

кажется мне, как вы, вероятно, ваши сценарии в неправильном порядке. Ваш тег script для jQuery должен быть до ваш script тег для simpleWeather. Тогда ваш скрипт с использованием simpleWeather должен быть после этого. (Если вы используете загрузчик скриптов, вам необходимо убедиться, что порядок загрузки.)

0

Пожалуйста, проверьте порядок кода ...

Вы должны включить библиотеку первой, то вы можете доступ, что $ .simpleWeather (). код порядка что-то вроде этого.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
... 
... 
... 
<script> 
$.simpleWeather({ 
    zipcode: '76309', 
    unit: 'f', 
    success: function(weather) { 
     html = '<h2>'+weather.city+', '+weather.region+'</h2>'; 
     html += '<img style="float:left;" width="125px" src="images/weather/'+weather.code+'.png">'; 
     html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>'; 
     html += '<a href="'+weather.link+'">View Forecast &raquo;</a>'; 

     $("#weather").html(html); 
    }, 
    error: function(error) { 
     $("#weather").html("<p>"+error+"</p>"); 
    } 
}); 
</script> 
0

Попробуйте так:

jQuery(document).ready(function ($) { 
    // your code 
}); 

Кроме того, написать script тег после html и css