[SalesForce] jQuery won’t execute, even with .noConflict();

I've googled this extensively and still can't debug the issue – I'm setting var $j = jQuery.noConflict();, I've verified that the js and css files are loading properly on the page. Can anyone see what I'm doing wrong here? I'm also using bootstrap but it's working fine and I assume that wouldn't cause a conflict. Following this example.

Includes:

<link href="{!URLFOR($Resource.jQueryUI, 'jquery-ui-1.11.4/jquery-ui.min.css')}" rel="stylesheet" />
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, 'jquery-ui-1.11.4/jquery-ui.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, 'jquery-ui-1.11.4/external/jquery/jquery.js')}"/>

The script:

<script type="text/javascript">

  var $j = jQuery.noConflict();

  j$(document).ready(function(){
        j$("#ninjaLink").click(function() {
            alert("NINJA STAR TO FACE!!!!!");
        });
    });


</script>

<a id="ninjaLink" href="">NINJA ATTACK!</a>

Just to verify the files are loading, this is right from the page (both jquery.js and jquery-ui.min.js are loaded, as well as the css):
enter image description here

Best Answer

Problem is that you have created a variable $j but you have used j$ in the script to access DOM elements. Just change the variable name to j$ and that should start working.

Related Topic