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!

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

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

Jquery Isotope to implement data filters

I'm first time trying to implement data filter for one of my html template using Jquery Isotope plugin.Couldn't get any error in browser console but data filter doesn't work.
Here's my code:
HTML
<div class="ui-group" style="margin-left: 20%; margin-top: 2%;">
<h3 class="ui-group__title">Filter</h3>
<div class="filters button-group js-radio-button-group">
<button class="button is-checked" data-filter="*"> All </button>
<button class="button" data-filter=".instances"> Instances </button>
<button class="button" data-filter=".images"> Images </button>
<button class="button" data-filter=".deployments"> Deployments </button>
</div>
</div>
<div class="list_of_members">
{% for instance in user.instances.all %}
<div class="orders instances" style="margin-bottom: 2%;">
<div class="icon-text">
<h3>{{ instance.name }}</h3>
<p><b><strong style="color: orange">Server :</strong> </b><br>{{ instance.serverFile }} <br></p><br>
<p><b><strong style="color: orange">Package.json :</strong> </b><br>{{ instance.jsonPackageFile }}</p>
</div>
</div>
{% endfor %}
{% for image in user.images.all %}
<div class="orders images" style="margin-bottom: 2%;">
<div class="icon-text">
<h3>{{ image.tagName }}</h3>
<p><b><strong style="color: orange">Instance :</strong> </b><br>{{ image.instance }} <br></p><br>
<p><b><strong style="color: orange">Created By :</strong> </b><br>{{ image.user.username }}</p>
</div>
</div>
{% endfor %}
</div>
Javascript Part after loading Jquery
<script src="{% static 'js/isotope.pkgd.min.js' %}"></script>
<script>
// Activate isotope with Jquery filter for instances,images and deployments
$('.list_of_members').isotope({
itemSelector: '.orders',
layoutMode: 'fitRows'
});
// Isotope click function
$('.button').click(function(){
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
var selector = $(this).attr('data-filter');
$('.list_of_members').isotope({
filter: selector
});
return false;
});
</script>
is there any issue in my code or misconfiguration?
help me, please!

Submit Additional Form Data without setting formData

I am following How-to-submit-additional-form-data and have a working fileupload that is submitting the additional form data, ie. the additional textarea input field, description[], with chunking and multiple file support without setting formData:{ } on .fileupload(). My problem is that I am only able to submit the field as an array, description[], and I am unable to come up with some logic to associate the appropriate description[i] with the appropriate file. I am using asp.net mvc which should not matter in this case.
The View:
<script type="text/javascript">
$(document).ready(function () {
$('#btnContinue').prop('disabled', true);
$('#fileupload').fileupload({
url: '#Url.Action("UploadChunk", "Upload")',
maxChunkSize: 1048576,
}).addClass('fileupload-processing')
.bind('fileuploadalways', function (e, data) {
if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) {
var pre = $('#fileIds').val() == "" ? ';' : '';
var append = $('#fileIds').val() + pre + data.result.id + ';';
$('#fileIds').val(append);
}
})
.bind('fileuploaddone', function (e, data) {
$('#btnContinue').prop('disabled', false);
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
});
});
</script>
#using (Html.BeginForm("FileSet", "Upload", FormMethod.Post, new { id = "fileupload" } ))
{
#Html.AntiForgeryToken()
#Html.Hidden("fileIds", "", new { #id = "fileIds" })
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start" id="btnStartUpload">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel" id="btnCancelUpload">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete" id="btnDeleteUpload">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input style="visibility: hidden" type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<div class="row">
<div class="col-md-10">
<button type="submit" id="btnContinue" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<input type="hidden" name="locator[]" value="{%=file.name%}" />
<textarea name="description[]" placeholder="Enter description" class="form-control" rows="3"></textarea>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
The Controller:
[HttpPost]
public ContentResult UploadChunk(string[] description)
{
ParseRequestHeaderRanges(this.Request);
var r = new List<UploadFilesResult>();
var i = 0;
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
var uploader = System.Security.Principal.WindowsIdentity.GetCurrent().Name;
var result = DataTranslator.UploadChunk(hpf.InputStream, hpf.FileName, description[i], hpf.ContentType,
hpf.ContentLength, (int)hpf.InputStream.Length, this.TotalBytes, uploader);
r.Add(result);
i++;
}
return Content("{\"id\":\"" + r[0].Id + "\",\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
}

Rather than have it be an array make it a hash? Say using the filename? That way you don't have to rely on things being in the right order.
<textarea name="description[{%=file.name%}]" placeholder="Enter description" class="form-control" rows="3"></textarea>
And in the controller:
var result = DataTranslator.UploadChunk(
hpf.InputStream,
hpf.FileName,
description[hpf.FileName],
hpf.ContentType,
hpf.ContentLength,
(int)hpf.InputStream.Length,
this.TotalBytes,
uploader
);