it-swarm.com.de

Wie ordnen Sie einem Artikel jQuery-Skripte zu?

Ich arbeite daran, einem einzelnen Joomla-Artikel eine einfache Funktion hinzuzufügen. Das Bearbeiten des Artikels selbst ist in diesem Fall erforderlich. Ich kann die Vorlagendateien nicht ändern (oder die JS zur gesamten Site hinzufügen).

Im Artikeleditor (gemäß das Dokument ) lautet mein Artikel wie folgt ...

    {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>

Beim Anzeigen der Seite werden sowohl CSS als auch JS geladen, aber addScript() wird zuerst angezeigt, sodass mein Skript (das jQuery enthält) vor jQuery lädt. Die Konsole spuckt aus:

Nicht gefangener TypeError: $ ist keine Funktion

Ich habe versucht, die Zeile addScript in ... zu ändern.

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

... (beachten Sie das defer -Tag), aber das scheint nichts zu bewirken (das Skript wird nicht hinzugefügt). Ich habe irgendwo gesehen, dass ich ...

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

... aber der Editor (sowohl TinyMCE als auch CodeMirror) codiert das "obige (bis & quot;), was diese Möglichkeit unterbricht.

Ich habe auch versucht, den Code article_1.js In einen Ereignis-Listener zu packen ...

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

... aber das scheint nicht zu helfen:\Ich bekomme immer noch:

Nicht gefangener TypeError: $ ist keine Funktion

Wie fügt man ein jQuery-Skript aus einem Artikel heraus hinzu?

2
neokio

Versuchen Sie diese Problemumgehung weiter unten, indem Sie jquery.framework aus dem Artikel aufrufen. Es sollte den Aufruf von jquery.framework überschreiben, der von Ihrer Vorlage stammt, damit jquery vor Ihrem Skript aufgerufen wird.

{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

Es handelt sich um einen jQuery-Konflikt (eher wie ein NoConflict-Problem). Sie sollten Ihr Skript beispielsweise wie folgt starten und umbrechen:

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

Oder definieren Sie jQuery neu wie:

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();
});

Und mit wenigen anderen Methoden. Diese lösen den Konflikt auf der Seite. https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Update:

Es ist meine Schuld oder Faulheit, dass ich keine kurze zusätzliche Erklärung zu meiner Antwort gegeben habe.

Erstens besteht die ursprüngliche Frage eigentlich aus zwei Fragen: 1. Wie füge ich Skripten zu Artikeln hinzu? 2. Was bedeutet der angegebene Fehler? Und diese sind etwas irreführend, weil sie verwirrende Antworten bekommen könnten.

Auf die Frage, wie Skripte in Artikel geladen werden sollen, ist die Antwort relativ einfach, da es AddScript und einige andere offensichtliche Methoden gibt. Und addScript() war bereits in der Frage, also gab es kein Problem damit. Wenn Sie Ihren Code nicht falsch eingeben, funktionieren diese.

Die zweite Frage, die in dieser Frage etwas wichtiger ist, und was bedeutet dieser Fehler?

Nicht gefangener TypeError: $ ist keine Funktion

Dieser Fehler tritt meistens auf, wenn das jQuery-Framework im noConflict-Modus geladen wird, wie dies in Joomla normalerweise der Fall ist. Und wenn jQuery im noConflict-Modus geladen wird, ist die Verknüpfung $ Nicht verfügbar. Daher wird der Fehler angezeigt, wenn Sie versuchen, Ihre Skripte mit dieser Verknüpfung auszuführen. Aus diesem Grund habe ich meine Antwort so gegeben, wie sie ist. Als bewährte Methode sollten Sie Ihre jQuery-Skripte so verpacken, wie oben beschrieben. Dies erklärt auch, warum Sie nicht das gesamte jQuery-Framework innerhalb eines Artikels erneut laden sollten (da es höchstwahrscheinlich bereits geladen ist, sodass dies nicht das Problem ist und das Laden in einen Artikel später zu anderen Komplikationen führen kann).

1
Zollie