54

I am trying to run a JavaScript/jQuery function and Firebug gets the error:

$ is not defined $(function()".

The JavaScript code is placed inside a file called core.js and referenced by index.php. What causes this error?

JavaScript:

<script type="text/javascript">
    var formObject = {
        run : function(obj) {
            if (obj.val() === '') {
                obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
            } else {
                var id = obj.attr('id');
                var v = obj.val();
                jQuery.getJSON('/mod/update.php', { id : id, value : v }, function(data) {
                    if (!data.error) {
                        obj.next('.update').html(data.list).removeAttr('disabled');
                    } else {
                        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                    }
                });
            }
        }
    };

    $(function() {

        $('.update').live('change', function() {
            formObject.run($(this));
        });

    });
</script>

PHP/HTML

<html>
    <select name="main" id="category" class="update">
    <option value="">Select one</option>

        <? if (!empty($list)) { ?>
            <? foreach($list as $row) { ?>
                <option value="<?php echo $row['id']; ?>">
                    <? echo $row['name']; ?>
                </option>

            <? } ?>
        <? } ?>

    </select>
</html>
Improve this question
3
  • 3
    Do you have jQuery referenced? Commented May 28, 2012 at 3:51
  • 2
    Um.. You are putting <select> directly inside <html>? Please tell me this isn't your real markup :( Commented May 28, 2012 at 3:51
  • @NiftyDude no dude lol is not my real mark up. It is only an example. Commented May 28, 2012 at 4:02

8 Answers 8

Reset to default
99

You must not have made jQuery available to your script.

Add this to the top of your file:

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

This issue is related to the jQuery/JavaScript file not added to the PHP/JSP/ASP file properly. This goes out and gets the jQuery code from the source. You could download that and reference it locally on the server which would be faster.

Or either one can directly link it to jQuery or GoogleCDN or MicrosoftCDN.

How do add jQuery to your webpage

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Yup! check the error console for any GET message; for me, it was a simple, stupid linefeed that was added in the middle of the <script>..jquery..</script> line.
I have the jQuery CDN added to my HTML and still having this error. Any ideas?
@Blairg23 clear all your cache in browser and check it.
Better use https instead of http, otherwise it mght not load when the website runs over https.
5

Try:

(function($) {
    $(function() {
        $('.update').live('change', function() {
            formObject.run($(this));
        });
    });
})(jQuery);

By using this way you ensure the global variable jQuery will be bound to the "$" inside the closure. Just make sure jQuery is properly loaded into the page by inserting:

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

Replace "http://code.jquery.com/jquery-1.7.1.min.js" to the path where your jQuery source is located within the page context.

Improve this answer

Comments

4

This may be useful to someone:

If you already got jQuery but still get this error, check you include jQuery before the js that uses it, specially if you use @RenderBody() in ASP.NET C#

You have to include jQuery before the @RenderBody() if you include the js inside the view that @RenderBody() calls.

Improve this answer

Comments

3

You need to include the jQuery library on your page.

You can download jQuery here and host it yourself or you can link from an external source like from Google or Microsoft.

Google's:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Microsoft's:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">

Improve this answer

Comments

3

I have solved it as follow.

import $ from 'jquery';

(function () {
    // ... code let script = $(..)
})();
Improve this answer

Comments

2

Include jquery.js and if it is included, load it before any other JavaScript code.

Improve this answer

Comments

1

if you are trying to use jquery in your electron app before adding jquery you should add it to your modules:

<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>
<script src="js/jquery-3.5.1.min.js"></script>
Improve this answer

1 Comment

I am curious as to why this works, but it absolutely does.
0

Im using Asp.Net Core 2.2 with MVC and Razor cshtml My JQuery is referenced in a layout page I needed to add the following to my view.cshtml:

@section Scripts {
$script-here
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.