We Keep Coding

Corousel bootstrap for products in django ecommerce website?

I am trying to do slider for my products which should be only 4 products. I took code from resourses from the internet, but I have a problem to implement it. It's not working. In the below, you can see my code. As, I mentioned, I only want it to show four products, which means first row and slider.
html
<div class="angle angle-left prev"><img src="{% static 'images/angle-left.png' %}"></div>
<div class="row owl-corousel" style="width:80%;position: relative; left:10%;">
{% for product in products %}
<div class="store col-lg-3 col-6 owl-item">
<div class="single-product">
<div class="single-product">
<div class="header-single-product">
<p style="margin-top:-10px;margin-bottom:-10px" class="code">Код: 51265</p>
{% if product in wishedProductsList %}
<i class="bi bi-heart-fill addWishlist" style="color: red" data-product="{{product.id}}" data-action="add"></i>
{% else %}
<i class="bi bi-heart addWishlist" data-product="{{product.id}}" data-action="add"></i>
{% endif %}
<i class="fa fa-balance-scale" style="margin-right:5px;"></i>
</div>
<div class="product-image">
<img style="width: 100%;height: 100%;" src="{{product.imageURL}}">
</div>
<p style="color:#617375;">В наличии</p>
<p style="color:black;">{{product.name}}</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p class="price">Цена: {{product.price}}</p>
<div class="counter">
<div class="arrow-up increase" id="arrow-up" data-product="{{product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
<div class="quantity"><input type="number" class="quantity" value="1" data-product="{{product.id}}"></div>
<div class="arrow-down increase" id="arrow-down" data-product="{{product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
<div class="product-foot"><div class="product-action-2">
<button data-product="{{product.id}}" style="width:100%;height: 50px;" data-action="add" class="btn btn-outline-secondary add-btn update-cart">В Корзину</button>
</div></div>
</div>
</div>
</div>
{% endfor %}
<div class="angle angle-right next" style="float:right;"><img src="{% static 'images/angle-right.png' %}"></div>
</div>
script
<script>
$(document).ready(function()
{
if($('.row').length)
{
var viewedSlider = $('.row');
viewedSlider.owlCarousel(
{
loop:true,
margin:30,
autoplay:true,
autoplayTimeout:6000,
nav:false,
dots:false,
responsive:
{
0:{items:1},
575:{items:2},
768:{items:3},
991:{items:4},
}
});
if($('.prev').length)
{
var prev = $('.prev');
prev.on('click', function()
{
viewedSlider.trigger('prev.owl.carousel');
});
}
if($('.next').length)
{
var next = $('.next');
next.on('click', function()
{
viewedSlider.trigger('next.owl.carousel');
});
}
}
});
</script>
However, it's showing all pictures and is not working. So, can someone tell what is the problem. If I need any specific classes that should be used can you tell me these classes in such way that doesen't affect to my design. Thanks!

How to load the defualt value in combo box and how can add product to the cart without reloading the page in django?

Problem
I want to the following things but am unable to understand that how can I do the following things.
Firstly, I want that when the page is loaded the defualt values should be displayed from using the value from the combox. For example pack of 1KG is the defualt value so it's price and other values should be updated when the page is loaded.
Secondly, I want that when the product is added to the cart the page is not reloaded or refreshed and a popup is shown that the product is added to the cart.
CODE
Script
$(document).on("change", '.tranactionID', function (event) {
event.preventDefault();
//get closest outer div..
var selector = $(this).closest(".productID")
//find to get required elements..
selector.find('.id_price').text($(this).children(":selected").attr("price"));
selector.find('.price-sale').text($(this).children(":selected").attr("sale_price"));
selector.find('.id_discount').text($(this).children(":selected").attr("discount"));
let id = $(this).find("option:selected").attr('transID');
let Url = `{% url 'cart:cart_add' 0 %}`.replace(0, id);
selector.find("form").attr('action', Url);
});
HTML
{% regroup transaction by productID as ProductList %}
{% for productID in ProductList %}
<div class="col-sm-3 productID" >
<div class="product">
<a href="{% url 'main:product-detail' productID.grouper.id %}" class="img-prod"><img class="img-fluid" src={{productID.grouper.product_image.url}} alt="" height="200px">
<span class="status id_discount">%</span>
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3 text-center">
<h3>{{productID.grouper}}</h3>
<div class="d-flex">
<div class="pricing">
<p class="price"><span class="mr-2 price-dc id_price">Rs. </span><span class="price-sale">Rs. </span></p>
</div>
</div>
<select class="tranactionID" id="ItemID" style="width: 250px;">
{% for val in productID.list %}
<option transID={{val.id}} price={{val.Price}} discount={{val.discount_percentage}} sale_price={{val.get_sale}} class="price_value" >{{val.AUID}} - {{val.Description}}</option>
{% endfor %}
</select>
<form id='transactionIDValue' class="d-inline" method="post">
{{cart_product_form}}
{% csrf_token %}
<input type="submit" id="Id_submit" class="btn btn-primary shadow px-5 py-2" value="Add To Cart">
<!-- <button type="submit" class="btn btn-primary shadow px-5 py-2">Add to Cart</button> -->
</form>
</div>
</div>
</div>
{% endfor %}

Uncaught TypeError: t.setPenSIze is not a function but it is a function

So Im working on a Webserver (hosted locally: port 5000) and robot set up where the web server communicates with the robot (raspberrypi and brickpi robot using a variety sensor - Mostly EV3 sensors but a few other that are compatible with raspberrypi's and brick pi's)
But this isn't the problem currently Im creating a system that maps out the previous moves of the robot with Turtle but when i run it shows that their a type error within developers tool on the webserver.
But if i go into mapping.js it doesn't show the same error or even that the "i" is capitalised
var brd = JXG.JSXGraph.initBoard('Box',{boundingbox: [-250, 250, 250, -250]});
var t = brd.create('turtle',[0, 0], {strokeOpacity:0.5});
t.setPenSize(3);
function forwardturtle(results)
{
console.log(results);
t.forward(results.elasped*20);
}
function rotateturtle(results)
{
console.log(results);
t.rt(results.rotated);
}
This is the Dashboard page where all the command for the robot are executed and how the turtle commands are issued
{% extends "brickpilayout.html" %}
{% block styles %}
<link herf="https://cdn.jsdelivr.net/npm/jsxgraph#1.1.0/distrib/jsxgraph.css" />
{% endblock %}
{% block content %}
<div class="container">
<h1>Dashboard</h1>
<div class="row">
<button id="loadbutton" type="button" class="btn btn-success" onclick="hideelement('loadbutton'); JSONrequest('brickpiload','POST',brickpiloadedhandler);">Load BrickPi</button>
</div>
<div id="stats" class="row"> <!-- recurring function - use json to fetch the voltage, currentcommand and current routine -->
</div>
<div id="dashboard">
<div class="row fitrow">
<div class="col-4">
<button type="button" class="btn btn-success" onclick="JSONrequest('brickpistart','POST',forwardturtle)">Forward</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-success" onclick="JSONrequest('brickpiback','POST')">Backward</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-success" onclick="JSONrequest('brickpiturnright','POST',rotateturtle)">Turn Right</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-success" onclick="JSONrequest('brickpiturnleft','POST',rotateturtle)">Turn Left</button>
</div>
</div>
<div class="row text-center fitrow">
<div class="col-4">
<button type="button" class="btn btn-dark" onclick="JSONrequest('brickpishoot','POST')">Shoot Robot</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-danger" onclick="JSONrequest('brickpistop','POST')">Stop</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-dark" onclick="hideelement('dashboard'); JSONrequest('brickpishutdown','POST', brickpishutdownhandler);">Shutdown Robot</button>
</div>
<br/>
<h2> Map </h2>
<div id="Box" class="jxgbox" style="width:500px; height:500px;"> </div>
</div>
</div>
{% endblock %}
{% block scripts %}
{% if robotenabled %} <!-- cant equate because comes in as the word 'True'-->
<script> robotenabled = true;</script>
{% else %}
<script> robotenabled = false;</script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/jsxgraph#1.1.0/distrib/jsxgraphcore.js"></script>
<script src="static/mapping.js"></script>
<script src="static/brickpirequesthandlers.js"></script>
{% endblock %}
if you need any more information on the code i can provide it in the comment s but the code i have i pretty expansive
EDIT: ewong here a image of the code which is the same a posted

Ok i don't know why this was happing but i simiply fixed by deleting that file and renaming it to something else and just changing all references to the old file to the new file and that fixed i have no idea why but it worked

How to display image name after upload in HTML?

hi i create basic page which need's to upload image. It successfully upload image but after it upload it don't displaying the name of file i upload , but it display on console . This is my index.html code.
This is how it's look in browser
It display true.png in console but keep showing choose file after i upload
<div class="container">
<div class="display-3 my-2 text-center">Breast Cancer Prediction</div>
<hr />
{% if image_class %}
<div class="display-4 my-2 text-center">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>Class : {{ image_class.class }}</p>
Confidence: {{ image_class.confidence }}
</div>
</div>
{% endif %}
<div class="col-lg-12 pt">
<form class="" method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="form-group">
<div class="custom-file mt-4">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{{ form.picture(class="file custom-file-input ") }}
{{ form.picture.label(class="custom-file-label", for="picture") }}
</div>
</div>
<div class="mt-4 text-center">
{{ form.submit(class="btn btn-outline-info") }}
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#picture').change(function(e){
var filename = e.target.files[0].name;
console.log(filename);
});
function displayfilename() {
$('#picture').trigger('change');
}
</script>

It displays to the console because you tell it to.
$('#picture').change(function(e){
var filename = e.target.files[0].name;
console.log(filename);
});
What you need to do is find the element that you're looking to list the uploads and then change the text for example
$('#picture').change(function(e){
var filename = e.target.files[0].name;
$('#picture01Desc').text(filename)
});

Cannot read property 'submit' of null i use laravel and javascript

I want to add a product to my favorites, but I do not want to make a load for the entire page, so I use JavaScript as shown in the code where I made an ancor disruption and created a form and took an id from the form and implemented it by using the submit function, but the following error appears and does
Uncaught TypeError: Cannot read property 'submit' of null
Please advise the importance
Thank you
this view
<div class="product-info">
<div class="tab-content" id="myTabContent">
<!-- Start Single Tab -->
<div class="tab-pane fade show active" id="man" role="tabpanel">
<div class="tab-single">
<div class="row">
#foreach($products as $p)
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<form action="{{route('cart.store')}}" method="post" id="add-cart-{{$p->id}}">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$p->id}}">
<input type="hidden" name="Product_Name_ar" value="{{$p->Product_Name_ar}}">
<input type="hidden" name="Price" value="{{$p->Price}}">
<div class="single-product">
<div class="product-img">
<a href="{{route('product', ['product' => $p->id])}}">
<img class="default-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
<img class="hover-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
#if(Auth::guard('customer')->check())
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="document.getElementById('favorite-{{$p->id}}').submit()" class="{{ Auth::guard('customer')->user()->favorite_products()->where('product_id', $p->id)->count() != 0 ? 'favorite' : '' }}">
<i class="fa fa-heart "></i><span>Add to Favorite</span></a>
<form id="favorite-{{$p->id}}" action="{{route('product.favorite', $p->id)}}" method="post">
{{ csrf_field() }}
</form>
#else
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="toastr.info('To add favorite list you to need login first', 'info', {
closeButton: true,
progressBar: true
})">
<i class="fa fa-heart "></i>
<span>Add to Favorite</span></a>
#endif
</div>
<div class="product-action-2">
<button style="background: transparent; border: none; color: black" class="btn btn-warning">Add to chart</button>
</div>
</div>
</div>
<div class="product-content">
<h3>{{ $p->Product_Name_ar }}</h3>
<div class="product-price">
<span>{{ $p->Price }} K.D</span>
</div>
</div>
</div>
</form>
</div>
#endforeach
</div>
</div>
</div>
<!--/ End Single Tab -->
</div>
</div>
This Controller
class Favoritecontroller extends Controller
{
public function add($id) {
$customer = Auth::guard('customer')->user();
$isFavorite = $customer->favorite_products()->where('product_id', $id)->count();
if($isFavorite == 0) {
$customer->favorite_products()->attach($id);
}else {
$customer->favorite_products()->detach($id);
}
return redirect()->back();
}
}
This Route
Route::group(['middleware' => ['auth:customer']], function () {
Route::post('favorite/{id}/add', 'FavoriteController#add')->name('product.favorite');
});

I assume your JS fails here
... onclick="document.getElementById('favorite-{{$p->id}}').submit()"
The proper way to do it
... onclick="addToWhishList({{$p->id}})"
Then in your JS
<script>
function addToWhishList(formId) {
//console.log(formId);
document.getElementById('favorite-' + formId).submit();
}
</script>
Check working Demo