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.
Related
I want to toast messages for all those cards. but it is showing for the first card only. I have attached a view of my page where I want to add a toast message to view the details of the card if a user is not logged in.
I noob in Django and Javascript. this is a small part of my university project.
my page looks like this: https://i.stack.imgur.com/cYSPW.jpg
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
<section class="details-card">
<div class="container">
<div class="row">
{% for homes in home %}
<div class="col-md-4 mb-4">
<div class="card-content">
<div class="card-img">
<img src="{{ homes.coverImg.url }}" alt="Cover Image">
<span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
</div>
<div class="card-desc">
<p class="small mb-1"> <i class="fas fa-map-marker-alt mr-2"></i>{{homes.address}}</p>
<h3>{{ homes.title}}</h3>
{% if request.user.is_authenticated %}
Details
{% else %}
<button type="button" class="btn btn-primary" id="toastbtn">XDetails</button>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- Alert Message Popup-->
<!--bottom-0 end-0 p-3-->
<div class="position-fixed top-50 start-50 translate-middle p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="({% static 'img/icon.png' %})" class="rounded me-2" alt="...">
<strong class="me-auto">My Second Home</strong>
<small>0.1s ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello!<br>You need to login first to see details.
<div class="mt-2 pt-2 border-top">
<a class="btn btn-primary btn-sm" href="{% url 'login' %}">Sign In</a>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
So here your problem comes from the id toastbtn. You have iterated the for loop and all the buttons in the cards got the same id but id unique for everyone so the id is added to the first card button only. Here one thing can be done remove the toastbtn id from the button and onclick attribute on the btn and pass the value the function call like shown below -
<button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>
The showToast function is the same function u added in you js file
Your JS file will look like this
function showToast() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
HTML File
<section class="details-card">
<div class="container">
<div class="row">
{% for homes in home %}
<div class="col-md-4 mb-4">
<div class="card-content">
<div class="card-img">
<img src="{{ homes.coverImg.url }}" alt="Cover Image">
<span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
</div>
<div class="card-desc">
<p class="small mb-1"> <i class="fas fa-map-marker-alt mr-2"></i>{{homes.address}}</p>
<h3>{{ homes.title}}</h3>
{% if request.user.is_authenticated %}
Details
{% else %}
<button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- Alert Message Popup-->
<!--bottom-0 end-0 p-3-->
<div class="position-fixed top-50 start-50 translate-middle p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="({% static 'img/icon.png' %})" class="rounded me-2" alt="...">
<strong class="me-auto">My Second Home</strong>
<small>0.1s ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello!<br>You need to login first to see details.
<div class="mt-2 pt-2 border-top">
<a class="btn btn-primary btn-sm" href="{% url 'login' %}">Sign In</a>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
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));
}
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) + "...";
}
}
When i open this template I need to find out one div scrollHeight from the code this.myScrollContainer.nativeElement.scrollHeight. But I am getting nativeElement. Actually div scroll is coming top to bottom. What I need to do is scroll bottom to top. Does anyone know what is the issue?
<ng-template #ModalReviewHistory>
<div class="modal-header">
{{ "workFlowCommentsHistory.commentModalTitle" | translate }}
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="modalRef.hide()"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body scroll" #scrollMe >
<div class="container box" *ngIf="commentHistory === null">
{{ "workFlowCommentsHistory.noCommentMessage" | translate }}
</div>
<!-- <ul class="p-0"> -->
<div class="round" *ngFor="let comments of commentHistory; let i = index">
<div class="bs-callout bs-callout-default mb-0">
<div class="talktext pt-1">
<div class="row">
<div class="col-4 font-12">
<strong>{{ comments?.creator?.firstName }}</strong> |
<strong>{{ comments.role }}</strong>
</div>
<div class="col-5 font-12">
{{ comments?.creator?.createdAt | myDateFormat }}
</div>
<!-- <div class="col-5"></div> -->
<div class="col-2 text-left">
<div
*ngIf="
comments.formKey === 'edjw:panelReviewTask' ||
comments.consolidatedTask === true
"
>
<button
(click)="clickViewMore(comments.id, FeedbackModel)"
type="button"
class="btn btn-outline-primary font-12 btn-sm"
>
{{ "workFlowCommentsHistory.viewBtn" | translate }}
</button>
</div>
</div>
<div class="col-1 text-right">
<button
(click)="onClickReplyToComment(i, comments)"
class="btn btn-outline-primary btn-sm"
title="Reply"
>
<i class="fa fa-reply text-info"></i>
</button>
</div>
</div>
<div class="row pl-3">
{{ comments?.contents }}
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-3"></div>
<div *ngIf="comments.repliesPost" class="col-9">
<div
*ngFor="let reply of comments.repliesPost; let index = index"
[ngClass]="{
'bs-callout bs-callout-default margin-5-left':
reply.isCommentOwner,
'bs-callout-right bs-callout-default-right margin-6-right': !reply.isCommentOwner
}"
>
<!-- <p
*ngIf="
lineCommentReplyEditIndex.replyIndex !== index ||
lineCommentReplyEditIndex.commentIndex !== commentIndex
"
[innerHTML]="reply.contents"
></p> -->
<div class="row">
<div class="col-9 font-12">
<strong>
{{ reply.creator }} |
{{ reply.createdAt | myDateFormat }}</strong
>
</div>
</div>
<div class="row pl-3 py-2">
{{ reply?.contents }}
</div>
</div>
</div>
</div>
<div *ngIf="lineCommentReplyIndex === i" class="row">
<form [formGroup]="lineNumberReplyCommentForm" novalidate>
<div class="col-md-1"></div>
<div class="col-md-9">
<div class="form-group">
<textarea
placeholder="Your comment goes here..."
pInputTextarea
formControlName="comment"
class="form-control"
rows="2"
style="width: 350px;"
></textarea>
<div
class="ui-message ui-messages-error ui-corner-all"
*ngIf="
lineNumberReplyCommentForm.controls['comment'].invalid &&
lineNumberReplyCommentForm.controls['comment'].dirty
"
>
<i class="fa fa-close"></i>
<span
*ngIf="
lineNumberReplyCommentForm.controls['comment'].errors
.required
"
>{{
"lineComments.viewLineComment.replyCommentValidation"
| translate
}}</span
>
</div>
</div>
</div>
<div class="col-md-2">
<button
(click)="submitlineNumberReplyCommentForm()"
class="btn btn-primary"
>
{{ "lineComments.viewLineComment.replyBtn" | translate }}
</button>
</div>
</form>
</div>
</div>
<!-- </ul> -->
</div>
<div class="modal-footer">
<button
(click)="modalRef.hide()"
type="button"
class="btn btn-outline-primary"
>
{{ "prReviewResponseModal.cancel" | translate }}
</button>
</div>
</ng-template>
#ViewChild('scrollMe') myScrollContainer: ElementRef;
#ViewChild('ModalReviewHistory') ModalReviewHistory: ElementRef;
onShowReviewerList() {
this.modalRef = this.modalService.show(this.ModalReviewHistory,
Object.assign({}, {
class: 'gray modal-lg'
},
this.config));
this.scrollToBottom();
}
scrollToBottom() {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}
<ng-template> isn't a physical element in the DOM. Converting this to a <div> or something that is created in the DOM should fix your problem.
For example:
<div #ModalReviewHistory>
<!-- modal stuff here -->
</div>
You can diagnose this by inspecting the HTML that gets created. You will see that <ng-template> doesn't exist.