We Keep Coding

cannot access Hidden field value with jQuery

I have this view.html with Django:
{% for item in cart %}
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="{{ item.product.product_image.url }}"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">{{ item.product.name }}</p>
<p><span class="text-muted">
{% if item.product.is_service %}
Service
{% else %}
Product
{% endif %}
</span> <span class="text-muted">
</div>
<div class="col-md-3 col-lg-2 col-xl-2 d-flex product_data">
<input type="hidden" value="{{ item.product_id }}" class="prod_id">
{% csrf_token %}
{% if item.product.is_service == False %}
{% if item.product.quantity >= item.product_quantity %}
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="input-group">
<span class="input-group-btn">
<button type="button"
class=" changeQuantity quantity-left-minus btn btn-primary btn-number"
data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="number" id="quantity"
class=" align-items-center qty-input"
value="{{ item.product_quantity }}">
<span class="input-group-btn">
<button type="button"
class="changeQuantity quantity-right-plus btn btn-primary btn-number"
data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
{% else %}
<h4>Out of Stock</h4>
{% endif %}
{% endif %}
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">$ {{ item.product.selling_price }}</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-center">
<button class="text-danger delete_cart_item">Remove</button>
</div>
</div>
</div>
</div>
{% endfor %}
And here is the jQuery code:
// change the quantity in the cart
$('.changeQuantity').click(function(e) {
e.preventDefault();
var product_id = $(this).closest('.product_data').find('.prod_id').val()
var product_qty = $(this).closest('.product_data').find('.qty-input').val()
var token = $('input[name=csrfmiddlewaretoken]').val()
$.ajax({
method: 'POST',
url: '/update_cart/',
data: {
'product_id': product_id,
'product_qty': product_qty == null ? 1 : product_qty,
csrfmiddlewaretoken: token
},
success: function(response) {
console.log(response.status)
alertify.success(response.status)
// $('.cart-data').load(location.href + " .cart-data")
}
})
});
//delete
// change the quantity in the cart
$('.delete_cart_item').click(function(e) {
e.preventDefault();
var product_id = $(this).closest('.product_data').find('.prod_id').val()
var token = $('input[name=csrfmiddlewaretoken]').val()
$.ajax({
method: 'POST',
url: '/delete_cart/',
data: {
'product_id': product_id,
csrfmiddlewaretoken: token
},
success: function(response) {
console.log(response.status)
alertify.success(response.status)
// $('.cart-data').load(location.href + " .cart-data")
}
})
})
in the first code for (changeQuantity) I could access the product_id... but with the second I couldn't it is just (undefined) ??? ..... but when change the second one to
var product_id = $('.prod_id').val()
I access it successfully...
my question is why? it is just a same file and code?
and is there a better way to work with those thinks in jquery

.product_data is an ancestor of .changeQuantity so you can use closest to go from .changeQuantity to .product_data but .product_data is not an ancestor of .delete_cart_item so you cant use closet to select it.
The parent div of .delete_cart_item is a sibling of .product_data so you can use the method below to get uoyr data.
var product_id = $(this).parent().prevAll('.product_data').find('.prod_id').val()

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 increment a like button in django with ajax?

i have a post in a community and i have implemented the like button in django + ajax but i notice that when i do like a post it increments all the post's likes.how can i solve it ?
here is my template:
{% for post in posts %}
<div class="w3-container w3-card w3-white w3-round">
<a target="_blank" href="{{ post.author.profile.avatar.url }}">
<img src="{{ post.author.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"></a>
<h4>
<a href ='{% url 'profile' post.author.pk %}'>{{ post.author.profile.prenom|title }} {{ post.author.profile.nom|title }}</a>
</h4>
<span class="w3-opacity">{{ post.created|date:"d-m-Y H:i" }}</span>
<br>
<hr class="w3-clear">
<p>
{{ post.contenu }}</p>
<button type="button" class="btn btn-default btn-sm">
{{ post.comment_set.count }} </span>
</button>
{% if request.user in post.liked.all %}
<button type="button" class="btn btn-default btn-sm">
<span class='like_count'>{{ post.liked.count }} </span><a name="{{ post.id }}" style="color: blue;" class="likin" id="co"><span class="glyphicon glyphicon-heart"></span> j'aime</a>
</button>
{% else %}
<button type="button" class="btn btn-default btn-sm">
<span class='like_count'>{{ post.liked.count }} </span><a name="{{ post.id }}" style="color: black;" class="likin" id="co"><span class="glyphicon glyphicon-heart"></span> j'aime</a>
</button>
{% endif %}
{% if request.user == post.author %}
<button type="button" class="btn btn-default btn-sm">
</span>
</button>
{% endif %}
<br>
<br>
</div>
<br>
{% empty %}
<span class='w3-opacity'>Aucun post dans cette communaute</span>
<br>
<br>
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// AJAX CALL
$('.likin').click(function(){
$.ajax({
type: "POST",
url: "{% url 'like_community' %}",
data: {'content_id': $(this).attr('name'),'operation':'like_submit','csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: "json",
success: function(response) {
selector = document.getElementsByName(response.content_id);
if(response.liked==true){
$(selector).css("color","blue");
$('.like_count').html(response.likes_count);
}
else if(response.liked==false){
$(selector).css("color","black");
$('.like_count').html(response.likes_count);
}
}
});
})
</script>
this is my views.py with the part ajax like:
def like_community(request):
if request.method =="POST":
if request.POST.get("operation") == "like_submit" and request.is_ajax():
content_id=request.POST.get("content_id",None)
content=get_object_or_404(Post,pk=content_id)
if content.liked.filter(id=request.user.id): #already liked the content
content.liked.remove(request.user) #remove user from likes
liked=False
else:
content.liked.add(request.user)
liked=True
ctx={"likes_count":content.liked.count() ,"liked":liked,"content_id":content_id}
return HttpResponse(json.dumps(ctx), content_type='application/json')
i really need a help.i am new in ajax and i just find a tutorial online and i follow but the implementation of count_like button was not there.i will appreciate any help.Merci.

You seem to have non-unique ID of "co" - Then you use the wrong method document.getElementsByName which returns a collection of NAMED elements but you pass it response.content_id
Also you use $('#response.content_id') which will look for an element with `id="response.content_id"
Change to
$('.likin').click(function(e){
e.preventDefault; // stop the link
$liked = $(this); // the link clicked
$.ajax({
success: function(response) {
$liked.prev().html(response.likes_count); // the span before the "likin"
$liked.css("color",response.liked==true ? "blue": "black");
}

Javascript | onClick function not executing on .php page

I have created a very basic piece of js to call a image dependent on user input into a text field (i.e. - 'brick1' calls image brick1.jpg). This will work on normal html page, but when I try to add to .php page the onClick won't trigger. As I am new to PHP, any help would be much appreciated.
Here's what I am working with :
<script type="text/javascript">
var brickPath = "http://www.legoexample.com.au" + "/brickdata/";
function dothisnow(name){
var picId = document.images["imageId"];
picId.src = brickPath + name + "_T.jpg";
}
</script>
<form name="myForm">
<p style="text-align: center;"> Enter Lego Part #<br>
<input type=text name="picid" size="25">
<br><br>
<input type=button value="Click Here to See Your Photo" name="clicker" onClick="dothisnow(document.forms['myForm'].elements['picid'].value);">
<br>
<img id="imageId" onerror="alert('Could not find the image.');">
</form>
<script type="text/javascript">
dothisnow('brick1');
<script>
This is the PHP :
<?php
if($new_auction_step == 2)
{
$img_nr = get_option("ad_theme_pic_nr");
$catid = $_SESSION['posted_thing_cat'];
$wii = get_option('ad_uploaded_image_width');
if(empty($img_nr)) $img_nr = 5;
global $current_user;
get_currentuserinfo();
$cid = $current_user->ID;
if($uploaders == "html") $enc = 'enctype="multipart/form-data"';
?>
<!-- ########################### -->
<?php
if($uploaders == "jquery"):
?>
<ul class="post-new">
<li>
<h2><?php echo __('Images', 'AuctionTheme'); ?>:</h2>
<p>
<div id="mcont">
<form id="fileupload" action="<?php bloginfo('siteurl'); ?>/?uploady_thing=1&pid=<?php echo $pid; ?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="pid" value="<?php echo $pid; ?>">
<input type="hidden" name="cid" value="<?php echo $cid; ?>">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span><?php _e('Add files...','AuctionTheme') ?></span>
<input type="file" name="files[]" multiple>
</span>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span><?php _e('Cancel upload','AuctionTheme') ?></span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span><?php _e('Delete','AuctionTheme') ?></span>
</button>
<input type="checkbox" class="toggle">
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The loading indicator is shown during file processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd" tabindex="-1">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"><div class="modal-image"></div></div>
<div class="modal-footer">
<a class="btn modal-download" target="_blank">
<i class="icon-download"></i>
<span>Download</span>
</a>
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
<i class="icon-play icon-white"></i>
<span>Slideshow</span>
</a>
<a class="btn btn-info modal-prev">
<i class="icon-arrow-left icon-white"></i>
<span>Previous</span>
</a>
<a class="btn btn-primary modal-next">
<span>Next</span>
<i class="icon-arrow-right icon-white"></i>
</a>
</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 class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span><?php _e('Start','AuctionTheme') ?></span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span><?php _e('Cancel','AuctionTheme') ?></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">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<img src="{%=file.thumbnail_url%}">
{% } %}</td>
<td class="name">
{%=file.name%}
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span><?php _e('Delete','AuctionTheme') ?></span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
</script>
</div>
</p>
</li>
</ul>
<?php endif; //endif jquery uploads ?>
<!-- ########################## -->
<form method="post" <?php echo $enc; ?> action="<?php echo AuctionTheme_post_new_with_pid_stuff_thg($pid, $new_auction_step);?>" >
<ul class="post-new">
<?php
if($uploaders == "html"):
?>
<li>
<h2><?php echo __('Images', 'AuctionTheme'); ?>:</h2>
<p>
<?php
$args = array(
'order' => 'ASC',
'orderby' => 'post_date',
'post_type' => 'attachment',
'post_parent' => $pid,
'post_mime_type' => 'image',
'numberposts' => -1,
); $i = 0;
$attachments = get_posts($args);
$default_nr = get_option('AuctionTheme_nr_max_of_images');
if(empty($default_nr)) $default_nr = 5;
$actual_nr = count($attachments);
$dis = $default_nr - $actual_nr;
for($i=1;$i<=$dis;$i++):
?>
<input type="file" class="do_input file_inpt" name="file_<?php echo $i; ?>" />
<?php endfor; ?>
</p>
</li>
<li>
<div id="thumbnails" style="overflow:hidden;">
<script type="text/javascript">
function delete_this3(id)
{
jQuery.ajax({
method: 'get',
url : '<?php echo get_bloginfo('siteurl');?>/?_ad_delete_pid='+id,
dataType : 'text',
success: function (text) { jQuery('#image_ss'+id).remove(); window.location.reload(); }
});
//alert("a");
}
</script>
<?php
if($pid > 0)
if ($attachments) {
foreach ($attachments as $attachment) {
$url = wp_get_attachment_url($attachment->ID);
echo '<div class="div_div2" id="image_ss'.$attachment->ID.'"><img width="70" class="image_class" height="70" src="' .
AuctionTheme_wp_get_attachment_image($attachment->ID, array(70, 70)). '" />
<img border="0" src="'.get_template_directory_uri().'/images/delete_icon.png" />
</div>';
}
}
?>
</div>
</li>
<?php endif; //image uploaders html ?>

If it is working in html it also should work in php, could you show the php? The problem is probably in syntax or js integration. I will try to help you.

Why is CKEditor not showing up?

Here's my html:
<div>
{% for simpler in post.simpler_set.all %}
{% if simpler.coeficient == i %} {% autoescape off %}
<div class="jumbotron {{simpler.parent_list}}" id="{{simpler.id}}"style="display:{{simpler.display}};">{{simpler.author}}: <br/><br/>
{{simpler.simpler}}
<div align="right">
<button type="button" class = "btn btn-success reqsimp" id="{{simpler.id}}">Ask for Simpler.</button>
</div>
<div align="right">
<h3>
<div style="padding-right:20px;color:#808080;" class="glyphicon glyphicon-chevron-down"></div>
<div class="glyphicon glyphicon-align-center" style="padding-right:20px;color:#808080;"></div>
<div class="glyphicon glyphicon-chevron-up" style="color:#808080; display:none; padding-right:20px;"></div>
<div class="glyphicon glyphicon-trash" style="color:#808080; padding-right:20px;"></div>
<div class="glyphicon glyphicon-ok" style="color:#808080; padding-right:20px; display:none;"></div>
<div class="glyphicon glyphicon-remove" style="color:#808080; padding-right:20px; display:none;"></div>
</h3>
</div>
<div align="center">
<textarea class="ckeditor" cols="80" rows="8" style='display:none;'></textarea></input>{% csrf_token %}
</div>
<div align="center">
<button type="button" data-post='{{post.id}}' class="btn-primary addsimp" id="{{simpler.id}}" align="center" style="display:none;">Add Simpler.</button>
</div>
</div> {% endautoescape %}
I have included ckeditor.js in this django template.
I have added the class ckeditor to the text area.
Why does the CKeditor text area not show up?

Did you add this script in html?
<script>
CKEDITOR.replace( '.ckeditor');
</script>
and
<script type="text/javascript">
//For configuring toolbar, not necessary if I remember correctly
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt', 'image'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat']
];
};
</script>