$ не определена ошибка с использованием jQuery и Google Code Repository

Question

Я пытаюсь скопировать демо вкладки с сайта jQuery. Пример страницы, с которой я работаю: http://yazminmedia.com/playground/jquerytabs.html

Я бы хотел использовать Google Code Repository, чтобы воспользоваться преимуществами кэширования. У меня есть следующий код в заголовке моей страницы:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");

$(function() {
  $("#tabs").tabs();
});
</script>

Тем не менее, я получаю следующую ошибку - «$ не определено» для следующей строки:

$(function() {

Кто-нибудь знает, что может быть причиной ошибки?

Спасибо!

Answer 1

google.load внедряет элемент скрипта сразу после себя.Таким образом, порядок появления тегов сценария:

// google loads first
<script src="http://www.google.com/jsapi"></script>

// ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");

    // try to use $
    $(function() {
        $("#tabs").tabs();
    });
</script>

// But, jQuery gets included here (after its usage)
<script src="jquery.min.js"></script>

// and jQuery UI gets included here
<script src="jquery-ui.min.js"></script>

Поскольку использование $ появляется до того, как jQuery включен в порядок документов, $ не будет определено на втором шаге.

Решение состоит в том, чтобы разбить теги сценария так, чтобы операторы google.load появлялись в своих собственных тегах сценария.Так что вместо этого, если вы замените свой код на:

<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

<script>
    $(function() {
        $("#tabs").tabs();
    });
</script>

Порядок тегов сценария в документе теперь будет:

// first google loads
<script src="http://www.google.com/jsapi"></script>

// then we ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

// jQuery loads
<script src="jquery.min.js"></script>

// jQuery UI loads
<script src=".../jquery-ui.min.js"></script>

// now our script can run smoothly
<script>
    $(function() {
        alert($("h1").text());
    });
</script>

Обратите внимание, что теперь появляется элемент script, содержащий ваш код jQueryпосле jQuery ваш код должен работать, и с этого момента следует определить $ или jQuery.

Однако вместо того, чтобы полагаться на поведение порядка загрузки google, лучшим решением будет либо использовать прямые ссылки на библиотеки, либо использовать обратный вызов.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
    // your jQuery code follows
</script>

Или,используйте обратный вызов onLoad:

google.load("jquery", "1");
google.load("jqueryui", "1");

google.setOnLoadCallback(function() {
    // jQuery should be define here
    $(function() {
        alert($("h1").text());
    });
});

Answer 2

По какой-то причине я получил ту же ошибку

Мне это сошло с рук, добавив этот скрипт на каждую страницу

<script language="javascript" type="text/javascript">
    $j = jQuery.noConflict();
</script>

, затем используя

$j("#tabs").tabs();