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

Sagarmoy — Tue, 26 Mar 2024 06:23:48 +0000

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()
                }
            }
        })
    })
})

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>

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!

Troubleshooting AJAX Cart Item Deletion in Django: Items Not Removing from Cart

Sagarmoy — Mon, 18 Mar 2024 06:13:39 +0000

I am getting problem during deleting product from cart
In my cart.html:

<button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>

This is the delete button I created. Now also I created js for this button
so in my cart.js:

console.log("Hi");

$(document).on("click", '.delete-item' ,function(){
    let this_val=$(this)
    var _pID=$(this).attr('data-item');
    console.log(_pID);

    $.ajax({
        url: '/delete-from-cart',
        data: {
            'id': _pID,
        },
        dataType: 'json',
        beforeSend: function(){
            this_val.hide()
        },
        success: function(response){
            this_val.show()
            $(".cart-items-count").text(response.totalcartitems)
            $("#cart-list").html(response.data)
        }
    })
})

for the js file when i am clicking on the delete button I am getting product ids as output
I also created a views for it. So, In my views.py:

def delete_item_from_cart(request):
    product_id=str(request.GET['id'])
    if 'cart_data_obj' in request.session:
        if product_id in request.session['cart_data_obj']:
            cart_data=request.session['cart_data_obj']
            del request.session['cart_data_obj'][product_id]
            request.session['cart_data_obj'] = cart_data

    cart_total_ammount=0
    if 'cart_data_obj' in request.session:
        for p_id, item in request.session['cart_data_obj'].items():
             cart_total_ammount += int(item['qty']) * float(item['price'])

    context= render_to_string("core/async/cart_list.html", {"products":products}, {"data":request.session['cart_data_obj'],'totalcartitems': request.session['total_cart_items'] ,'cart_total_ammount':cart_total_ammount})
    return JsonResponse({"data": context, 'totalcartitems': request.session['total_cart_items'] ,'cart_total_ammount':cart_total_ammount})

and then In urls.py:

path("delete-from-cart/", delete_item_from_cart,name="delete-from-cart"),

this is my url

Note: At last I would say that I made a cart page where all the products are displaying which are sellected. and I connected cart-lsit.html with cart.html by main tag with id

you can see this in the below code
in cart.html:

{% extends 'partials/base.html'%}


{%load static%}

{% block content %}
    <main class="main" id="cart-list">
        <div class="container1">
            <center><h2 style="font-size: 28px; color: #FFC0CB; font-weight: bold;">Your Shopping Cart</h2></center>
            <div class="row">
                {% for product_id, item in data.items %}
                <div class="col-md-8">
                    <div class="cart-item">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <img src="{{item.image}}" alt="Product Image" class="product-image">
                                </a>
                            </div>
                            <div class="col-md-6 product-details">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <h4>{{item.title}}</h4>
                                </a>
                                <p>Product description lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="quantity-control">
                                    <button class="btn btn-sm btn-update"><i class="fas fa-sync-alt"></i></button>
                                    <input type="number" class="form-control quantity-input" value="{{item.qty}}">
                                    <button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4>{{item.price}}/Quantity</h4>
                            </div>
                        </div>
                    </div>
                    <!-- More cart items can be added dynamically here -->
                </div>
                {%  endfor  %}
                <div class="col-md-4">
                    <div class="cart-item total-section">
                        <h3>Total: <span class="total">{{cart_total_ammount}}</span></h3>
                        <button class="btn btn-checkout">Proceed to Checkout</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="{% static 'assets/js/cart.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </main>
    </body>
{%  endblock content  %}

The same main id of the above code i am using for cart-list.html:

<body>
    <main class="main" id="cart-list">
        <div class="container1">
            <center><h2 style="font-size: 28px; color: #FFC0CB; font-weight: bold;">Your Shopping Cart</h2></center>
            <div class="row">
                {% for product_id, item in data.items %}
                <div class="col-md-8">
                    <div class="cart-item">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <img src="{{item.image}}" alt="Product Image" class="product-image">
                                </a>
                            </div>
                            <div class="col-md-6 product-details">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <h4>{{item.title}}</h4>
                                </a>
                                <p>Product description lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="quantity-control">
                                    <button class="btn btn-sm btn-update"><i class="fas fa-sync-alt"></i></button>
                                    <input type="number" class="form-control quantity-input" value="{{item.qty}}">
                                    <button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4>{{item.price}}/Quantity</h4>
                            </div>
                        </div>
                    </div>
                    <!-- More cart items can be added dynamically here -->
                </div>
                {%  endfor  %}
                <div class="col-md-4">
                    <div class="cart-item total-section">
                        <h3>Total: <span class="total">{{cart_total_ammount}}</span></h3>
                        <button class="btn btn-checkout">Proceed to Checkout</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="{% static 'assets/js/cart.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </main>
    </body>

this hole code is not deleting products from cart page.

Forem: Sagarmoy

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

Troubleshooting AJAX Cart Item Deletion in Django: Items Not Removing from Cart