{"id":1510,"date":"2012-06-25T19:18:50","date_gmt":"2012-06-25T23:18:50","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/06\/25\/add-javascript\/"},"modified":"2021-08-16T23:40:30","modified_gmt":"2021-08-17T03:40:30","slug":"add-javascript","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/","title":{"rendered":"How to add external js javascript files to a Joomla 2.5 plugin"},"content":{"rendered":"

Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here<\/a>.<\/p>\n

In our last article, we showed you how to add external css stylesheets to your Joomla 2.5 content plugin<\/a>. Adding external javascript files to a plugin can be done as well. While the steps are very similar, there are a few important differences. In this tutorial, we’ll show you how to include javascript files with your Joomla 2.5 plugins.<\/p>\n

    \n
  1. \n

    Create the JavaScript File<\/h2>\n

    The first thing you will need to do is actually create the javascript file. In this example, we have created helloworld.js.<\/li>\n

  2. \n

    Include the JS file in your XML file<\/h2>\n

    Your next step will be to update your plugin’s XML file to include the new javascript file, helloworld.js. The following code sample highlights the code we added to incorporate helloworld.js<\/p>\n

    <files>\n    <filename plugin=\"helloworld\">helloworld.php<\/filename>\n    <filename>index.html<\/filename>\n    <filename>mystyle.css<\/filename>\n    <filename>helloworld.js<\/filename><\/strong>\n<\/files><\/pre>\n<\/li>\n
  3. \n
    Use document->addScript to load the javascript file<\/h2>\n
    In our onContentPrepare function, we can use the $document addScript function to add our helloworld.js file:<\/p>\n
    public function onContentPrepare($context, &$row, &$params, $page = 0)\n{\n    $document = JFactory::getDocument();\n    $document->addScript(JURI::base(). \"plugins\/content\/helloworld\/helloworld.js\");<\/strong>\n}<\/pre>\n
    Because our javascript file is within our helloworld plugin’s folder, we can use JURI::base() to help generate the full URL to our js file.<\/p>\n
    After implementing the above steps, Joomla 2.5 adds the following to our header in order to include the file:<\/p>\n
    <script src=\"https:\/\/example.com\/plugins\/content\/helloworld\/helloworld.js\" type=\"text\/javascript\"><\/script><\/pre>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here. In our last article, we showed you how to add external css stylesheets to your Joomla 2.5 content plugin. Adding external Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,82],"tags":[2113],"class_list":["post-1510","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-2-5","tag-joomla-v2-5"],"acf":[],"yoast_head":"\nHow to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-25T23:18:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:40:30+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add external js javascript files to a Joomla 2.5 plugin\",\"datePublished\":\"2012-06-25T23:18:50+00:00\",\"dateModified\":\"2021-08-17T03:40:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\"},\"wordCount\":238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"keywords\":[\"Joomla v2.5\"],\"articleSection\":[\"Joomla\",\"Joomla 2.5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\",\"name\":\"How to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2012-06-25T23:18:50+00:00\",\"dateModified\":\"2021-08-17T03:40:30+00:00\",\"description\":\"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add external js javascript files to a Joomla 2.5 plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting","description":"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting","og_description":"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-06-25T23:18:50+00:00","article_modified_time":"2021-08-17T03:40:30+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add external js javascript files to a Joomla 2.5 plugin","datePublished":"2012-06-25T23:18:50+00:00","dateModified":"2021-08-17T03:40:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/"},"wordCount":238,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"keywords":["Joomla v2.5"],"articleSection":["Joomla","Joomla 2.5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/","name":"How to add external js javascript files to a Joomla 2.5 plugin | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2012-06-25T23:18:50+00:00","dateModified":"2021-08-17T03:40:30+00:00","description":"Using the addScript function, you can setup your Joomla 2.5 plugins to include external js files in your document's header.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add external js javascript files to a Joomla 2.5 plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1510"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1510\/revisions"}],"predecessor-version":[{"id":85884,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1510\/revisions\/85884"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}