CODEWITHSUNDEEP
javascriptjqueryjoomla
alex rees
alex rees

Reputation: 79

JQuery code not working on Joomla install

This JQuery code to pop up an alert when a href is clicked: http://jsfiddle.net/fuYLX/11/

Is not working on my Joomla 3.2 install: http://www.dasa.org.uk.gridhosted.co.uk/registration

Can anyone help me to work out why please?

Here is the Jfiddle HTML code:

<div id="stepbystep" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"> <a href="#step-1">
        <span>Step 1</span>
      </a>

        </li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"> <a href="#step-2">
        <span>Step 2</span>
      </a>

        </li>
        <li class="ui-state-default ui-corner-top"> <a href="#step-3">
        <span>Step 3</span>
      </a>

        </li>
    </ul>
</div>

Here is the javascript:

var tabCheck = {
  ready : function() {
    jQuery('#stepbystep ul li a').click(
      function(e) {
        alert('hi');
      }
    );
  }
};

$(document).ready(tabCheck.ready);

Upvotes: 0

Views: 74

Answers (1)

Brian Bolli
Brian Bolli

Reputation: 1873

It appears there's an error regarding your selector string. This error appeared in console when I navigated to the link you sent.

[jquery.form] terminating; zero elements found by selector

On first glance it appears the selector is correct, so my thought is this is tied to the DOM elements not being available when the script is loaded and run. Try changing your JS to this:

$(document).on('click', '#stepbystep ul li a', function(e) {
    alert('hi');
});

or, if you want to continue to follow your existing paradigm:

$(document).on('click', '#stepbystep ul li a', function(e) {
    tabCheck.ready;
});

* EDIT 1 *

Try wrapping your JavaScript code in a IIFE like so:

(function($) {

    // code here

})(jQuery);

Not 100% if that is what's causing the 'not a function' error, but this will at least eliminate conflicts with the mootools library. This immediately invoked function takes in the non-conflicting jQuery object library, and allows you to use the $ to invoke all of jQuery's native functions.

Upvotes: 2

Related Questions