ReferenceError: $ is not defined issue

Question

I'm just getting a error message in console that is Reference Error: $ is not defined. That's why my form data is not loading after click on radio buttion. Can you tell me what is the issue in my code ? Thank You.

<form id='group'>
<label><input type="radio" name="group1" class="sim-micro-btn"/></label>
<label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
<label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
<label><input type="radio" name="group1" class="sim-mega-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
  <div class="sim-micro-desktop">sim-micro</div>
  <div class="sim-mini-desktop">sim-mini</div>
  <div class="sim-maxi-desktop">sim-maxi</div>
  <div class="sim-mega-desktop">sim-mega</div>
  <div class="phone-smart-micro-desktop">phone-smart-micro</div>
  <div class="phone-smart-mini-desktop">phone-smart-mini</div>
  <div class="phone-smart-desktop">phone-smart</div>
  <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

<script>
$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});
</script>

Your jQuery is likely not included in the page, or is included after this is executed. This could occur if using a templated system, wherein jQuery is in the footer, and you've put jQuery code in the page contents. — MDEV, Feb 19 '14 at 15:55
@ashley you are right. Accepted but another error is showing that is : 'Error: Syntax error, unrecognized expression: . ...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"...' — Babu, Feb 19 '14 at 15:57

score 1 · Accepted Answer · answered Feb 19 '14 at 15:54

You are missing reference to jQuery library .

Add jQuery library before you use jQuery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});
</script>

score 1 · Answer 2 · answered Feb 19 '14 at 15:56

Missing jQuery library and you need to use jQuery functions only if the DOM is ready

Replace your jscript by:

$(function() {
 $('form#group').click(function(e) {
     var className = e.target.className.replace('btn', 'desktop');    
     $('.' + className).show().siblings().hide();
 });
});

score 0 · Answer 3 · answered Feb 19 '14 at 15:55

Seem like you're missing the core jQuery files, you can add this script before using your jQuery code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function() {
        $('form#group').click(function(e) {
            var className = e.target.className.replace('btn', 'desktop');    
            $('.' + className).show().siblings().hide();
        });
    })
</script>

You should also need to wrap your code inside DOM ready handler to make sure that all the DOM elements are ready before executing your code.

ReferenceError: $ is not defined issue

3 Answers3