CODEWITHSUNDEEP
javascriptjqueryjoomlajoomla3.0
mrGott
mrGott

Reputation: 1076

Joomla 3 and custom jQuery function - undefined function

I tried searching the web but still can't understand why my jQuery function isn't working in Joomla.

So, I have OrionMenu that I'd like to integrate into my Joomla 3.

As a standalone this menu works great, but after trying to load it in Joomla - Chrome's console says every time I roll over menus: 

Uncaught TypeError: undefined is not a function jquery-1.10.1.min.js:4
(anonymous function) jquery-1.10.1.min.js:4
n.event.special.(anonymous function).handle jquery.min.js:3
n.event.dispatch jquery.min.js:3
r.handle jquery.min.js:3

After searching I discovered that Joomla loads it's own jQuery in noconflict mode, so I tried to integrate OrionMenu the other way, and now it says:

Uncaught TypeError: undefined is not a function (index):47
(anonymous function) (index):47
c jquery-1.10.1.min.js:4
p.fireWith jquery-1.10.1.min.js:4
x.extend.ready jquery-1.10.1.min.js:4
q

The line 47 of my index file is:

jQuery(document).ready(function() { jQuery().orion({speed: 500}); });

My original OrionMenu include looked like this:

<link href="templates/<?php echo $this->template; ?>/menu-orion/css/styles.css" rel="stylesheet">
<script type="text/javascript" src="templates/<?php echo $this->template; ?>/menu-orion/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        // $j is now an alias to the jQuery function; creating the new alias is optional.
        $j(document).ready(function() { $j().orion({speed: 500});});
</script>

after reading some stuff on the web I changed it to already mentioned piece of code that returns a console error - undefined function on index line 47

I somehow believe that Joomla's this piece of code breaks up everything.

  <script type="text/javascript">
     jQuery(window).on('load',  function() {
                new JCaption('img.caption');
     });
  </script>

But anyways, help would be amazing :) If you know how to implement or what could probably be wrong with jQuery(document).ready(function() { jQuery().orion({speed: 500}); }); would be great.

Thanks in advance!

Upvotes: 0

Views: 2254

Answers (2)

Carlo Paglietti
Carlo Paglietti

Reputation: 1

If you use Joomla use: JHtml::_('jquery.framework'); to load jQuery but after be sure to not load other jQuery version, and very important remember, in your own jQuery script, that you MUST change all $ with jQuery for example: $(function() {.... became jQuery(function() {

Upvotes: 0

Lodder
Lodder

Reputation: 19733

Ok, be sure that you are not loading your own copy of jQuery. You can use the version that comes pre-packed with Joomla. the following code will ensure it's imported only once and in noConflict mode:

<?php
    JHtml::_('jquery.framework');
?>

Put the above code anywhere in your template, preferable towards the top so you know where it is.

Then try using Joomla's built in method to add custom JS to the head like so:

$doc = JFactpry::getDocument();
$orion = ' jQuery(document).ready(function() { 
               jQuery().orion({
                   speed: 500
               }); 
           });
         ';
$doc->addScriptDeclaration($orion);

You can put this code below the previous code I mention to import jQuery

Upvotes: 3

Related Questions