DEV Community

Sagarmoy
Sagarmoy

Posted on

Unable to Resolve jQuery ReferenceError: $ is not defined in JavaScript File

I'm encountering an issue with my JavaScript file where I'm getting the error "Uncaught ReferenceError: $ is not defined" in the browser console. I'm using jQuery in my JavaScript code, but it seems like jQuery is not being recognized.

Here's the relevant portion of my JavaScript file (address.js):

console.log("Hi");

$(document).ready(function(){
    $(document).on("click",".make-default-address",function(){
        let id = $(this).attr("data-address-id")
        let this_val = $(this)

        console.log("Id is:", id);
        console.log("Element is:", this_val);

        $.ajax({
            url:"/make-default-address",
            data: {
                "id":id
            },
            dataType: "json",
            success: function(response){
                console.log("Address Made default.....");
                if (response.boolean == True){
                    $(".check").hide()
                    $(".action_btn").show()



                    $(".check"+id).show()
                    $(".button"+id).hide()
                }
            }
        })
    })
})
Enter fullscreen mode Exit fullscreen mode

I've ensured that jQuery is loaded before this script in my HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="{% static 'assets/js/address.js' %}"></script>
Enter fullscreen mode Exit fullscreen mode

However, I'm still getting the error. Can someone please help me understand what might be causing this issue and how I can resolve it?

Any assistance would be greatly appreciated. Thank you!

Top comments (0)