web-dev-qa-db-ja.com

どのように記事にjQueryスクリプトを割り当てますか？

1つのJoomla記事に簡単な機能を追加する作業をしています。この場合、記事自体の編集が必要です。テンプレートファイルを変更する（またはJSをサイト全体に追加する）ことはできません。

記事エディター（ the doc による）では、私の記事は次のようになります...

_    {source}
    <?php
        $doc = JFactory::getDocument();
        $doc->addStyleSheet('mycode/css/article_1.css');
        $doc->addScript('mycode/js/article_1.js');
    ?>
    {/source}

    <div id="article_1"></div>
_

ページを表示すると、CSSとJSの両方が読み込まれますが、addScript()は先着順であるため、スクリプト（jQueryを含む）はbeforejQuery。コンソールが吐き出す：

Uncaught TypeError：$は関数ではありません

addScript行を...に変更してみました.

_    $doc->addCustomTag('<script src="mycode/js/article_1.js" defer></script>');
_

...（deferタグに注意してください）しかし、それは何もしないようです（スクリプトは追加されていません）。どこかで使えるところを見た...

_    $doc->addScript('mycode/js/article_1.js', 'text/javascript" defer="false');
_

...しかし、エディター（TinyMCEとCodeMirrorの両方）は、上記の「を（＆quot;に）エンコードし、その可能性を壊します。

また、_article_1.js_コードをイベントリスナーでラップしてみました...

_    document.addEventListener('DOMContentLoaded', function(){ ... }
_

...しかし、それは役に立たないようです：\私はまだ得ます：

Uncaught TypeError：$は関数ではありません

記事内からjQueryスクリプトをどのように追加しますか？

joomla-3.xarticlesjquery
2
neokio

記事からjquery.frameworkを呼び出して、この回避策を試してください。テンプレートからのjquery.framework呼び出しをオーバーライドして、スクリプトの前にjqueryが呼び出されるようにする必要があります。

{source}
<?php
    JHtml::_('jquery.framework');
    $doc = JFactory::getDocument();
    $doc->addStyleSheet('mycode/css/article_1.css');
    $doc->addScript('mycode/js/article_1.js');
?>
{/source}

<div id="article_1"></div>
1
webchun

これはjQueryの競合です（noConflictの問題に似ています）。たとえば、次のようにスクリプトを開始してラップする必要があります。

_jQuery.noConflict();
(function( $ ) { // if you want to use $
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
_

または次のようにjQueryを再定義します：

_var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function;       creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});
_

そして、他のいくつかの方法で。これらは、ページ上の競合を解除します。 https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

更新：

自分の答えについて簡単な追加説明をしなかったのは私のせいか怠惰です。

最初に、元の質問は実際には2つの質問です：1.記事にスクリプトを追加する方法は？ 2.与えられたエラーはどういう意味ですか？そして、これらは混乱を招く可能性があるため、少し誤解を招く可能性があります。

スクリプトを記事にロードする方法についての質問では、addScriptと他のいくつかの明白なメソッドがあるため、答えは比較的簡単です。 addScript()はすでに問題になっているため、問題はありませんでした。コードを間違って入力しない限り、これらは機能します。

この質問でもう少し重要な2番目の質問で、このエラーの意味は何ですか？

Uncaught TypeError：$は関数ではありません

現在、このエラーは、Joomlaで通常そうであるように、jQueryフレームワークがnoConflictモードでロードされたときにほとんどの場合に表示されます。また、jQueryがnoConflictモードでロードされている場合、_$_ショートカットは使用できないため、そのショートカットでスクリプトを実行しようとすると、エラーが表示されます。それが、私がそのまま答えを出した理由です。良い方法として、上記のようにjQueryスクリプトをラップする必要があります。また、記事内でjQueryフレームワーク全体を再度読み込まない方がよい理由も説明しています（おそらく、既に読み込まれているため問題ではなく、記事に読み込むと後で他の問題が発生する可能性があります）。

1
Zollie