Hi I created a web app with Django. In this app there are 6 cards with a button for increase and a button for decrease the quantity of food to buy. I have a problem: only the buttons in the first card work. Here's the HTML code
<div class="container">
<div class="row">
{% for roll in rolls %}
<div class="col-4">
<div class="card" style="width: 16rem;">
<img src="{{ roll.immagine.url }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ roll.nome }} Roll</h5>
<p class="card-text">€ {{ roll.prezzo }}</p>
<button id="incrementBtn" style="border-radius: 8px; background-color:orange;">+</button>
<span id="counter">0</span>
<button id="decrementBtn" style="border-radius: 8px; background-color: lightsalmon;">-</button>
Acquista
</div>
</div>
</div>
{% endfor %}
</div>
</div>
Here's the Javascript code:
document.addEventListener("DOMContentLoaded", function() {
let idCounter = "counter1, counter2, counter3, counter4, counter5, counter6";
let arrIdCounter = idCounter.split(", ");
console.log(arrIdCounter);
let valueCounter = document.getElementById('counter').innerHTML;
const incrementBtn = document.getElementById('incrementBtn');
const decrementBtn = document.getElementById('decrementBtn');
incrementBtn.addEventListener('click', () => {
console.log(valueCounter);
valueCounter++;
document.getElementById('counter').innerHTML = valueCounter;
console.log(valueCounter);
});
decrementBtn.addEventListener('click', () => {
if (valueCounter > 0)
{
valueCounter--;
}
document.getElementById('counter').innerHTML = valueCounter;
});
});
When you render your file you will have something like:
<div class="col-4">
<div class="card" style="width: 16rem;">
...
<button id="incrementBtn" ...>+</button>
...
<button id="decrementBtn" ...>-</button>
...
</div>
</div>
<div class="col-4">
<div class="card" style="width: 16rem;">
...
<button id="incrementBtn" ...>+</button>
...
<button id="decrementBtn" ...>-</button>
...
</div>
</div>
<div class="col-4">
<div class="card" style="width: 16rem;">
...
<button id="incrementBtn" ...>+</button>
...
<button id="decrementBtn" ...>-</button>
...
</div>
</div>
How your script may know which element take? You cannot have more than 1 html element with same id, they have to be unique. To do so, you may change you buttons' ids to:
<button id="incrementBtn_{{ poll.id }}" style="border-radius: 8px; background-color:orange;">+</button>
And your variable to array:
const incrementBtn = document.querySelectorAll('[id^="incrementBtn"]');
But then of course you have to use it in loop.
Related
Problem
I have the problem that the value of the property :torrent of the ShowVideo component is not updating.
In the MovieSection component there is a select to choose options, it uses a torrent_selected v-model to save the selected data, when changing options it saves the changes but the value of :torrent.sync = "torrent_selected.torrent_magnet" It remains the same.
The ShowVideo component is supposed to update the video once the property is updated.
ShowVideo: Component
<template>
<div>
<div id='player' style="display: block; background: #000; margin: 0 auto;" class='webtor'></div>
</div>
</template>
<script>
import { onMounted, watch } from '#vue/composition-api';
import { loadPlayer } from '../utils/index';
export default {
name: "ShowVideo",
props: {
torrent: String
},
setup(props) {
let data = props.torrent;
// data is not updating ...
watch(() =>
data,
value =>{
data = value;
let d = data;
loadPlayer(d);
}
)
onMounted(()=> loadPlayer(data));
return {
data
};
}
};
</script>
MovieSection
<template>
<!--Begin: Main-->
<div id="main-wrapper">
<!--Begin: Detail-->
<div class="detail_page detail_page-style">
<div
class="cover_follow"
:style="{ 'background-image': 'url(' + data[0][0].poster_big + ')' }"
></div>
<div class="container">
<div class="prebreadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link :to="{ name: 'Movies' }">Movies</router-link>
</li>
<li class="breadcrumb-item active" aria-current="page">
{{ data[0][0].title }}
</li>
</ol>
</nav>
</div>
<!--Begin: Watch-->
<div class="detail_page-watch">
<div class="dp-w-cover">
<!-- <div class="dp-w-c-play goto-seasons">
<i class="fa fa-play"></i>
</div> -->
</div>
<div class="detail_page-infor">
<div class="dp-i-content">
<div class="dp-i-c-poster">
<div class="film-poster mb-2">
<img
class="film-poster-img"
:src="data[0][0].poster_big"
:title="data[0][0].title"
:alt="data[0][0].title"
/>
</div>
<div class="block-rating" id="block-rating"></div>
</div>
<div class="dp-i-c-right">
<h2 class="heading-name">
<div>{{ data[0][0].title }}</div>
</h2>
<div class="dp-i-stats">
<span class="item mr-1">
<button
#click.prevent="() => (show = !show)"
title="Trailer"
class="btn btn-sm btn-trailer"
>
<i class="fas fa-video mr-2"></i>Trailer
</button>
</span>
<span class="item mr-1"
><button class="btn btn-sm btn-quality">
<strong>HD</strong>
</button></span
>
<span class="item mr-2"
><button class="btn btn-sm btn-radius btn-warning btn-imdb">
{{ data[0][0].rating }}
</button></span
>
</div>
<div class="description">
{{ data[0][0].description }}
</div>
<div class="elements">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-12">
<div class="row-line">
<span class="type"><strong>Released: </strong></span>
{{ data[0][0].year }}
</div>
<div class="row-line">
<span class="type"><strong>Genre: </strong></span>
{{ data[0][0].genres && data[0][0].genres.toString() }}
</div>
<div class="row-line">
<span class="type"><strong>Actors: </strong></span>
{{
(data[0][0].actors && data[0][0].actors.toString()) ||
"n/a"
}}
</div>
<div class="row-line">
<span class="type"><strong>Directors: </strong></span>
{{
(data[0][0].directors &&
data[0][0].directors.toString()) ||
"n/a"
}}
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-4 col-sm-12">
<div class="row-line">
<span class="type"><strong>Runtime: </strong></span>
{{ data[0][0].runtime }}
</div>
<div class="row-line">
<span class="type"><strong>Writers: </strong></span>
{{
(data[0][0].writers &&
data[0][0].writers.toString()) ||
"n/a"
}}
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--Trailer-->
<div v-if="show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="iframe16x9">
<iframe
width="560"
height="315"
id="iframe-trailer"
:src="data[0][0].trailer_url"
frameborder="0"
allow="autoplay;"
allowfullscreen
></iframe>
</div>
<button
#click.prevent="() => close()"
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
<!--End: Trailer-->
<div
class="alert mb-3"
style="
background: #ffaa00;
color: #111;
font-size: 16px;
font-weight: 600;
"
>
If you get any error message when trying to stream, please Refresh
the page or switch to another torrent.
</div>
<div class="watching_player-control">
<div id="pc-fav" class="btn btn-sm btn-radius btn-secondary mr-2">
<i class="fa fa-magnet mr-2"></i>Select Torrent
</div>
<select v-model="torrent_selected">
<option
v-for="(options, index) in data[0][0].torrents.items"
:value="options"
:key="index"
>
{{ options.file }}
</option>
</select>
<div class="clearfix"></div>
<!--torrent video-->
<div v-if="torrent_selected">
<ShowVideo :torrent.sync="torrent_selected.torrent_magnet" />
<i></i>Quality: {{ torrent_selected.quality }} <i></i>Peers:
{{ torrent_selected.torrent_peers }} <i></i>Seeds:
{{ torrent_selected.torrent_seeds }}
<a
:href="torrent_selected.torrent_magnet"
download
title="Download Torrent"
>
<i class="fa fa-magnet mr-2"></i>Download Torrent
</a>
</div>
<!--End: torrent video-->
</div>
</div>
<!--End: Watch-->
</div>
</div>
<!--End: Related-->
</div>
<!--End: Main-->
</template>
<script>
import { nSQL } from "#nano-sql/core";
import { useRouter } from "#u3u/vue-hooks";
import { ref } from "#vue/composition-api";
import ShowVideo from "../components/ShowVideo";
export default {
name: "MovieSection",
components: {
ShowVideo
},
setup() {
const { route } = useRouter();
const data = ref([]);
const id = ref(route.value.params.id);
nSQL().useDatabase("popcorntimedb");
nSQL("movies");
nSQL()
.query("select")
.where(["ID", "=", id.value])
.exec()
.then(rows => {
data.value.push(rows);
});
const show = ref(false);
const torrent_selected = ref(null);
const close = () => (show.value = false);
return {
data,
torrent_selected,
show,
close,
id
};
}
};
</script>
Because you are making a copy of props.torrent and watching that copy for changes....which never happens. Just watch the prop
setup(props) {
watch(() =>
props.torrent,
value => {
loadPlayer(props.torrent);
}
)
onMounted(()=> loadPlayer(props.torrent));
}
fix JavaScript #LoadMore button to load 5 items per page - Django
i want show 5 item per once then user click on LoadMore button then it will load more 5 items
how to do that with js ?
html code :
{% for mobile in mobileforhome %}
<div class="card-deck">
<div class="card mb-3" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height:100%;width:100%;border-radius:6.5px;" src="{{ mobile.get_image }}" class="rounded float-right" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title" id="primary_site_pages_app_name_control"> <b>{{ mobile.name }}</b></h5>
<p class="card-text" id="font_control_for_all_pages">{{ mobile.app_contect|truncatechars_html:153|safe}}</p>
</div>
<div class="card-footer">
<small class="text-muted" id="date_post_control">{{ mobile.post_date}}</small>
<small class="firstsmall"><a class="bg-orange" href="{% url 'mobile' %}" id="tag_name_control">هواتف</a></small>
</div>
</div>
</div>
</div>
</div>
<hr>
{% endfor %}
<!-- show more button -->
<div class="text-center mt-4">
<a role="presentation" type="button" class="btn btn-secondary btn-lg loadMore" style="width:40%;color:white">Show More</a>
</div>
<!-- script controll the games ( show 6 game per page ) -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
const thumbnails = $(".card-deck .card mb-3");
let visibleThumbnails = 0;
function showThumbnailsUntil(index) {
for (var i = visibleThumbnails; i <= index; i++) {
if (i < thumbnails.length) {
$(thumbnails[i]).addClass('visible');
visibleThumbnails++;
} else {
break;
}
}
}
showThumbnailsUntil(2);
$(".loadMore").on("click",function(){
showThumbnailsUntil(visibleThumbnails + 2)
if(visibleThumbnails === thumbnails.length)
{
$(".loadMore").fadeOut(); //this will hide
//button when length is 0
}
})
</script>
<style>
.card-deck {
display: none;
}
.card-deck.visible {
display: block;
}
</style>
<!-- end script -->
this is my code but it don't work why ? (it's show button and you can press on it but it's do nothing ! it's show all items not 5 )
I am working with Django. Below is my JavaScript code, in this code, "hello world" is getting printed in console but when I am clicking add to cart, then "clicked" is not getting printed.
console.log("Hello world");
var updateBtns = document.getElementsByClassName('update-cart');
for (var i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListener('click', function() {
var action = this.dataset.action;
console.log('clicked');
});
}
This is part of my HTML code containing the button:
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{i.product_name}}</h5>
<p class="card-text">{{i.desc}}</p>
<button data-product="pr{{i.id}}" data-actions="add"
class="btn btn-primary add-btn update-cart">
Add to Cart
</button>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
</div>
{% block js %}
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
{% endblock %}
No errors are getting printed when running this. Please Help. Thanks in advance.
You likely want to do this
You missed an s on actions too
Delegate from the nearest static container, then you do not need to loop at all
window.addEventListener("load", function() { // on page load
document.querySelector(".container").addEventListener("click", function(e) {
const tgt = e.target;
if (e.target.classList.contains('update-cart')) {
const action = tgt.dataset.actions;
const product = tgt.dataset.product;
const title = tgt.closest(".card-body").querySelector(".card-title").innerText;
// or
const desc = tgt.previousElementSibling.innerText;
console.log(action, product, title, desc );
}
});
});
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Description 1</p>
<button data-product="pr1" data-actions="add" class="btn btn-primary add-btn update-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Description 2</p>
<button data-product="pr2" data-actions="add" class="btn btn-primary add-btn update-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="carousel-item"></div>
</div>
In the "card-text" class it calls the text from the Json file but it is too long I would like to cut the text and add actions click on the "Read More" button but for only the clicked card to react, someone something ?
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
<p class="card-text">
{{movie.overview}}
</p>
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>
Try this below :
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
---------------------- Add this part ------------------------------
<div class="card-text">
<p v-if="movie.readMore">
{{ movie.overview | limitDisplay }}
<a v-if="movie.overview.length > 100" #click="toggleReadMore(obj.payload, movie.id, false)">Read More<a>
</p>
<p v-if="!movie.readMore">
{{ movie.overview }}
<a #click="toggleReadMore(true)">Read Less<a>
</p>
</div>
---------------------------------------------------------------
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>
In your script add this in your methods and filters :
methods: {
toggleReadMore(payload, movie_id, value){
payload = payload.map(function(item){
if(item.id == movie_id){
item['readMore'] = value;
return item
}
});
}
},
filters : {
limitDisplay: function(value) {
return value.substring(0, 100) + "...";
}
}
I am deleting data from array and trying to update the view but it is not working.
async deleteProduct(e) {
try {
const data = await this.rest.get(environment.apiUrl + `/api/seller/products/delete/?id=${e.target.id}`);
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
} catch (error) {
this.data.error(error['message']);
}
}
Html:
<section id="myProducts">
<div class="container p-5">
<app-message></app-message>
<div *ngIf="!products" class="m-auto">
<h1 class="text-center display-3 mt-5">
<i class="fa fa-spinner fa-spin"></i>
</h1>
</div>
<h3 *ngIf="products && !products.length" class="display-2 text-center mt-5">My Products is Empty</h3>
<div *ngIf="products && products.length" class="row">
<div class="col">
<h4 class="display-4">My Products</h4>
<div class="row">
<div class="offset-10 col-2 d-none d-md-block">
<p>
<small class="text-muted">Price</small>
</p>
</div>
</div>
<hr class="mt-0">
<div *ngFor="let product of products" class="product">
<div class="row">
<div class="col-4 col-md-2">
<a routerLink="/product/{{ product.id }}">
<img src="{{ product.image }}" alt="image" class="img-fluid img-thumbnail">
</a>
</div>
<div class="col-5 col-md-8">
<h5>
<a routerLink="/product/{{ product.id }}">{{ product.title }}</a>
<p class="m-0">
<small class="text-muted">{{ product.category.name }}</small>
</p>
</h5>
</div>
<div class="col-2">
<h6 class="font-weight-bold text-danger" >{{ product.price | currency : 'INR' }}</h6>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="editProduct($event)" [disabled]="btnDisabled">Edit</button>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="deleteProduct($event)" [disabled]="btnDisabled">Delete</button>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</section>
After deleting the item from array, I am trying to update the object like this:
this.products = (this.products.filter(e => e != (data['products'].id)))
It seems so that your view does not check the changes of your products array.
So I would say trigger it manually:
InjectChangeDetectorRef to trigger change detection manually.
constructor(private cd: ChangeDetectorRef){....}
And in your method call this.cd.detectChanges():
async deleteProduct(e) {
...
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
this.cd.detectChanges();
...
}
you are comparing e to != e['products'].id ..
it is not true.
i think you should be checking the variable which holds the id in your "e"
which means
e.id != ...or something like so.
I Hope it is working.